Chrome 提供的一些調試功能，在排查代碼故障時非常有幫助。事實上，由於谷歌瀏覽器提供的調試工具太多，很多都被隱藏了起來，等待你去探索。
Chrome DevTools（開發者工具）團隊每月都會在他們的網站上發佈更新，你也可以在他們的官方 Twitter 賬戶上找到一些很棒的提示。如果你想了解更多關於 Chrome 提供的工具的信息，我強烈推薦查看這兩個信息來源。
在這篇文章中，我收集了 10 個我經常使用但是別人可能不知道的功能。它們幫助我簡化了工作流程，可以在更短的時間內完成更多的工作。
1
日誌保持
這裡先從在控制檯中保持日誌說起。假設在重新加載頁面之前或導航發生時出現了問題，你會嘗試登錄控制檯，但所有內容都被清除了。解決方法很簡單，但我很久以前就不知道了：
在控制檯中保持日誌
2
事件監聽器的斷點
通常，當用戶交互發生時會出現問題。捕捉這些事件來檢查在交互中運行的位置和內容非常有幫助。幸運的是，我們可以通過訪問 Sources 選項卡，用 Ctrl + P 打開一個 js 文件，並檢查其中的相關事件：
為事件監聽器添加斷點
3
DOM 操作的斷點
對於 DOM 操作也可以添加斷點。通常可以斷點在某節點接收到屬性更改上，例如添加了某個 class 。在一個大型代碼倉庫中搜索相關代碼將耗費大量時間，其實你可以簡單地為元素添加一個斷點，然後剩下的交給 DevTools 處理。
為 DOM 節點操作添加斷點
4
代碼覆蓋率
有時候我們對代碼進行性能優化，會導致很多代碼沒有用了但是還沒及時清除。在覆蓋工具的幫助下，你可以分析資源並查看哪些行沒有執行。如果你關注的不是所有交互，只執行你所關注的交互操作有助於你獲取準確的覆蓋率。你可以點擊 Ctrl + Shift + P 打開工具面板，然後點擊重新加載圖標開始記錄，所有以紅色顯示的內容都不會被執行。
使用 DevTools 查看代碼覆蓋率
5
展示重新繪畫
不必要的重繪也會導致性能問題。假設你的頁面上有一個倒計時，每次更新都會導致整個頁面重新繪製。你可以通過在 Render 選項卡中啟用 "paint flashing" 來解決這些問題，並查看哪些元素觸發了這些問題。
同樣，Ctrl + Shift + P 會彈出工具欄。
在 Rendering 選項卡上啟用重新繪製
6
動畫審查
既然上面討論了渲染，那麼讓我們來看看如何調試 CSS 動畫。用 Ctrl + Shift + P 打開工具菜單，輸入“ animation” 它將為你打開動畫標籤，這將記錄任何發生在網站上的動畫。你可以重播它們，看看它們的寬鬆程度，然後根據時間或持續時間調整：
在 DevTools 中調試動畫
7
截屏
我們經常需要與其他人分享截圖來驗證更改。如果你不得不重複多個步驟，這個任務可能會消耗時間：
- 打開第三方應用程序
- 選定裁剪的部分
- 保存圖片併發送
這可以在 DevTools 內部完成。你可以從整個頁面、單個節點(被選中的節點)或視圖中創建圖像：
在 DevTools 中創建截圖
8
黑盒
假設你正在調試一個問題，並且你的代碼中有兩個斷點。你正在進行堆棧跟蹤，你會發現堆棧信息中大多數來自核心框架文件，如 React 或 jQuery。為了避免在調試器中包含這些核心文件，你可以對它們進行黑盒處理，這意味著 DevTools 將跳過這些文件，以便你可以專注於自己的代碼。
Devtools 中的腳本黑盒
9
本地覆蓋
本地覆蓋是我最喜歡的一個，我發現自己使用它越來越頻繁。它是一個強大的工具，使你能夠加載生產文件的本地副本，並使用它們來替代捆綁的副本。當一個問題只發生在特定的環境中而不能在本地復現時，這一點尤其有用。
你可以在“Source” 選項卡下啟用 "Overrides"（重寫）。如果你沒有看到 Overrides 鏈接，點擊 Page 右側的鋸齒圖標。你可以將漂亮的打印文件複製到你本地文件並對其進行擴展。重寫將通過頁面重新加載保持。
在 DevTools 中覆蓋文件
10
Lighthouse
我發現自己一直在使用 Lighthouse 面板，這是為了審計你的網站在各種指標：性能，PWA，可訪問性，或搜索引擎優化。你還可以選擇審計不同的設備以及模擬網絡連接，它為你提供了哪些可以改進以及如何改進的參考。你可以在“Audits” 選項卡下進入“燈塔”，如果你沒有看到標籤，只需點擊鋸齒符號來顯示隱藏的標籤。
生成報告後，可以將結果保存為 JSON 文件，稍後導入以進行比較。
上面是必須知道的 10 個 Chrome 開發工具特性，它們幫助我簡化了工作流程，並且在更短的時間內完成了更多的工作。
你每天使用的 Chrome 開發者工具的功能是什麼? 請在評論中告訴我們。
閱讀更多 大明人 的文章
