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

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

通過本節(jié)，你將學(xué)會:

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

簡要介紹

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

日志輸出準(zhǔn)備

1. 修改日志等級

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

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

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

2. 在 js 中輸出日志

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

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

3. 查看日志

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

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

遠程調(diào)試指的是通過快應(yīng)用調(diào)試器、hap-toolkit 的遠程調(diào)試命令 、chrome devtools 調(diào)試界面，來調(diào)試手機 app 端的頁面

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

1. WIFI 調(diào)試

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

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

2. USB 調(diào)試

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

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

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

點擊 開始調(diào)試 按鈕，展現(xiàn) chrome devtools 頁面

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

示例圖：

Element 面板

類似傳統(tǒng)前端調(diào)試，在 element 面板 中可以通過 DOM 樹的形式查看所有頁面元素，同時也能對這些元素進行所見即所得的編輯。

編輯 DOM

1. 查看元素

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

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

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

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

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

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

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

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

調(diào)試 JS 代碼

錯誤信息查看

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

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

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

命令行

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

adb logcat -s LOGCAT_CONSOLE

注意：

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

adb logcat -s JsConsole

Network 的HTTP請求

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

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

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

手機開啟開發(fā)者選項中的 USB 調(diào)試并連接手機 USB, 然后進入需要調(diào)試的頁面

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

點擊 inspect 即可進入調(diào)試頁面

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

在進行自動化測試時,需要知道原生 Android 的 View ID, 可通過組件的 getViewId 方法獲取原生 Android 對應(yīng)的 View ID

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