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

dendoink發表於2018-12-29

特別宣告

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

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

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

正文

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

65. Check the code coverage (檢查程式碼 coverage)

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

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

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

DevToolscoverage 工具可以跟蹤當前載入的 JSCSS 檔案的哪些行正在被執行,並顯示未使用位元組的百分比。

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

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

66. Check what you’ve changed (檢查你修改的內容)

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

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

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

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

看個例項:

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

今天的分享就到這裡~

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

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

其他系列

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

寫在最後

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

作者在 Twitter 上推薦我們的中文翻譯啦

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

相關文章