chrome調試秘籍，讓你的開發速度飛起來

前言

熟練使用調試工具，勢必能大幅提高我們的開發效率，達到事半功倍的效果。廢話不多說，直接進入主題。

Filter過濾

過濾器最簡單的用法當然是直接輸入過濾的字元，但這遠遠不夠🤗。除了直接輸入，我們還希望能排除不需要看到的請求、能多條件過濾、能根據指定的列過濾。輸入的字元預設根據​

​name屬性​

​搜尋。具體方法如下：

1. 排除過濾（反向搜尋）

在要搜尋的字元前加​

​-value​

​，表示反向搜尋，如下圖，過濾出name中不含png的請求： 

2. 多條件搜尋

每個搜尋間用​

​空格斜杆空格​

​​隔開,如圖​

​排除gif​

​​并過濾出有​

​@​

​字元的請求：

3. 使用正則比對

直接輸入正規表達式，比對想要的結果。

結合反向搜尋（正規表達式前加​​

​-​

​​，如：​

​-/.../​

​​）可以排除滿足正規表達式的請求。

此方式搜尋，功能非常強大，能滿足大部分搜尋場景 

4. 指定列搜尋 或 特性搜尋

搜尋出大于15KB的資源，如圖： 

其它的一些屬性或特性就不一一示例了，大家可以去自行嘗試： 

5. Console等其它過濾框同樣适用以上的搜尋方式

debugger斷點

1. 條件斷點

滿足某條件時，斷點才會生效

使用：在行号處點選右鍵再選擇​​

​條件斷點​

​，再重新整理頁面執行并觸發條件時斷點。

2. 事件斷點

在處理事件相關的bug時非常有用，可以在頁面觸發指定事件時斷點，如圖： 

3. Dom節點斷點

當節點發生變化時（新增、編輯、删除）斷點，并且會定位到修改DOM的那一行 

 說明：

1.​​

​subtree modifications​

​​ 目前DOM子節點有任何變化時觸發斷點

2. ​​

​attribute modifications​

​ 目前DOM本身屬性有任何變化時觸發斷點

3. ​​

​node removeal​

​ 目前DOM節點被移除時觸發斷點

4. 異常斷點

在開發過程中一定會用到到斷點，能幫助我們自動定位到異常問題，及時修複。 

5. 其它斷點

調試小技巧

1. ​

   ​$_​

   ​​表示擷取控制台的上一次執行結果（引用上一次的結果）

   在了解這個以前都是複制粘貼上一次的執行結果，有了這個之後還是能提高些調試效率。

   ​​

   ​$(dom)​

   ​​擷取第一個dom，相當于​

   ​document.querySelector​

   ​​

   ​$$(dom)​

   ​擷取所有dom(數組形式)，相當于​

   ​document.querySelectorAll​

   ​
2. 使用​

   ​$i​

   ​​直接在控制台安裝npm包

   step1: 安裝Console Importer插件 step2: 在控制台使用指令​​

   ​$i('name')​

   ​​安裝npm包，如$i('dayjs')

   在以前都要依賴項目環境來使用，有了這個就可以完全脫離項目使用npm包。

3. 重新發起請求的方式

   在和背景聯調的時候，背景經常會需要前端在點一下發送請求來debugger問題。其實大可不必，背景就能自己重發請求。

• 方式一：右鍵選擇Replay XHR（重放XHR請求）
• 方式二：右鍵XHR請求， 選擇​

  ​Copy as fetch​

  ​(可以修改參數後再執行)，然後直接在控制台執行即可

1. 一鍵展開所有DOM 按住opt鍵 + click（需要展開的最外層元素）

最後