揭祕支付寶小程序調試

本文摘自 rax.js.orgcss

本地 IDE 調試

IDE 模擬器中模擬了大部分的真機 API，而且配有調試工具，建議先在模擬器中完成基礎功能、樣式的調試，而後在真機上驗證和調試，固然，最終運行效果以真機爲準。chrome

調試工具

配合模擬器，咱們提供了定製化的 chrome devtool，在其基礎上提供好比 axml 等擴展。默認展現的有：小程序

AXML，基於小程序元素的 dom、css 調試
Console，運行日誌、錯誤查看
Storage，緩存數據查看、編輯
Sources，源碼查看、斷點調試
Network，網絡資源、請求查看

調試面板

真機預覽小程序時，能夠經過右上角按鈕打開調試面板。緩存

點擊開啓調試後，在頁面上會出現懸浮藍色按鈕調試面板。點擊調試面板按鈕，就能夠看到調試面板了。 markdown

目前調試面板主要提供兩個功能：網絡

Log頁籤：顯示打印日誌（可按日誌級別查看）
Alipay頁籤：可清除緩存

遠程調試

爲了便於調試真機，開發者工具提供了遠程真機調試功能，利用遠程真機調試，你能夠：dom

在 IDE 中斷點調試遠程小程序
在 IDE 中查看遠程界面的 AXML 結構與樣式
在 IDE 中查看手機 Network & Storage 等信息
在 IDE 中查看小程序在手機端的運行日誌

點擊右上角工具欄：調試，肯定推送並生成調試二維碼：函數

掃碼以後，接下來模擬器上會展現鏈接信息，同時在手機上會顯示遠程調試模式已鏈接。接下來你就能夠進行遠程斷點調試了。好比你能夠正常 inspect axml elements：工具

你能夠進行斷點調試，在命中斷點後真機上會有遮罩提示，具體如圖：oop

在遠程調試中須要注意，每次修改代碼後須要斷開遠程調試，而後從新推送後掃碼鏈接進行遠程調試

性能調試

小程序性能調試可在使用小程序開發者工具開發小程序時，無需鏈接數據線，經過掃碼便可在真機上進行小程序性能調試。調試過程當中，工具能夠對採集到的性能數據進行分析，並針對檢測到的性能問題給出相應的優化建議。這個功能使得開發者在小程序開發階段就能夠隨時在本地進行性能調優，進而提高小程序的性能體驗。

環境要求

支付寶客戶端版本：10.1.62 及以上版本（iOS、Android 都可）
小程序開發者工具版本：0.30 及以上版本

調試流程

打開調試面板

點擊 IDE 上方工具欄的 調試器 ，在下方調試面板中，選擇 Performance，進入無線性能調試。

掃碼調試

點擊調試面板左上角第一個 開啓掃碼 按鈕，構建小程序，生成二維碼。使用支付寶客戶端掃碼，便可開啓無線性能調試。

開始分析

掃碼鏈接真機設備後，開始採集性能數據。左側欄顯示 已鏈接 狀態，並呈現如下信息：

設備信息
系統版本
客戶端信息
小程序名稱
小程序 ID
小程序版本號

彈出窗口的顯示內容有：狀態、時間和進度信息。性能數據收集過程當中，可隨時點擊彈窗中藍色分析按鈕或調試面板左上角第二個 開始分析 按鈕，對當前時間段內採集到的數據進行診斷分析。

點擊彈窗中藍色分析按鈕或調試面板左上角第二個 開始分析 按鈕，即跳轉到分析結果面板。此時，性能數據仍在採集中，點擊調試面板左上角第二個 開始分析 按鈕便可再次分析。

再次分析（可選）

首次分析完成後，可點擊調試面板左上角第二個 開始分析 按鈕，進行再次分析，診斷結果會刷新至當前最新，同時在面板分析結果時間軸中顯示一條分割線，用於區分時間間隔。

中止調試

點擊調試面板左上角第三個 中止採集 按鈕，斷開鏈接，中止性能數據採集。若再次點擊，則會清空面板數據。若要從新開啓調試，點擊第一個 開啓掃碼 按鈕，從新生成二維碼，掃碼調試便可。

分析結果

分析採集到的小程序性能數據，獲得分析結果。面板中的分析結果主要分爲診斷建議和 Timeline 兩個部分。

診斷建議

診斷建議包含兩個部分：首頁加載性能、指標診斷結果。

首頁加載性能

首頁加載性能包括首頁啓動耗時、首頁流量消耗、首頁平均內存三項數據。每一項數據均給出了標準值以供參考。若某項性能未能符合標準，該項性能的數據將顯示爲紅色。

指標診斷結果

指標診斷結果顯示爲兩個有着具體數量的分類：建議優化項、經過項。每項診斷結果均給出了診斷標準，也可點擊展開按鈕查看診斷詳情。對於建議優化項，將給出相應的優化建議，開發者可進行鍼對性優化。

Timeline

該數據區域以時間軸的形式展現，監測小程序運行的整個週期，主要提供三部分數據：

MEMORY(MB)、CPU(%)、FPS：以時間軸形式展現內存、CPU、FPS的變化狀況；
Network（網絡請求）：展現小程序全部網絡請求的 URL 以及具體耗時；
MiniApp（函數調用）：主要包含 OpenAPI 函數調用狀況、App 生命週期函數調用狀況、各個頁面的函數調用狀況，以及各函數的具體耗時。

在真機上預覽小程序

使用手機支付寶掃碼登陸開發者工具，並容許關聯支付寶小程序。

點擊開發者工具右上角工具欄上的預覽按鈕。

點擊確認推送，便可在手機上運行和預覽小程序了。