🦕 🐨 🤶🏻 Chrome开发者工具的10个鲜为人知的功能 🍬 👨‍👨‍👧‍👦 🔭

我们正在翻译的帖子的作者几乎每天都会使用Chrome开发者工具。在这里，他想谈谈这些工具鲜为人知的功能。他说，如果他以前知道它们，那么它们肯定会对他有用。

1.一种链接到正在研究的任何元素的简单方法

Chrome开发人员工具可让您链接到控制台中正在调查的任何元素。为此，请在“ Elements面板中工作，右键单击Elements ，然后从下拉菜单中选择“ Store as global variable ”。

一种链接到正在调查的任何元素的简单方法

2.创建附加到控制台的交互式表达式

在开发人员的工具中，您可以创建附加在控制台顶部的交互式表达式，其值会不断更新。下图显示了创建此类表达式的过程。如果您知道应该更新页面上的某些元素，则此功能对于观察它们可能非常有用。

Chrome中的交互式表达式

3.模拟缓慢的互联网连接

Chrome开发者工具的“ Network标签可让您模拟浏览器与各种网络的连接。此功能对于在需要几秒钟的时间加载的情况下评估页面的行为非常有用。

探索一个页面，模拟各种连接到Internet的方式

4.禁用缓存，在页面之间切换时保存日志

事实证明，我不得不面对许多不是错误的问题。他们的原因是不正确地加载了缓存的代码。为了摆脱此类麻烦，您可以使用“ Network选项卡的功能完全禁用缓存。这是一个Disable cache复选框。请注意，仅当开发人员工具栏打开时，缓存才起作用。

保存日志是另一个有用的功能，由于在重新加载被调查页面时不会清除控制台。启用此功能复选框，在“ Network选项卡上Preserve log 。

禁用缓存并保存日志

5.制作屏幕截图

Chrome开发者工具包含一个内置的屏幕截图工具。为了使用它，您需要在工具窗口打开的情况下，应用组合键Ctrl+Shift+P ，然后在出现的字段中输入关键字screenshot ，并选择所需的创建截图的方法。

从开发人员工具栏创建屏幕截图

6. console.log（）命令远不是将某些内容记录到控制台的唯一方法

每个人都使用console.log()命令记录调试数据。但是，此命令不会耗尽日志记录功能。特别是， console.warn()和console.error()命令由开发人员使用。

这些命令显示不同级别的日志记录到控制台的消息-分别是警告和错误消息。它们以不同的颜色和图标突出显示。可以过滤通过不同命令显示在控制台中的消息。