掌握Chrome Developer Tools：下一階段前端開發技術

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/)。