作者：Pingan8787

來(lái)源：SegmentFault 思否社區(qū)

對(duì)前端開(kāi)發(fā)人員來(lái)說(shuō)，Chrome 真是一個(gè)必備的開(kāi)發(fā)工具，大到頁(yè)面展示，小到 BUG 調(diào)試 /HTTP 抓包等，本文我將和大家分享自己做混合應(yīng)用開(kāi)發(fā)過(guò)程中經(jīng)常用到的幾個(gè)調(diào)試技巧。

一、調(diào)試安卓應(yīng)用

在進(jìn)行混合應(yīng)用開(kāi)發(fā)過(guò)程中，經(jīng)常需要在安卓應(yīng)用中調(diào)試 H5 項(xiàng)目的代碼，這里我們就需要了解安卓應(yīng)用如何在 Chrome 上進(jìn)行調(diào)試。
接下來(lái)簡(jiǎn)單介紹一下，希望大家還是能實(shí)際進(jìn)行調(diào)試看看：

1. 準(zhǔn)備工作

需要準(zhǔn)備有一下幾個(gè)事項(xiàng)：

1. 安卓包必須為可調(diào)試包，如果不可以調(diào)試，可以找原生的同事提供；
2. 安卓手機(jī)通過(guò)數(shù)據(jù)線連接電腦，然后開(kāi)啟“開(kāi)發(fā)者模式”，并啟用“USB 調(diào)試”選項(xiàng)。

2. Chrome 啟動(dòng)調(diào)試頁(yè)面

在 Chrome 瀏覽器訪問(wèn)“chrome://inspect/#devices”，然后在 WebView 列表中選擇你要調(diào)試的頁(yè)面，點(diǎn)擊“ Inspect ”選項(xiàng)，跟調(diào)試 PC 網(wǎng)頁(yè)一樣，使用 Chrome 控制臺(tái)進(jìn)行調(diào)試。

然后就可以正常進(jìn)行調(diào)試了，操作和平常 Chrome 上面調(diào)試頁(yè)面是一樣的。

3. 注意

如果訪問(wèn) “chrome://inspect/#devices” 頁(yè)面會(huì)一直提示 404，可以在翻墻情況下，先在 Chrome 訪問(wèn) [https://chrome-devtools-frontend.appspot.com](https://chrome-devtools-frontend.appspot.com)，然后重新訪問(wèn)“chrome://inspect/#devices”即可。

二、篩選特定條件的請(qǐng)求

在 Network 面板中，我們可以在 Filter 輸入框中，通過(guò)各種篩選條件，來(lái)查看滿足條件的請(qǐng)求。

1.使用場(chǎng)景：

如只需要查看失敗或者符合指定 URL 的請(qǐng)求。

2.使用方式：

在 Network 面板在 Filter 輸入框中，輸入各種篩選條件，支持的篩選條件包括：文本、正則表達(dá)式、過(guò)濾器和資源類型。
這里主要介紹“過(guò)濾器”，包括：

這里輸入“-”目的是為了讓大家能看到 Chrome 提供哪些高級(jí)選項(xiàng)，在使用的時(shí)候是不需要輸入“-”。
如果輸入“-.js -.css”則可以過(guò)濾掉“.js”和“.css”類型的文件。
關(guān)于過(guò)濾器更多用法，可以閱讀《Chrome DevTools: How to Filter Network Requests》

三、快速斷點(diǎn)報(bào)錯(cuò)信息

在 Sources 面板中，我們可以開(kāi)啟異常自動(dòng)斷點(diǎn)的開(kāi)關(guān)，當(dāng)我們代碼拋出異常，會(huì)自動(dòng)在拋出異常的地方斷點(diǎn)，能幫助我們快速定位到錯(cuò)誤信息，并提供完整的錯(cuò)誤信息的方法調(diào)用棧。

1.使用場(chǎng)景：

需要調(diào)試拋出異常的情況。

2.使用方式：

在 Sources 面板中，開(kāi)啟異常自動(dòng)斷點(diǎn)的開(kāi)關(guān)。

四、斷點(diǎn)時(shí)修改代碼

在 Sources 面板中，我們可以在需要斷點(diǎn)的行數(shù)右擊，選擇“Add conditional breakpoint”，然后在輸入框中輸入表達(dá)式（如賦值操作等），后面代碼將使用該結(jié)果。

1.使用場(chǎng)景：

需要在調(diào)試時(shí)，方便手動(dòng)修改數(shù)據(jù)來(lái)完成后續(xù)調(diào)試的時(shí)候。

2.使用方式：

在 Sources 面板中，在需要斷點(diǎn)的行數(shù)右擊，選擇“Add conditional breakpoint”。

五、自定義斷點(diǎn)（事件、請(qǐng)求等）

當(dāng)我們需要進(jìn)行自定義斷點(diǎn)的時(shí)候，比如需要攔截 DOM 事件、網(wǎng)絡(luò)請(qǐng)求等，就可以在 Source 面板，通過(guò) XHR/fetch Breakpoints 和 Event Listener Breakpoints 來(lái)啟用對(duì)應(yīng)斷點(diǎn)。

1.使用場(chǎng)景：

需要在調(diào)試時(shí)，需要增加自定義斷點(diǎn)時(shí)（如需要攔截 DOM 事件、網(wǎng)絡(luò)請(qǐng)求等）。

2.使用方式：

在 Sources 面板中，通過(guò) XHR/fetch Breakpoints 和 Event Listener Breakpoints 來(lái)啟用對(duì)應(yīng)斷點(diǎn)。

六、學(xué)習(xí)資料

1. Chrome tips community
2. Chrome 開(kāi)發(fā)者工具中文文檔

---

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開(kāi)更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -