Chrome 提供的一些調試功能，在排查代碼故障時非常有幫助。事實上，由於谷歌瀏覽器提供的調試工具太多，很多都被隱藏了起來，等待你去探索。
聲明：本文已獲作者Ferenc Almasi翻譯授權。
以下為譯文：
Chrome DevTools（開發者工具）團隊每月（https://developers.google.com/web/updates/capabilities）都會在他們的網站上發布更新，你也可以在他們的官方 Twitter 帳戶（https://twitter.com/chromedevtools）上找到一些很棒的提示。如果你想了解更多關於 Chrome 提供的工具的信息，我強烈推薦查看這兩個信息來源。
在這篇文章中，我收集了 10 個我經常使用但是別人可能不知道的功能。它們幫助我簡化了工作流程，可以在更短的時間內完成更多的工作。
這裡先從在控制臺中保持日誌說起。假設在重新加載頁面之前或導航發生時出現了問題，你會嘗試登錄控制臺，但所有內容都被清除了。解決方法很簡單，但我很久以前就不知道了：
事件監聽器的斷點
通常，當用戶交互發生時會出現問題。捕捉這些事件來檢查在交互中運行的位置和內容非常有幫助。幸運的是，我們可以通過訪問 Sources 選項卡，用 Ctrl + P 打開一個 js 文件，並檢查其中的相關事件：
DOM 操作的斷點
對於 DOM 操作也可以添加斷點。通常可以斷點在某節點接收到屬性更改上，例如添加了某個 class 。在一個大型代碼倉庫中搜索相關代碼將耗費大量時間，其實你可以簡單地為元素添加一個斷點，然後剩下的交給 DevTools 處理。
代碼覆蓋率
有時候我們對代碼進行性能優化，會導致很多代碼沒有用了但是還沒及時清除。在覆蓋工具的幫助下，你可以分析資源並查看哪些行沒有執行。如果你關注的不是所有交互，只執行你所關注的交互操作有助於你獲取準確的覆蓋率。你可以點擊 Ctrl + Shift + P 打開工具面板，然後點擊重新加載圖標開始記錄，所有以紅色顯示的內容都不會被執行。
不必要的重繪也會導致性能問題。假設你的頁面上有一個倒計時，每次更新都會導致整個頁面重新繪製。你可以通過在 Render 選項卡中啟用 "paint flashing" 來解決這些問題，並查看哪些元素觸發了這些問題。同樣，Ctrl + Shift + P 會彈出工具欄。
動畫審查
既然上面討論了渲染，那麼讓我們來看看如何調試 CSS 動畫。用 Ctrl + Shift + P 打開工具菜單，輸入「 animation」 它將為你打開動畫標籤，這將記錄任何發生在網站上的動畫。你可以重播它們，看看它們的寬鬆程度，然後根據時間或持續時間調整：
截屏
我們經常需要與其他人分享截圖來驗證更改。如果你不得不重複多個步驟，這個任務可能會消耗時間：這可以在 DevTools 內部完成。你可以從整個頁面、單個節點(被選中的節點)或視圖中創建圖像：假設你正在調試一個問題，並且你的代碼中有兩個斷點。你正在進行堆棧跟蹤，你會發現堆棧信息中大多數來自核心框架文件，如 React 或 jQuery。為了避免在調試器中包含這些核心文件，你可以對它們進行黑盒處理，這意味著 DevTools 將跳過這些文件，以便你可以專注於自己的代碼。本地覆蓋是我最喜歡的一個，我發現自己使用它越來越頻繁。它是一個強大的工具，使你能夠加載生產文件的本地副本，並使用它們來替代捆綁的副本。當一個問題只發生在特定的環境中而不能在本地復現時，這一點尤其有用。你可以在「Source」 選項卡下啟用 "Overrides"（重寫）。如果你沒有看到 Overrides 連結，點擊 Page 右側的鋸齒圖標。你可以將漂亮的列印文件複製到你本地文件並對其進行擴展。重寫將通過頁面重新加載保持。我發現自己一直在使用 Lighthouse 面板，這是為了審計你的網站在各種指標：性能，PWA，可訪問性，或搜尋引擎優化。你還可以選擇審計不同的設備以及模擬網絡連接，它為你提供了哪些可以改進以及如何改進的參考。你可以在「Audits」 選項卡下進入「燈塔」，如果你沒有看到標籤，只需點擊鋸齒符號來顯示隱藏的標籤。生成報告後，可以將結果保存為 JSON 文件，稍後導入以進行比較。
上面是必須知道的 10 個 Chrome 開發工具特性，它們幫助我簡化了工作流程，並且在更短的時間內完成了更多的工作。你每天使用的 Chrome 開發者工具的功能是什麼? 請在評論中告訴我們。原文：https://medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5作者簡介：Ferenc Almasi，匈牙利前端開發者，熱衷於開發和設計新的交互式應用程式。他還喜歡嘗試新技術，創造簡單而有吸引力的東西。譯者：明明如月，知名網際網路公司 Java 高級開發工程師，CSDN 博客專家。
☞抗住百萬人直播、被聯合國推薦，起底飛書技術演進之路！
☞還不知道 AWS 是什麼？這 11 個重點帶你認識 AWS ！
☞智能合約編寫之 Solidity 的設計模式