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

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
css

做者在 Twitter 上推薦咱們的中文翻譯啦,截圖在最後
vue

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
git

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

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

使用 coverage 面板來得到關於冗餘代碼的摘要-細節信息。使用 Drawer 菜單或者 Command 菜單來打開它。異步

DevTools 的 coverage 工具能夠跟蹤當前加載的 JS 和 CSS 文件的哪些行正在被執行，並顯示未使用字節的百分比。編輯器

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

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

爲此，能夠使用位於 DevTools' Drawer 中的更改工具。開發工具

它不只會使用差別形式的變化（像 Git 這樣的源控制工具同樣）向你展現，同時還能夠撤銷它們

看個實例：

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

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

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

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