【译】你不知道的 Chrome 调试工具技巧 第二十三天:Drawer tips 后续

2,517

特别声明

本文是作者 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 菜单来打开它。

DevToolscoverage 工具可以跟踪当前加载的 JSCSS 文件的哪些行正在被执行,并显示未使用字节的百分比。

它用绿色的线条标记运行和用红色的线条标记未运行。 让我们看一个简单的例子:

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

在浏览器中进行设计,调整这些css值,在代码执行的地方进行调试 - 这既方便又有趣。 但在某些时候,你可能希望将已更改的内容与最初加载的样式表进行比较。

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

它不仅会使用差异形式的变化(像 Git 这样的源控制工具一样)向你展示,同时还可以撤销它们

看个实例:

今天的分享就到这里~

惯例: 如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我:Twitter:Tomek Sułkowski

其他系列

其他此系列的文章,马上就会翻译出来,到时会贴出对应的链接在此处。

写在最后

如果你对我的翻译表示肯定,也可以关注我一波哦~ 顺便我的开源项目,求一波 star→ 看这里, 美丽的博客系统

作者在 Twitter 上推荐我们的中文翻译啦