预览与调试 - SuperApp

小程序可以在 VS Code 中预览调试，也可通过 WindVane 小程序插件在 Android/iOS 模拟器中调试。

本文分别介绍两种调试方式的详细操作。

VS Code调试

情况一：已启动（小程序可以被预览）
- 小程序服务已在本地运行，可通过 URL 直接预览。
  1. 选择「已启动」。
  2. VS Code 顶部将弹出输入框。
  3. 输入可预览的 URL。
  4. 插件将自动打开浏览器进行预览。
情况二：未启动（需先启动小程序）
- 小程序尚未启动，需先运行 npm start 启动本地服务。
  1. 选择「未启动」。
  2. WindVane 小程序插件将在终端自动执行 npm start 命令。
  3. 服务启动后，VS Code 顶部将弹出输入框。
  4. 根据终端日志中的提示，输入显示的 URL。
  5. 插件将打开浏览器并加载预览页面。

说明

1. 启动命令

默认使用 npm start 启动应用。
如果你的小程序使用其他启动命令（如 npm run dev），可在插件设置中修改：
- 打开设置 → 搜索 SuperApp: Start Command，修改为自定义启动命令

2. 本地服务（Server）

3. 预览 URL

4. 端口说明（以脚手架为例）

使用插件初始化的小程序脚手架，默认端口为 3000。
启动后可通过 http://本机IP:3000 预览。
- 若端口 3000 被占用，npm 会提示是否使用其他端口（如 3001）。若确认切换，则预览 URL 变为 http://本机IP:3001。

输入URL：

成功预览：

运行Developer: Toggle Developer Tools命令，打开调试控制台，即可在VS Code中调试小程序。

重要

为了提高开发效率，执行预览操作后，模拟器只在预览首次安装调试 App，即如果目标模拟器中存在调试 App 则不进行覆盖安装，若预览后遇到 JSAPI 调用异常，则可能是因为模拟器未安装最新调试 App，需手动在模拟器中卸载调试 App，再次执行预览。

单击在 Android 设备上预览，插件会启动 Android 模拟器。
模拟器启动以后，在 VS Code 窗口顶部会弹出一个输入框，需要在输入框中输入小程序的预览地址。
说明
使用模拟器预览小程序，需要小程序已经启动且有预览URL，如果小程序还没有预览地址，可以单击预览小程序，然后选择未启动（需要先启动小程序），插件会启动小程序；也可以打开一个终端手动输入命令 npm start 启动小程序。
小程序启动后会有一个预览URL（一般是http://localhost:端口号或者http://本机ip:端口号），以插件提供的脚手架模板为例，小程序脚手架启动后默认的预览URL是http://本机ip:3000。
输入预览URL后，模拟器会启动Windvane脚手架并加载小程序的预览URL。
打开Chrome浏览器，在地址栏输入chrome://inspect/#devices，可以看到已连接的模拟器。Windvane脚手架启动后在Chrome页面可以看到待调试的Webview，打开待调试的小程序，在Chrome页面可以看到可以调试的WebView。
单击待调试的WebView下侧的inspect按钮，即可进入DevTools调试小程序。

在Mac设备上打开safari开发者功能，选择Safari偏好设置 > 高级，勾选在菜单栏中显示开发菜单。
单击在 iOS 模拟器中预览，插件会启动 iOS 模拟器。如果本地有多个模拟器，插件会先弹出一个选择框，开发者需要指定一个模拟器，然后插件会启动这个模拟器。
模拟器启动以后，在 VS Code 窗口顶部会弹出一个输入框，需要在输入框中输入小程序的预览地址。
在Safari中选择开发 > 模拟器，可以看到待调试的Webview。
单击待调试的Webview页面，即可进入网页检查器调试小程序。