我們通過(guò)概述，已經(jīng)成功安裝并且運(yùn)行快應(yīng)用，本文主要介紹通過(guò) chrome devtools 進(jìn)行遠(yuǎn)程調(diào)試方法

通過(guò)本節(jié)，你將學(xué)會(huì):

• 簡(jiǎn)要介紹
• Element 面板
• 設(shè)置節(jié)點(diǎn)樣式
• 調(diào)試 JS 代碼
• Network 的 HTTP 請(qǐng)求
• 調(diào)試 Web 組件
• 獲取組件對(duì)應(yīng)的 Android View ID

簡(jiǎn)要介紹

開(kāi)發(fā)調(diào)試需要更具打印日志定位問(wèn)題，包括查詢標(biāo)簽結(jié)構(gòu)，樣式 UI，network 等

日志輸出準(zhǔn)備

1. 修改日志等級(jí)

打開(kāi)工程根目錄下的 src 文件夾的 manifest.json，找到 config 配置，將 logLevel 修改為最低級(jí)別 debug，即：允許所有級(jí)別的日志輸出

修改后 <ProjectName>/src/manifest.json 中 config 配置代碼如下：

{
  "config": {
    "logLevel": "debug"
  }
}

2. 在 js 中輸出日志

當(dāng) js 代碼未按需求正確運(yùn)行，輸出日志能幫助開(kāi)發(fā)者快速定位問(wèn)題；與傳統(tǒng)前端開(kāi)發(fā)一致，使用 console 對(duì)象輸出日志，如下：

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')

3. 查看日志

開(kāi)發(fā)者可以使用 Android Studio 的 Android Monitor 輸出來(lái)查看日志，還有下文主要介紹的通過(guò) chrome devtools 調(diào)試界面 調(diào)試手機(jī) app 端的頁(yè)面

遠(yuǎn)程調(diào)試準(zhǔn)備

遠(yuǎn)程調(diào)試指的是通過(guò)快應(yīng)用調(diào)試器、hap-toolkit 的遠(yuǎn)程調(diào)試命令 、chrome devtools 調(diào)試界面，來(lái)調(diào)試手機(jī) app 端的頁(yè)面

遠(yuǎn)程調(diào)試依賴 chrome 瀏覽器 ，瀏覽器 devtools 會(huì)與手機(jī)上調(diào)試工具建立 socket 連接，實(shí)時(shí)獲取修改應(yīng)用運(yùn)行數(shù)據(jù)，進(jìn)行調(diào)試

1. WIFI 調(diào)試

如果手機(jī)與 PC 在同一局域網(wǎng)，可以使用 WIFI 調(diào)試，步驟如下：

• 在項(xiàng)目根目錄下執(zhí)行如下命令，啟動(dòng) HTTP 調(diào)試服務(wù)器：npm run server
• 手機(jī)快應(yīng)用調(diào)試器中關(guān)閉 開(kāi)啟USB調(diào)試
• 手機(jī)快應(yīng)用調(diào)試器點(diǎn)擊 掃碼安裝 按鈕，掃碼安裝待調(diào)試的 rpk 文件
• 手機(jī)快應(yīng)用調(diào)試器中點(diǎn)擊 開(kāi)始調(diào)試 按鈕，開(kāi)始調(diào)試示例圖：

2. USB 調(diào)試

USB 調(diào)試模式不需要手機(jī)與 PC 在同一局域網(wǎng)，需要在調(diào)試過(guò)程中手機(jī)通過(guò) USB 連接 PC，步驟如下：

• 在項(xiàng)目根目錄下執(zhí)行如下命令，啟動(dòng) HTTP 調(diào)試服務(wù)器：npm run server
• 手機(jī)開(kāi)啟設(shè)置 --> 開(kāi)發(fā)者選項(xiàng) --> USB調(diào)試
• 手機(jī)快應(yīng)用調(diào)試器選中開(kāi)啟 USB調(diào)試，手機(jī) USB 連接到 PC
• 手機(jī)快應(yīng)用調(diào)試器中點(diǎn)擊 在線更新 按鈕，安裝待調(diào)試的 rpk 文件
• 手機(jī)快應(yīng)用調(diào)試器中點(diǎn)擊 開(kāi)始調(diào)試 按鈕，開(kāi)始調(diào)試示例圖：

3. 展示 chrome devtools 調(diào)試界面

點(diǎn)擊 開(kāi)始調(diào)試 按鈕，展現(xiàn) chrome devtools 頁(yè)面

注：需要首先安裝 chrome 瀏覽器

示例圖：

Element 面板

