模拟慢速互联网 Chrome你可能不知道的 Chrome DevTools

我几乎每天都会使用 Chrome 开发者工具，但有些事情我希望早点知道

1：轻松获取任何被检查元素的引用

您可以通过右键单击“元素”视图中的元素并选择“存储为全局变量”从控制台获取对任何检查元素的引用。

2：创建固定到控制台的实时表达式

您可以创建一个实时表达式，它会持续执行并固定在控制台顶部。这对于观察页面上某些您知道应该更新的元素非常有用。

3：模拟慢速互联网

您可以直接从“网络”选项卡模拟不同的网速。这非常有助于了解代码在加载需要几秒钟时的反应。

4：禁用缓存并保留日志

我遇到过很多问题，但最终发现根本不是错误，只是缓存的代码加载错误。为了避免这种情况，你可以从“网络”选项卡关闭所有缓存。（请注意，只有在 DevTools 窗口打开时才会禁用缓存）

保留日志是另一个有用的功能，可以防止您在浏览不同页面时清除日志/控制台输出。

5：直接从开发者控制台截取屏幕截图

Chrome DevTools 内置了截图工具。要使用它，请在ctrl+shift+pDevTools 窗口打开的情况下输入 ，然后输入“screenshot”。

6：日志记录不仅仅是 console.log

我们都使用 console.log 进行调试输出，但您还有其他一些选择：

控制台警告，控制台错误

console.warn打印出不同颜色的消息，并且您可以过滤日志级别。

控制台表

如果您有一个结构化的数据列表，console.table则会以漂亮的表格格式打印它。

还有更多，例如console.assert，，您可以在这里console.group看到其余的：

7：$_ 返回最近计算的表达式

用于$_引用控制台中执行的上一个操作的返回值。

8：$ 是 document.querySelector 的快捷方式

您可以使用它$来快速从控制台选择元素，无需 jQuery。
同样，$$快捷方式是document.querySelectorAll

9：在样式面板中触发悬停或焦点状态

悬停状态可能很难检查，因为您必须将鼠标移到元素上，但有一种简单的方法：在样式下，您可以强制使用元素样式。

10：Ctrl+单击查找 CSS 属性的定义位置

有没有想过某个 CSS 规则到底定义在哪里？其实很简单，只需按住 Ctrl 键并点击该规则（Mac 上是按住 cmd 键并点击）即可。

你还有其他 DevTools 技巧吗？请在评论区留言告诉我 :)

这篇文章最初发表于https://loftie.com/post/things-you-may-not-know-about-chrome-devtools/