快應用 調試

我們通過概述，已經成功安裝并且運行快應用，本文主要介紹通過 chrome devtools 進行遠程調試方法

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

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

簡要介紹

開發(fā)調試需要更具打印日志定位問題，包括查詢標簽結構，樣式 UI，network 等

日志輸出準備

1. 修改日志等級

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

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

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

2. 在 js 中輸出日志

當 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 調試界面 調試手機 app 端的頁面

遠程調試準備

遠程調試指的是通過快應用調試器、hap-toolkit 的遠程調試命令 、chrome devtools 調試界面，來調試手機 app 端的頁面

遠程調試依賴 chrome 瀏覽器 ，瀏覽器 devtools 會與手機上調試工具建立 socket 連接，實時獲取修改應用運行數據，進行調試

1. WIFI 調試

如果手機與 PC 在同一局域網，可以使用 WIFI 調試，步驟如下：

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

2. USB 調試

USB 調試模式不需要手機與 PC 在同一局域網，需要在調試過程中手機通過 USB 連接 PC，步驟如下：

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

3. 展示 chrome devtools 調試界面

點擊 開始調試 按鈕，展現 chrome devtools 頁面

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

示例圖：

Element 面板

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

編輯 DOM

1. 查看元素

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

2. 導航 DOM 節(jié)點

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

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

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

設置節(jié)點樣式

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

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

調試 JS 代碼

錯誤信息查看

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

利用 devtools 調試界面 console 輸出

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

命令行

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

adb logcat -s LOGCAT_CONSOLE

注意：

在快應用 1030 及以前版本，請運行

adb logcat -s JsConsole

Network 的HTTP請求

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

調試 Web 組件 1060+

點擊調試器右上角的菜單按鈕進入設置頁面,勾選開啟 Web 組件調試開關

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

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

點擊 inspect 即可進入調試頁面

獲取組件對應的 Android View ID 1060+

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

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