你不知道的Chrome开发者工具新功能

阳光穿透心脏的1/2处 2022-06-05 03:08 503阅读 0赞

本文转自：　[https://news.cnblogs.com/n/573595/][https_news.cnblogs.com_n_573595]

相信对本文感兴趣的读者对于 Chrome 开发者工具的基本功能应该都比较熟悉：DOM 查看器、样式面板、JavaScript 控制台。但是 Chrome 开发者工具还有很多不太出名但绝对能够对调试、应用创建带来很大便利的功能。

一、黑色主题

![Chrome 开发者工具][Chrome]

Chrome 的开发者工具有一个内置的黑色主题。点击开发者工具面板右上角三个点的图标，选择“设置（settings）”，可以看到切换主题的选项（“theme”中选择“dark”启用这一功能）。

代码写多了，总觉得黑色的主题顺眼很多，是不是看起来也更酷啦。

二、选择模式

![Chrome 开发者工具][Chrome 1]

谷歌开发者工具（DevTools）有很多选择方式，但其中最方便的是“选择模式”。

点击开发者工具面板左上角的鼠标按钮就可以激活这个工具（或者直接 cmd+shift+c）。

激活后，鼠标在页面上滑动可以看到整个选项页面，选择其中一个元素进行检查。

如果你想快速查找页面上的某个元素，直接 cmd+shift+c 就可以打开开发者工具中的选择模式。

三、存储为全局变量

![Chrome 开发者工具][Chrome 2]

如果记录在控制台的对象有很多 key 或包含手动解析比较困难的值时，检查这些对象有时候会非常棘手。但是 Chrome 通过 JavaScript 让这个问题变得简单很多。

首先，在控制台中右击某个对象，选择“存储为全局变量（store as global variable）”。把某个对象存储为全局变量，并在被称为 temp1 的控制台中显示，接下来你就能通过 JavaScript 展开工作了。

四、动画工具

![Chrome 开发者工具][Chrome 3]

近期，Chrome 团队又增加了一些调试和创建动画的新功能。

点击左上角“控制台（console）”按钮旁边三个点的下拉菜单，打开“Animations”面板，该功能能够帮你限制该网站上所有动画的播放速度。

也可以利用它停止页面上的所有动画。如果某个网站上都是动画内容，这个功能就能派上用场咯。

![Chrome 开发者工具][Chrome 4]

动画查看器使得每个属性的变化情况都在你的掌控之中

![Chrome 开发者工具][Chrome 5]

点击某个元素中 transition 属性的紫色曲线图标，可以看到这个动画的运动曲线，进而对这个属性进行微调。另外，你还可以使用箭头图标，对预设动画列表进行滚动显示，应用于你的元素中。

五、伪元素模拟

![Chrome 开发者工具][Chrome 6]

另一个设计元素样式的简便工具是元素状态模拟器，可以通过点击 Style 面板右上角的:hov 图标来访问。

该工具能够帮助你模拟与这些选择器相关联的 hover（鼠标经过的状态）、active（按下鼠标时的状态）、focused（元素获得光标焦点时使用的颜色，主要用于文本框输入文字是使用）及 visited（鼠标点击后再次停留在上面的状态）的伪元素并查看样式。

![Chrome 开发者工具][Chrome 7]

为了增加伪状态的样式，我们可以添加一个新的选择器（通过 + 的图标）并在选择器字符串末尾添加:<state>

例如，通过 logo 类别为 li 添加 hover 规则，创建一个新的选择器——li.logo:hover 并添加样式。

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

六、实现 CSS 和 JavaScript 代码高亮

![Chrome 开发者工具][Chrome 8]

调试或查看最小化的 JavaScript 和 CSS 非常困难。但是 Chrome 开发者工具同样提供了一个简化这项工作的工具。

在“Sources”选项卡中打开一个最小化的文件后，您可以单击文件左下角的大括号图标，DevTools 将进行代码高亮。

尽管某些信息（如变量名称）会在缩小过程中丢失，但这个工具还是能够同时与 CSS 文件及 JavaScript 兼容。

七、Alt + Up / Alt + Down

![Chrome 开发者工具][Chrome 9]

调试 CSS 时，你可以选择一个属性并用“上下键”来调整值。默认情况下，箭头键通过+/- 1 调整值，即调整跨度为1。但是如果按住 alt 键，调整跨度能够缩小到 0.1。调整分数值时，这个方法非常给力。

相反，如果你按住 shift，调整跨度为 10。

八、保存日志（Preserve Log）

![Chrome 开发者工具][Chrome 10]

保存日志是一个能够在日志刷新间隙保留日志的复选框。在调试需要刷新页面的网站问题时，这个功能很管用，因为如果没有这个功能，在这个调试的过程中控制台的所有输出都会被清除。

启用此选项时，控制台中会显示一种新类型的“Navigation（导航）”日志，从而实现将页面刷新或导航事件显示到不同页面的目的。

九、Network（网络）+Log Filters（日志过滤器）

![Chrome 开发者工具][Chrome 11]

调试那些存在很多网络请求和控制台日志的应用程序时，首先过滤出特定类型的事件会省事儿很多。

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

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

十、代码覆盖（Code Coverage）

![Chrome 开发者工具][Chrome 12]

代码覆盖功能可以帮助用户在运行 Web 应用程序时，查看每个 JavaScript 和 CSS 文件中哪些代码已经运行，哪些没有。当用户在处理一个比较复杂的长期项目时，这个工具能够使得死亡代码积累过程更为容易。

启用该功能前，首先应确保你用的是 Chrome59 或以上版本，然后转到“Coverage”选项卡。按住“record（记录）”开始使用你的应用程序。完成后，Chrome 会向你显示会话期间运行的确切代码。

十一、程序调试问题

只有当你在自己的设备上运行应用时，开发者工具才能正常工作。

如有需要了解和处理用户在创建应用过程中碰到的报错和性能问题，可以试试 LogRocket（本文作者出其不意抛出一个软广，但了解其它厂家的产品也不是件坏事儿）。

![Chrome 开发者工具][Chrome 13]

LogRocket 是一个前端日志记录工具，能够按照用户需求不断回播报错。程序猿们无需再猜测错误产生原因或者要求用户截屏，只要通过 LogRocket 的重播功能就能确定出问题的地方。LogRocket 几乎与所有应用程序兼容，不受框架限制。而且具备用于记录 React、Angular、Vue.js 中其余情景日志的插件。

LogRocket 能够为应用程序设备记录控制台日志，例如带有 header 及 body 的网络请求/响应、浏览器元数据、Redux 操作/状态和性能计时。

感谢阅读到这里。希望这些 DevTool 能大大减轻你的压力，分分钟让广大程序猿们写出更加优秀的应用。

[https_news.cnblogs.com_n_573595]: https://news.cnblogs.com/n/573595/
[Chrome]: /images/20220605/b258787995ad4adca34c0aa07dda4ed1.png
[Chrome 1]: /images/20220605/a8cbfc1197cb415abe49984c7d1cf4ed.png
[Chrome 2]: /images/20220605/a547efc9cdd64787bdf2e711089b39ea.png
[Chrome 3]: /images/20220605/53842feaba6b4fb185984b79e37d6c93.png
[Chrome 4]: /images/20220605/539add2586f6461395d97f9d1be7af32.png
[Chrome 5]: /images/20220605/8d1ef326c5ae4953b9df72af4705764c.png
[Chrome 6]: /images/20220605/efc77d1aebc9490d8617a9498bf44f08.png
[Chrome 7]: /images/20220605/75640fa4ba344e1aa2c69169db91d042.png
[Chrome 8]: /images/20220605/d48d24dd53b046ae9e5d1148be978ee5.png
[Chrome 9]: /images/20220605/208872ebfafd40a0b923645e80a5f486.png
[Chrome 10]: /images/20220605/ed7f0471f72447fa9cad4591777424d8.png
[Chrome 11]: /images/20220605/344cb52171fb4a4b9334eb03d652cdab.png
[Chrome 12]: /images/20220605/67b64632ea854d879c2b7268e65f171c.png
[Chrome 13]: /images/20220605/3240631c48934c1991e63ee6c6a4f0e2.png