掌握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/)。