【譯】你不知道的 Chrome 除錯工具技巧第二十三天：Drawer tips 後續

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在 Twitter 上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們談到了 Newwork 的幾個 tips，今天一起繼續我們在另一天提到的 Drawer tips 的另外兩個實用的 tips

實際上你的頁面並不需要位於尾部的許多程式碼。也許它是來自外部庫的一大塊 JavaScript ，也許是被遺忘的選擇器上的一些 CSS 規則，它們不再匹配任何東西。

使用 coverage 皮膚來獲得關於冗餘程式碼的摘要-細節資訊。使用 Drawer 選單或者 Command 選單來開啟它。

DevTools 的 coverage 工具可以跟蹤當前載入的 JS 和 CSS 檔案的哪些行正在被執行，並顯示未使用位元組的百分比。

它用綠色的線條標記執行和用紅色的線條標記未執行。讓我們看一個簡單的例子：

在瀏覽器中進行設計，調整這些css值，在程式碼執行的地方進行除錯 - 這既方便又有趣。但在某些時候，你可能希望將已更改的內容與最初載入的樣式表進行比較。

為此，可以使用位於 DevTools' Drawer 中的更改工具。

它不僅會使用差異形式的變化（像 Git 這樣的源控制工具一樣）向你展示，同時還可以撤銷它們

看個例項：

今天的分享就到這裡~

慣例：如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

【譯】你不知道的 Chrome 除錯工具技巧 第二十三天：Drawer tips 後續