上一篇跟大家詳細的講了下開發支付寶小程序前所需要做準備事項，安裝了支付寶小程序的開發工具。那麼今天就來詳細聊一下在小程序開發工具中，我們需要如何調試小程序。
支付寶小程序的調試分為三種，分別是「模擬器調試+調試器」、「真機調試」以及「預覽調試」。
前期配置
在開始調試之前，我們需要注意下先關閉開發工具對我們代碼中的一些地址合法性的校驗，方便我們進行調試。
點擊界面右上角【詳情】：
勾選如下兩個校驗：
未勾選的情況下，也可以直接配置 HTTP 和 web-view 的域名。
調試模式
1. 模擬器+調試器調試
調試位置： 小程序開發工具上模擬器和調試器區域，如下圖：
如何調試： 保存代碼後實時展示。也可以設置編輯器自動保存，可參考👉 [IDE 編輯器設置編輯文件自動保存]
調試範圍： 可以調樣式以及一些基礎的功能
模擬器
模擬器上提供了一些功能，我們來逐一看下。
首先就是設備模擬，模擬器上提供了一些常用的設備機型，可以用於不同設備的調試；也可以自行新增設備進行調試。
ps：正常情況下模擬器上的機型測試沒有問題的話，實際移動端使用也不會有問題。
其次就是功能面板，可以模擬移動端的掃碼、定位、授權等能力。
接下來就是模擬器尾部的功能，可以看到當前頁面的頁面路徑、啓動的頁面參數並且可以選擇基礎庫的版本
調試器
調試器上默認展示的功能如下：
- Elements： 查看頁面節點
- Console： 運行日誌、錯誤查看
- Sources： 源碼查看、斷點調試
- Network： 網絡資源、請求查看
- Data： 查看當前頁面的定義數據
- Storage： 緩存數據查看、編輯
- Applog： 記錄當前的 js 頁面方法的執行順序及耗時
- Mock： 生成隨機的數據，需要配合 Anymock 插件使用
在此列舉一些常見問題對應解法，供大家參考：
- [IDE 模擬器一直編譯中日誌提示端口占用]
- [模擬器打開項目白屏，真機正常]
2. 真機調試
調試位置： 移動端 + 小程序開發工具上的真機調試面板，如下圖：
如何調試： 點擊真機調試，生成調試碼，用支付寶直接掃碼，可以在手機上直接看到小程序調試頁面，並且 PC 端會直接跳出真機調試的頁面。
調試範圍： 可調試模擬器調試上的所有功能，並且與用户遇到的實際場景一致。
真機調試種選中對應節點的話，移動端也會顯示該節點的具體屬性：
支持斷點調試： 在 Sources 中找到對應 js 頁面對應代碼行前，左鍵斷點；命中斷點後，移動端會有對應的遮罩提示。
每次修改代碼後需要重新推送到移動端進行測試，建議勾選【小程序自動推送給支付寶】，並且保持移動端開啓支付寶頁面。這樣每次重新時，都會自動推送至移動端。
在此列舉一些常見問題對應解法，供大家參考：
- [setData(...) can only update a mounted component]
- [小程序真機調試為何不顯示network請求]
- [為何預覽模式可以加載頁面真機調試無法加載]
3. 預覽調試
調試位置： 移動端，可直接在移動端的調試面板上進行調試
如何調試： 點擊預覽，生成調試碼，用支付寶直接掃碼
如果調試頁面沒有調試面板的藍條，可以點擊右上角，進入小程序詳情去打開調試面板。
如果還是找不到調試面板的話，建議確認下是否是預覽調試～
調試面板主要提供了以下功能，不支持斷點調試：
- Log 頁籤：顯示打印日誌（可按日誌級別查看）
- Storage 查看小程序緩存
- Network 查看接口請求
- Data 頁面 data 數據
在小程序還未有線上版本時，調試由其他小程序跳轉到該小程序功能前需要先進行預覽模式調試，否則會報錯。可參考 👉[調試跳轉未上線小程序版本]
在此列舉一些常見問題對應解法，供大家參考：
- [IDE 真機預覽調試面板中的command可以輸入哪些命令進行哪些操作]
- [掃真機預覽碼提示系統錯誤正在排查]
編譯模式
如果在小程序還未上線前，需要測試一個非首頁頁面，並且需要攜帶參數進入，此時就需要用到編譯模式這個功能了，如下圖：
選擇【添加編譯模式】，我們可以定義我們需要進入的頁面以及進入頁面所需要攜帶的參數信息：
並且可以模擬是通過什麼場景進入該頁面的：
添加完成之後，就可以勾選新創建的模式進行調試了。
可參考：
- [小程序沒上線如何測試獲取二維碼參數]
- [開發工具啓動參數配置]
以上就是關於小程序調試的所有內容啦，希望可以幫助到你~✿✿ヽ(°▽°)ノ✿
下一期我們會講一下小程序的基礎能力（框架、組件、API）~
