掌握Chrome Developer Tools：下一阶段前端开发技术

Tips

原文作者：Ben Edelstein

原文地址：Mastering Chrome Developer Tools: Next Level Front-End Development Techniques

你可能已经熟悉Chrome Developer Tools的基本功能：DOM检查器，样式面板和JavaScript控制台。但是有一些不太知名的功能可以大大提高调试或应用程序创建工作流程。

1 黑色主题

Chrome内置了一个黑色主题。可以通过单击开发工具窗格右上方的三点图标，单击“设置”，然后切换主题来启用它。

在出现的选项面板里，选择“Dark”。如下图：

有时候会发现会让我的眼睛看起来更加容易，显然，它看起来更酷！

2 选择模式

Chrome Developer Tools（DevTools）提供了多种选择元素的方法 —— 其中最方便的是选择模式。

通过按下开发工具面板左上角的鼠标图标（或使用cmd + shift + c快捷键）激活此工具，可以通过点击页面上的元素来选择它们。

一旦激活，可以在页面上移动鼠标并预览选择，然后单击以选择要检查的元素。

该工具非常适合快速选择页面上的元素，可以使用cmd + shift + c直接打开DevTools并进入选择模式。

3 保存为全局变量

检查记录到控制台的复杂对象有时会很棘手，如果它们有许多key，或者包含难以手动解析的值。幸运的是，Chrome可以使用JavaScript轻松检查这些对象。

要这样做，右键单击控制台中的对象，然后选择“存储为全局变量”。这将对象作为全局变量存储在名为temp1的控制台中，然后可以使用JavaScript进行操作。

4 Animation 工具

最近，Chrome团队为调试和创建动画添加了一些新功能。

单击控制台左上角的下拉列表显示一个“Animations” Tab 页，可让限制网站上所有动画的速度。

也可以暂停所有动画。这对于一个充斥着各种动画的网站特别有用。

单击元素的transition属性中的紫色曲线图标，可以查看动画的运动曲线，并调整其属性。此外，可以使用箭头图标滚动预定动画列表以应用于你的元素。

5 模拟元素的伪状态

样式元素的另一个便利工具是元素状态模拟器，可通过单击“Styles”面板右上角的:hov图标进行访问。

此工具可模拟与这些选择器相关联的悬停，活动，聚焦和访问和查看样式的元素伪状态。

要为这些伪状态添加样式，添加一个新的选择器（带+图标），并将:<state>添加到选择器字符串的末尾。

例如，要将一个悬停规则添加到具有类标识的li中，使用新的选择器li.logo:hover，并在其中添加样式。

然后，可以通过检查:hover元素状态来模拟元素上的悬停的测试样式。

6 美化CSS和JavaScript

调试或查看压缩的JavaScript和CSS非常困难。但是幸运的是，DevTools提供了一个工具，使这更容易一些。

在“Sources” Tab 页打开一个压缩的文件后，可以单击该文件左下角的一对大括号的图标，DevTools将“美化”代码。

这对CSS非常适用，并且对JavaScript的整理也很好，尽管在压缩过程中丢失了一些信息（如变量名称）。

7 Alt + Up / Alt + Down 快捷键

调试CSS时，可以选择一个属性，并使用向上/向下键来调整其值。默认情况下，箭头键将值调整为加1或减1。通过按住alt键，可以使用箭头键以0.1的步长精细调整值，这在使用小数值时特别有用。

相反，可以按住shift键以10的步长进行调整。

8 保留日志

保留日志是一个复选框，可让在页面刷新之间保留日志。调试需要刷新页面的网站问题时，这是非常有用的，因为刷新后所有的控制台输出都被清除。

启用此选项时，控制台中将显示一种新类型的“导航”日志，以将页面刷新或导航事件显示到不同的页面。

9 Network + 日志过滤器

调试具有大量网络请求或控制台日志的应用程序时，可以对特定类型的事件进行过滤。

Chrome具有支持许多不同属性的过滤语言，以及像*这样的操作符进行通配符匹配。

如果输入-，Chrome将会显示一个输入提示，可以过滤各种属性。还可以切换“正则表达式”模式，对每行中显示的数据执行正则表达式匹配。

10 代码覆盖

代码覆盖可以在运行Web应用程序时，查看每个JavaScript和CSS文件，哪些代码行已经运行，哪些代码没有。这是一个非常有用的功能，因为在一个复杂的或长期的项目上工作时，很容易积累废弃的代码或已经不用的代码。

要使用它，请确保使用Chrome 59或更高版本，然后转到“Coverage” Tab 页。按下“record”，然后开始运行应用程序。完成后，Chrome会向你显示在会话期间运行的确切代码。

11 在生产环境调试问题

如果在自己的机器上运行应用程序，DevTools才有效。如果有兴趣了解用户在生产中看到的错误和性能问题，请使用LogRocket。

LogRocket是一个前端日志记录工具，可以让你重现问题，就像在自己的浏览器中发生的那样。 LogRocket不是猜测错误发生的原因，还是要求用户进行屏幕截图和日志转储，而你可以重现会话以快速了解出现的问题。它与任何应用程序完美配合，无论是什么框架，并且有插件来记录来自React，Angular和Vue.js的附加上下文。

LogRocket为你的应用程序装备了记录控制台日志，包含浏览器 header 和 body，还有元数据的网络请求/响应，Redux操作/状态和性能时间。它还在页面上记录HTML和CSS，重新创建即使是最复杂的单页应用程序的像素完美视频。

更多LogRocket信息，请查看 LogRocke](https://logrocket.com/)。