掌握Chrome開發工具：新一代前端開發技術

你可能已經熟悉了Chrome開發工具的基本功能。: DOM檢查器、樣式面板和JavaScript控制台。 但也有一些不太為人所知的特性可以顯著提高你調試或開發應用的速度。

黑色主題

Chrome開發工具的內置了黑色主題。你可以通過點擊開發工具窗口右上角的三點圖標，之後點擊進入設置頁面，切換主題。

有時候我覺得黑色主題讓我的眼睛更舒服,並且黑色主題顯然看起來更酷一些

選擇模式

Chrome開發者工具提供了很多選擇元素的方法，其中最快捷的方法就是使用選擇模式。

該功能通過點擊調試面板左上角的按鈕開啟(或者通過組合鍵 ctrl + shift + c), 該模式下你只需單擊頁面上的元素就可以選中它。

一旦開啟該模式，你可以將滑鼠移動到頁面來預覽選定內容，然後單擊來選擇要檢查的元素。

通過ctrl + shitf + c鍵，你可以直接打開調試工具並開啟調試模式，來在頁面上快速選擇一個元素。

存儲為全局變數

有時在控制台中查看一個複雜對象是一件很麻煩的事，因為他們可能有很多的鍵值或者一些很難手動解析的值。幸運的是，Chrome可以讓檢查這類JavaScript對象變得很容易。 你只需在控制台中右鍵點擊對象後選擇「存儲為全局變數」，chrome就會將這個變數存儲為一個名叫「temp1」的變數，之後你可以通過Javascript對其進行操作。

動畫工具

最近，Chrome團隊為調試和創建動畫添加了一些新特性。

單擊控制台左上角的下拉框中的「動畫」開啟動畫調試工具，你可以通過它限制站點上所有動畫的速度。

你也可以暫停所有動畫。這對於一個充斥著動畫內容的站點尤其有用。

動畫查看器允許你單獨控制每個屬性的時間曲線！

通過點擊一個元素 transition 屬性中的紫色曲線圖表按鈕，你可以看到動畫的移動曲線，並且微調他的屬性。此外，你還可以使用一些預置的時間曲線來應用到你的元素上。

模擬元素偽態

通過點擊樣式窗口右上角的:hover圖標，你可以打開元素狀態模擬工具。

該工具可以讓你模擬一個元素的hover,active,focused和visited偽態，並且看到不同偽態的相關樣式與選擇符。

如果要為這些偽態添加樣式，可以添加一個新的選擇器（使用「+」圖標），並將:添加到選擇器的結尾。

例如，如果我想要給一個logo類的li標籤添加hover偽態樣式，我需要構造一個新的偽類li.logo:hover，並且給他添加相關屬性。

之後可以通過模擬hover狀態來檢查你的樣式是否正確。

美化CSS和JavaScript

調試、瀏覽壓縮後的JavaScript和CSS是一件非常困難的事情，好在調試工具讓這件事情變得容易了一些。

在「Source」的標籤欄打開了一個壓縮的文檔後，你可以點擊左下角的花括弧logo，之後調試工具就會將代碼進行格式化處理。

儘管在壓縮過程中丟失了一些信息（例如變數名）,該工具對調試CSS和JavaScript文件還是很有用的。

Alt + Up / Alt + Down

在調試CSS時，你可以選擇一個屬性然後使用上下箭頭來調整它的值。默認情況下，上下箭頭會將值加減1。但如果你按住了alt鍵，再通過上下箭頭調整值時候，每次增減的值就會變成0.1，這在處理一些浮點類型的數值屬性時非常有用。

相反的，你可以按住shift鍵一次將數值加減10

保存日誌

保存日誌是一個複選框，它允許在頁面刷新後仍然保存日誌。這在調試需要刷新頁面的網站問題時非常有用，因為默認情況下，所有控制台輸出的信息在頁面刷新後都會被清除。

啟用此選項後，控制台中會出現一個新的「導航」日誌，它指向了刷新或是導航到的頁面。

網路 + 日誌過濾

當調試具有大量網路請求或控制台日誌的應用程序時，過濾特定類型的事件是很有用的。

Chrome有一種支持多種屬性的過濾語言，以及類似於*的通配符。

如果你輸入了「-」，Chrome會出現一個包含了可選過濾選項的提示框。你也可以打開「正則模式」來對每一行的數據進行正則匹配。

代碼覆蓋率

代碼覆蓋率可以在運行Web應用程序後針對每個JavaScript和CSS文件，查看哪些代碼行運行了，哪些代碼沒有運行。這是很有用的，因為在處理複雜或長期項目時，很容易在項目中累積無用的代碼。

如果想要使用這個功能的話，首先升級Chrome到59或更高版本，之後切換到「Coverage」頁面。點擊「record」，之後開始使用你的Web應用。當你使用結束後，Chrome將向你顯示操作期間運行的具體代碼。

調試用戶遇到的問題

通常來說調試工具只有在你自己的機器上才會生效。但如果你有興趣了解用戶在使用過程中遇到的的bug和性能問題，不妨嘗試一下LogRocket。

LogRocket 是一個前端日誌記錄工具，它可以讓你重放問題，就像它們發生在你自己的瀏覽器中一樣。 不是通過猜測錯誤發生的原因，或要求用戶提供截圖或者錯誤日誌，logrocket可以讓你通過重放快速了解到問題出在哪裡。它的兼容性很好，無論在任何框架下都可以使用，並且LogRocket對於React、Angular、和Vue的提供了額外的日誌插件。

LogRocket 會記錄你應用程序中的日誌信息、帶有header和body的網路請求、瀏覽器的元數據、Redux的行為與狀態、以及應用進行時間與性能。並且他還能記錄頁面的HTML和CSS樣式，完美的還原頁面。

LogRocket | JavaScript應用的日誌記錄和會話回放 _LogRocket幫助你理解那些影響用戶的問題, 這樣你就可以重新構建更好的的軟體。

感謝閱讀，希望這些調試工具的小技巧可以幫助你更好地構建應用。

譯者：一隻叫做蘭胖的食人魔魔法師

譯文：http://www.zcfy.cc/article/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3722.html

原文：https://medium.freecodecamp.com/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3ac0b6fe8a3

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！