類(lèi)似傳統(tǒng)前端調(diào)試，在 element 面板 中可以通過(guò) DOM 樹(shù)的形式查看所有頁(yè)面元素，同時(shí)也能對(duì)這些元素進(jìn)行所見(jiàn)即所得的編輯。

編輯 DOM

1. 查看元素

• 點(diǎn)擊審查元素按鈕，或者使用快捷鍵 Ctrl + Shift + C (windows) 或者 Cmd + Shift + C (Mac) ，然后去頁(yè)面上選擇 DOM
• 在 Element 面板上，用鼠標(biāo)手動(dòng)選擇某個(gè) DOM 節(jié)點(diǎn)

2. 導(dǎo)航 DOM 節(jié)點(diǎn)

• 在 DOM 上單擊，高亮節(jié)點(diǎn)，在節(jié)點(diǎn)任意處雙擊或點(diǎn)擊左邊箭頭，可展開(kāi)一個(gè)節(jié)點(diǎn)
• 使用鍵盤(pán)，向上箭頭選擇此節(jié)點(diǎn)之前一個(gè)節(jié)點(diǎn)，在 Elements 面板內(nèi)可見(jiàn)的節(jié)點(diǎn)，有可能是父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)、或者兄弟節(jié)點(diǎn)的子節(jié)點(diǎn)等），向下類(lèi)似，選擇之后一個(gè)節(jié)點(diǎn)
• 使用鍵盤(pán)，向左箭頭選擇這個(gè)節(jié)點(diǎn)父元素，依此論推，向右箭頭可以展開(kāi)一個(gè)節(jié)點(diǎn)，再次按向右箭頭會(huì)選擇到這個(gè)展開(kāi)節(jié)點(diǎn)的第一個(gè)子元素，依此論推
• 在 Element 面板最下方為面包屑路徑，當(dāng)前選中節(jié)點(diǎn)以藍(lán)色高亮表示

3. 編輯 DOM 節(jié)點(diǎn)及屬性

• 在 DOM 上單擊或雙擊可編輯現(xiàn)有屬性
• 在 DOM 上右擊，顯示彈框，選擇 Add attribute 或者 Edit attribute 添加或編輯屬性
• 在 DOM 上右擊，顯示彈框，選擇 Edit as HTML 可編輯 DOM 及屬性

設(shè)置節(jié)點(diǎn)樣式

當(dāng)選中一個(gè) DOM 元素，Styles 窗口顯示所有這個(gè)元素上的樣式，優(yōu)先級(jí)從高到低

• 最上面： element.style，顯示直接寫(xiě)在標(biāo)簽內(nèi)的行內(nèi)樣式
• 其次：直接匹配這個(gè)元素的 css
• 最后：為元素的盒子模型

調(diào)試 JS 代碼

錯(cuò)誤信息查看

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

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

按照 簡(jiǎn)要介紹 中日志輸出準(zhǔn)備，開(kāi)發(fā)者可以在工程項(xiàng)目中利用 console 的輸出函數(shù)打印的調(diào)試信息，以及屬于 native 模塊打印的信息，都可以通過(guò) devtools 調(diào)試界面的 console 面板進(jìn)行查看

命令行

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

adb logcat -s LOGCAT_CONSOLE

注意：

在快應(yīng)用 1030 及以前版本，請(qǐng)運(yùn)行

adb logcat -s JsConsole

Network 的HTTP請(qǐng)求

同傳統(tǒng) H5 頁(yè)面開(kāi)發(fā)一樣，Network 面板會(huì)展示 Devtools 記錄的所有網(wǎng)絡(luò)請(qǐng)求

調(diào)試 Web 組件 1060+

點(diǎn)擊調(diào)試器右上角的菜單按鈕進(jìn)入設(shè)置頁(yè)面,勾選開(kāi)啟 Web 組件調(diào)試開(kāi)關(guān)

手機(jī)開(kāi)啟開(kāi)發(fā)者選項(xiàng)中的 USB 調(diào)試并連接手機(jī) USB, 然后進(jìn)入需要調(diào)試的頁(yè)面

在 chrome 瀏覽器地址欄中輸入: chrome://inspect/#devices , 打開(kāi) DevTools 調(diào)試面板

點(diǎn)擊 inspect 即可進(jìn)入調(diào)試頁(yè)面

獲取組件對(duì)應(yīng)的 Android View ID 1060+

在進(jìn)行自動(dòng)化測(cè)試時(shí),需要知道原生 Android 的 View ID, 可通過(guò)組件的 getViewId 方法獲取原生 Android 對(duì)應(yīng)的 View ID

this.$element(‘element_id’).getViewId()