【译】你不知道的 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 后续