你可能不知道的 Chrome 开发者工具小窍门

Loftie Ellis 原作，授权 New Frontend 翻译。

我每天都有很多时间花在 Chrome 开发者工具上，下面列出了一些我希望自己能早些了解的使用窍门。

1. 快速引用审查元素

在「Elements」（元素）标签页中右键点击审查的元素，选择「Store as global variable」（保存为全局变量），马上就能在控制台得到该元素的一个引用。

2. 置顶实时表达式

可以在控制台上创建并置顶一个持续演算的实时表达式。需要监视特定页面元素的变动时，这一招十分有用。

3. 模拟低速网络

在「Network」（网络）标签页上可以直接模拟不同网速。看看页面需要许多秒才能加载完的情况下，你的代码表现如何。

4. 禁用缓存，保留日志

代码根本没有错误，只是误加载了缓存的代码，我曾多次碰到这样的问题。为了避免这种情况，你可以在「Network」（网络）标签页禁用缓存（Disable cache）。（注意，禁用缓存仅仅在开发者工具窗口开启时有效。）

「Preserve log」（保留日志）是另一项很有用的功能，避免因为访问不同页面而清空日志或控制台输出。

5. 在控制台直接截屏

Chrome 开发者工具内置了截屏工具。在开发者工具窗口开启的时候按 ctrl+shift+p，接着输入 screenshot 即可截屏。

6. console.log 之外

我们都用 console.log 输出调试信息，但其实还有一些其他选项：

console.warn 和 console.error 会输出不同颜色的信息，也方便你过滤不同的日志层级。

如果数据是结构化的列表，那么使用 console.table 可以输出漂亮的表格：

console 还有很多方法，比如 console.assert 和 console. group，详见 这篇文章。

7. $_ 返回上一个表达式的演算结果

$_ 表示控制台上一个执行的操作的返回值。

8. $ 表示 document.querySelector

在控制台里可以直接使用 $ 来选取元素（无需 jquery）。类似地，$$ 表示 document.querySelectorAll。

9. 在样式面板触发悬浮和聚焦状态

审查悬浮状态的元素比较困难，不过在「Styles」（样式）面板可以直接指定元素样式。

10. ctrl + 点击，查找 CSS 属性定义

想知道某条 CSS 规则是在哪里定义的？ctrl + 点击（Mac 上是 cmd + 点击）这条规则即可。

你有其他窍门想要分享？欢迎留言。