支付寶小程序 IDE 調(diào)試

概述

我們提供了三種調(diào)試方式模擬器 + 調(diào)試工具、手機(jī)端調(diào)試面板、遠(yuǎn)程調(diào)試，供開發(fā)者進(jìn)行調(diào)試操作，可根據(jù)需要自行選擇調(diào)試方式。

模擬器 + 調(diào)試工具

模擬器中模擬了大部分的真機(jī) API，并且配有調(diào)試工具，建議先在模擬器中完成基礎(chǔ)功能、樣式的調(diào)試，然后在真機(jī)上驗(yàn)證和調(diào)試，最終運(yùn)行效果以真機(jī)為準(zhǔn)。

說明：本地地址調(diào)試需要在 IDE 上調(diào)試，請(qǐng)勾選 忽略 http 驗(yàn)證。

模擬器

模擬器 提供了如下功能：

• 設(shè)備模擬（尺寸、精度等）
• 編譯日志、編譯錯(cuò)誤提示、刷新
• 支付寶 JsAPI 模擬，以及位置、藍(lán)牙、啟動(dòng)參數(shù)等模擬接口自定義配置

調(diào)試工具

配合模擬器，我們提供了定制化的 chrome devtool，在其基礎(chǔ)上提供比如 axml 等擴(kuò)展。默認(rèn)展示的有：

• AXML：基于小程序元素的 dom、css 調(diào)試
• Console：運(yùn)行日志、錯(cuò)誤查看
• Storage：緩存數(shù)據(jù)查看、編輯
• Sources：源碼查看、斷點(diǎn)調(diào)試
• Network：網(wǎng)絡(luò)資源、請(qǐng)求查看

調(diào)試面板

1. 真機(jī)預(yù)覽小程序時(shí)，可以通過右上角按鈕打開 調(diào)試面板。

1. 點(diǎn)擊 打開調(diào)試 后，在頁面上會(huì)出現(xiàn)懸浮藍(lán)色按鈕 調(diào)試面板。

1. 點(diǎn)擊 調(diào)試面板 按鈕，就可以看到調(diào)試面板了。

目前 調(diào)試面板 主要提供以下功能：

• Log 頁簽：顯示打印日志（可按日志級(jí)別查看）
• Storage 查看小程序緩存
• Network 查看接口請(qǐng)求
• AXML 查看頁面結(jié)構(gòu)
• Data 頁面 data 數(shù)據(jù)

遠(yuǎn)程調(diào)試

在遠(yuǎn)程調(diào)試模式中，IDE 和手機(jī)端建立起一個(gè)連接，在 IDE 端可以進(jìn)行斷點(diǎn)、運(yùn)行時(shí)信息檢查、Network/Storage 信息查看和遠(yuǎn)程日志查看等。詳情請(qǐng)參見 真機(jī)調(diào)試。