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

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

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

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

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

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

調(diào)試頁(yè)面

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

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

如下圖所示：

使用步驟如下

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

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

npm run server

也可以指定端口號(hào)

npm run server -- --port XXX

該命令將啟動(dòng)一個(gè)HTTP Server，提供devtools頁(yè)面的請(qǐng)求，PC機(jī)與手機(jī)調(diào)試器交互的功能。

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

2.掃描二維碼

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

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

如下圖所示：

3.開始調(diào)試

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

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

如下圖所示:

手機(jī)端預(yù)覽

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

1 手動(dòng)編譯 + 手動(dòng)刷新

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

npm run build

2 手動(dòng)編譯 + 自動(dòng)刷新

運(yùn)行如下命令，一步完成編譯和手機(jī)端自動(dòng)刷新

npm run build && npm run notify

3 自動(dòng)編譯 + 自動(dòng)刷新

運(yùn)行如下命令，啟動(dòng)文件監(jiān)視器，每次修改工程文件時(shí)，會(huì)自動(dòng)編譯并在手機(jī)端刷新

npm run watch

調(diào)試日志查看

錯(cuò)誤信息查看

當(dāng)代碼運(yùn)行時(shí)發(fā)生異常，界面會(huì)彈出一個(gè)對(duì)話框，點(diǎn)擊查看錯(cuò)誤， 可以顯示出錯(cuò)誤發(fā)生的堆棧，供開發(fā)者分析

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

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

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

命令行

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

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

adb logcat -s JsConsole