快應(yīng)用 調(diào)試工具

調(diào)試工具目前支持的功能有：

• 遠(yuǎn)程調(diào)試
• 手機端預(yù)覽
• 調(diào)試日志查看

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

如果開發(fā)者熟悉chrome瀏覽器中的devtools工具以調(diào)試頁面的話，那么對框架的調(diào)試方式也會很快上手，兩者的調(diào)試界面相似。

我們提供的遠(yuǎn)程調(diào)試方案，包括3個部分：快應(yīng)用調(diào)試器、hap-toolkit的遠(yuǎn)程調(diào)試命令、chrome devtools調(diào)試界面。開發(fā)者通過對這3個組件的配合使用，實現(xiàn)對手機app端代碼的進(jìn)行遠(yuǎn)程調(diào)試

調(diào)試頁面

框架的devtools調(diào)試頁面提供基礎(chǔ)的調(diào)試功能。目前，該調(diào)試界面包含4個tab頁簽：

• Element: 提供顯示用戶VDOM頁面結(jié)構(gòu)和樣式;
• Console: 提供基本的console輸出以及和js引擎的cli交互;
• Source: 提供用戶的源碼調(diào)試;
• Network: 提供用戶app請求網(wǎng)絡(luò)資源展示;

如下圖所示：

使用步驟如下

1.啟動調(diào)試服務(wù)器

在工程目錄下執(zhí)行:

npm run server

也可以指定端口號

npm run server -- --port XXX

該命令將啟動一個HTTP Server，提供devtools頁面的請求，PC機與手機調(diào)試器交互的功能。

啟動成功后，終端會輸出一個二維碼（PC機的服務(wù)器地址），或者開發(fā)者也可以通過瀏覽器訪問服務(wù)器主頁地址查看該二維碼，如：http://localhost:12306；

2.掃描二維碼

手機上啟動快應(yīng)用調(diào)試器，點擊掃碼安裝：掃描上一步輸出的二維碼；調(diào)試器將會記錄服務(wù)器的地址信息，請求下載并安裝rpk文件。

有關(guān)快應(yīng)用調(diào)試器的安裝和使用，請參考快速入門

如下圖所示：

3.開始調(diào)試

在調(diào)試器中，點擊開始調(diào)試按鈕，將會通知服務(wù)器在命令行終端上輸出訪問devtools調(diào)試頁面的url，同時服務(wù)器主頁上會顯示devtools調(diào)試界面的url。

如果開發(fā)者的PC環(huán)境安裝了Chrome瀏覽器的話，服務(wù)器會嘗試自動打開devtools調(diào)試頁面

如下圖所示:

手機端預(yù)覽

開發(fā)者需要首先啟動HTTP Server，然后，可以通過三種方式在手機端對開發(fā)項目的效果進(jìn)行預(yù)覽

1 手動編譯 + 手動刷新

運行如下命令，完成編譯，然后在快應(yīng)用調(diào)試器中點擊在線更新，即可查看當(dāng)前代碼運行效果

npm run build

2 手動編譯 + 自動刷新

運行如下命令，一步完成編譯和手機端自動刷新

npm run build && npm run notify

3 自動編譯 + 自動刷新

運行如下命令，啟動文件監(jiān)視器，每次修改工程文件時，會自動編譯并在手機端刷新

npm run watch

調(diào)試日志查看

錯誤信息查看

當(dāng)代碼運行時發(fā)生異常，界面會彈出一個對話框，點擊查看錯誤， 可以顯示出錯誤發(fā)生的堆棧，供開發(fā)者分析

利用devtools調(diào)試界面console輸出

開發(fā)者在工程項目中利用console的輸出函數(shù)打印的調(diào)試信息，以及屬于native模塊打印的信息，都可以通過devtools調(diào)試界面的console面板進(jìn)行查看， 請參考開發(fā)與調(diào)試中的在js中輸出日志部分

有關(guān)如何修改工程的日志等級，請參考 開發(fā)與調(diào)試 中的修改日志等級部分

命令行

需要先安裝adb工具，可以參考官方網(wǎng)站說明進(jìn)行安裝，可將目錄加到系統(tǒng)PATH中，方便后續(xù)使用

在PC端任意目錄下，運行如下命令，查看開發(fā)者打印日志以及其他錯誤日志

adb logcat -s JsConsole