Tips
原文作者：Ben Edelstein
原文地址：Mastering Chrome Developer Tools: Next Level Front-End Development Techniques
你可能已經熟悉Chrome Developer Tools的基本功能：DOM檢查器，樣式面板和JavaScript控制台。 但是有一些不太知名的功能可以大大提高調試或應用程序創建工作流程。
1 黑色主題
Chrome內置了一個黑色主題。 可以通過單擊開發工具窗格右上方的三點圖標，單擊“設置”，然后切換主題來啟用它。
在出現的選項面板里，選擇“Dark”。如下圖：
有時候會發現會讓我的眼睛看起來更加容易，顯然，它看起來更酷！
2 選擇模式
Chrome Developer Tools（DevTools）提供了多種選擇元素的方法 —— 其中最方便的是選擇模式。
通過按下開發工具面板左上角的鼠標圖標（或使用cmd + shift + c快捷鍵）激活此工具，可以通過點擊頁面上的元素來選擇它們。
一旦激活，可以在頁面上移動鼠標並預覽選擇，然后單擊以選擇要檢查的元素。
該工具非常適合快速選擇頁面上的元素，可以使用cmd + shift + c直接打開DevTools並進入選擇模式。
3 保存為全局變量
檢查記錄到控制台的復雜對象有時會很棘手，如果它們有許多key，或者包含難以手動解析的值。 幸運的是，Chrome可以使用JavaScript輕松檢查這些對象。
要這樣做，右鍵單擊控制台中的對象，然后選擇“存儲為全局變量”。 這將對象作為全局變量存儲在名為temp1的控制台中，然后可以使用JavaScript進行操作。
4 Animation 工具
最近，Chrome團隊為調試和創建動畫添加了一些新功能。
單擊控制台左上角的下拉列表顯示一個“Animations” Tab 頁，可讓限制網站上所有動畫的速度。
也可以暫停所有動畫。 這對於一個充斥着各種動畫的網站特別有用。
單擊元素的transition屬性中的紫色曲線圖標，可以查看動畫的運動曲線，並調整其屬性。 此外，可以使用箭頭圖標滾動預定動畫列表以應用於你的元素。
5 模擬元素的偽狀態
樣式元素的另一個便利工具是元素狀態模擬器，可通過單擊“Styles”面板右上角的:hov圖標進行訪問。
此工具可模擬與這些選擇器相關聯的懸停，活動，聚焦和訪問和查看樣式的元素偽狀態。
要為這些偽狀態添加樣式，添加一個新的選擇器（帶+圖標），並將:<state>添加到選擇器字符串的末尾。
例如，要將一個懸停規則添加到具有類標識的li中，使用新的選擇器li.logo:hover，並在其中添加樣式。
然后，可以通過檢查:hover元素狀態來模擬元素上的懸停的測試樣式。
6 美化CSS和JavaScript
調試或查看壓縮的JavaScript和CSS非常困難。 但是幸運的是，DevTools提供了一個工具，使這更容易一些。
在“Sources” Tab 頁打開一個壓縮的文件后，可以單擊該文件左下角的一對大括號的圖標，DevTools將“美化”代碼。
這對CSS非常適用，並且對JavaScript的整理也很好，盡管在壓縮過程中丟失了一些信息（如變量名稱）。
7 Alt + Up / Alt + Down 快捷鍵
調試CSS時，可以選擇一個屬性，並使用向上/向下鍵來調整其值。 默認情況下，箭頭鍵將值調整為加1或減1。通過按住alt鍵，可以使用箭頭鍵以0.1的步長精細調整值，這在使用小數值時特別有用。
相反，可以按住shift鍵以10的步長進行調整。
8 保留日志
保留日志是一個復選框，可讓在頁面刷新之間保留日志。 調試需要刷新頁面的網站問題時，這是非常有用的，因為刷新后所有的控制台輸出都被清除。
啟用此選項時，控制台中將顯示一種新類型的“導航”日志，以將頁面刷新或導航事件顯示到不同的頁面。
9 Network + 日志過濾器
調試具有大量網絡請求或控制台日志的應用程序時，可以對特定類型的事件進行過濾。
Chrome具有支持許多不同屬性的過濾語言，以及像*這樣的操作符進行通配符匹配。
如果輸入-，Chrome將會顯示一個輸入提示，可以過濾各種屬性。 還可以切換“正則表達式”模式，對每行中顯示的數據執行正則表達式匹配。
10 代碼覆蓋
代碼覆蓋可以在運行Web應用程序時，查看每個JavaScript和CSS文件，哪些代碼行已經運行，哪些代碼沒有。 這是一個非常有用的功能，因為在一個復雜的或長期的項目上工作時，很容易積累廢棄的代碼或已經不用的代碼。
要使用它，請確保使用Chrome 59或更高版本，然后轉到“Coverage” Tab 頁。 按下“record”，然后開始運行應用程序。 完成后，Chrome會向你顯示在會話期間運行的確切代碼。
11 在生產環境調試問題
如果在自己的機器上運行應用程序，DevTools才有效。 如果有興趣了解用戶在生產中看到的錯誤和性能問題，請使用LogRocket。
LogRocket是一個前端日志記錄工具，可以讓你重現問題，就像在自己的瀏覽器中發生的那樣。 LogRocket不是猜測錯誤發生的原因，還是要求用戶進行屏幕截圖和日志轉儲，而你可以重現會話以快速了解出現的問題。 它與任何應用程序完美配合，無論是什么框架，並且有插件來記錄來自React，Angular和Vue.js的附加上下文。
LogRocket為你的應用程序裝備了記錄控制台日志，包含瀏覽器 header 和 body，還有元數據的網絡請求/響應，Redux操作/狀態和性能時間。 它還在頁面上記錄HTML和CSS，重新創建即使是最復雜的單頁應用程序的像素完美視頻。
更多LogRocket信息，請查看 LogRocke](https://logrocket.com/)。