5個Chrome調(diào)試混合應(yīng)用的技巧
對前端開發(fā)人員來說，Chrome 真是一個必備的開發(fā)工具，大到頁面展示，小到 BUG 調(diào)試/HTTP 抓包等，本文我將和大家分享自己做混合應(yīng)用開發(fā)過程中經(jīng)常用到的幾個調(diào)試技巧。
一、調(diào)試安卓應(yīng)用
在進行混合應(yīng)用開發(fā)過程中，經(jīng)常需要在安卓應(yīng)用中調(diào)試 H5 項目的代碼，這里我們就需要了解安卓應(yīng)用如何在 Chrome 上進行調(diào)試。接下來簡單介紹一下，希望大家還是能實際進行調(diào)試看看：
1. 準(zhǔn)備工作
需要準(zhǔn)備有以下幾個事項：
安卓包必須為可調(diào)試包，如果不可以調(diào)試，可以找原生的同事提供； 安卓手機通過數(shù)據(jù)線連接電腦，然后開啟“開發(fā)者模式”，并啟用“USB 調(diào)試”選項。
2. Chrome 啟動調(diào)試頁面
在 Chrome 瀏覽器訪問“chrome://inspect/#devices”，然后在 WebView 列表中選擇你要調(diào)試的頁面，點擊“ Inspect ”選項，跟調(diào)試 PC 網(wǎng)頁一樣，使用 Chrome 控制臺進行調(diào)試。
然后就可以正常進行調(diào)試了，操作和平常 Chrome 上面調(diào)試頁面是一樣的。
3. 注意
如果訪問 “chrome://inspect/#devices” 頁面會一直提示 404，可以在翻墻情況下，先在 Chrome 訪問 https://chrome-devtools-frontend.appspot.com，然后重新訪問“chrome://inspect/#devices”即可。
二、篩選特定條件的請求
在 Network 面板中，我們可以在 Filter 輸入框中，通過各種篩選條件，來查看滿足條件的請求。
使用場景：
如只需要查看失敗或者符合指定 URL 的請求。
使用方式：
在 Network 面板在 Filter 輸入框中，輸入各種篩選條件，支持的篩選條件包括：文本、正則表達式、過濾器和資源類型。這里主要介紹“過濾器”，包括：
這里輸入“-”目的是為了讓大家能看到 Chrome 提供哪些高級選項，在使用的時候是不需要輸入“-”。如果輸入“-.js -.css”則可以過濾掉“.js”和“.css”類型的文件。
關(guān)于過濾器更多用法，可以閱讀《Chrome DevTools: How to Filter Network Requests》(https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks/)
三、快速斷點報錯信息
在 Sources 面板中，我們可以開啟異常自動斷點的開關(guān)，當(dāng)我們代碼拋出異常，會自動在拋出異常的地方斷點，能幫助我們快速定位到錯誤信息，并提供完整的錯誤信息的方法調(diào)用棧。
使用場景：
需要調(diào)試拋出異常的情況。
使用方式：
在 Sources 面板中，開啟異常自動斷點的開關(guān)。
四、斷點時修改代碼
在 Sources 面板中，我們可以在需要斷點的行數(shù)右擊，選擇“Add conditional breakpoint”，然后在輸入框中輸入表達式（如賦值操作等），后面代碼將使用該結(jié)果。
使用場景：
需要在調(diào)試時，方便手動修改數(shù)據(jù)來完成后續(xù)調(diào)試的時候。
使用方式：
在 Sources 面板中，在需要斷點的行數(shù)右擊，選擇“Add conditional breakpoint”。
五、自定義斷點（事件、請求等）
當(dāng)我們需要進行自定義斷點的時候，比如需要攔截 DOM 事件、網(wǎng)絡(luò)請求等，就可以在 Source 面板，通過 XHR/fetch Breakpoints 和 Event Listener Breakpoints 來啟用對應(yīng)斷點。
使用場景：
需要在調(diào)試時，需要增加自定義斷點時（如需要攔截 DOM 事件、網(wǎng)絡(luò)請求等）。
使用方式：
在 Sources 面板中，通過 XHR/fetch Breakpoints 和 Event Listener Breakpoints 來啟用對應(yīng)斷點。
六、學(xué)習(xí)資料
Chrome tips community(https://umaar.com) Chrome 開發(fā)者工具中文文檔(https://www.css88.com/doc/chrome-devtools/)
