5 個 Chrome 調試混合應用的技巧

對前端開發人員來說，Chrome 真是一個必備的開發工具，大到頁面展示，小到 BUG 調試 / HTTP 抓包等，本文我將和大家分享自己做混合應用開發過程中經常用到的幾個調試技巧。

一、調試安卓應用

在進行混合應用開發過程中，經常需要在安卓應用中調試 H5 項目的代碼，這裏我們就需要了解安卓應用如何在 Chrome 上進行調試。接下來簡單介紹一下，希望大家還是能實際進行調試看看：

1. 準備工作

需要準備有一下幾個事項：

  1. 安卓包必須爲可調試包，如果不可以調試，可以找原生的同事提供；

  2. 安卓手機通過數據線連接電腦，然後開啓 “開發者模式”，並啓用“USB 調試” 選項。

2. Chrome 啓動調試頁面

在 Chrome 瀏覽器訪問 “chrome://inspect/#devices”，然後在 WebView 列表中選擇你要調試的頁面，點擊 “ Inspect ” 選項，跟調試 PC 網頁一樣，使用 Chrome 控制檯進行調試。

然後就可以正常進行調試了，操作和平常 Chrome 上面調試頁面是一樣的。

3. 注意

如果訪問 “chrome://inspect/#devices” 頁面會一直提示 404，可以在翻牆情況下，先在 Chrome 訪問 https://chrome-devtools-frontend.appspot.com，然後重新訪問 “chrome://inspect/#devices” 即可。

二、篩選特定條件的請求

在 Network 面板中，我們可以在 Filter 輸入框中，通過各種篩選條件，來查看滿足條件的請求。

  1. 使用場景：

如只需要查看失敗或者符合指定 URL 的請求。

  1. 使用方式：

在 Network 面板在 Filter 輸入框中，輸入各種篩選條件，支持的篩選條件包括：文本、正則表達式、過濾器和資源類型。這裏主要介紹 “過濾器”，包括：這裏輸入 “-” 目的是爲了讓大家能看到 Chrome 提供哪些高級選項，在使用的時候是不需要輸入 “-”。如果輸入“-.js -.css” 則可以過濾掉 “.js” 和“.css”類型的文件。

關於過濾器更多用法，可以閱讀《Chrome DevTools: How to Filter Network Requests》(https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks/)

三、快速斷點報錯信息

在 Sources 面板中，我們可以開啓異常自動斷點的開關，當我們代碼拋出異常，會自動在拋出異常的地方斷點，能幫助我們快速定位到錯誤信息，並提供完整的錯誤信息的方法調用棧。

  1. 使用場景：

需要調試拋出異常的情況。

  1. 使用方式：

在 Sources 面板中，開啓異常自動斷點的開關。

四、斷點時修改代碼

在 Sources 面板中，我們可以在需要斷點的行數右擊，選擇 “Add conditional breakpoint”，然後在輸入框中輸入表達式（如賦值操作等），後面代碼將使用該結果。

  1. 使用場景：

需要在調試時，方便手動修改數據來完成後續調試的時候。

  1. 使用方式：

在 Sources 面板中，在需要斷點的行數右擊，選擇 “Add conditional breakpoint”。

五、自定義斷點（事件、請求等）

當我們需要進行自定義斷點的時候，比如需要攔截 DOM 事件、網絡請求等，就可以在 Source 面板，通過 XHR/fetch Breakpoints 和 Event Listener Breakpoints 來啓用對應斷點。

  1. 使用場景：

需要在調試時，需要增加自定義斷點時（如需要攔截 DOM 事件、網絡請求等）。

  1. 使用方式：

在 Sources 面板中，通過 XHR/fetch Breakpoints 和 Event Listener Breakpoints 來啓用對應斷點。

六、學習資料

  1. Chrome tips community(https://umaar.com)

  2. Chrome 開發者工具中文文檔 (https://www.css88.com/doc/chrome-devtools/)

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/tRkr14iYj2iLMsKt7XK49Q

猜你喜歡