預覽與調試 - 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頁面，即可進入網頁檢查器調試小程式。