十个 Chrome 开发者工具栏（DevTools）使用技巧

你要在控制台获得任何被检查元素的引用，在 ‘elements’ 选项卡视图右击该元素，然后选择 ‘Store as global variable’。

轻松获得任意被检查元素的引用

你可以创建一个实时表达式，该表达式将不断被计算并固定在您的控制台顶部。这对于查看你知道应该在页面上更新的某些元素非常有用。

Chrome 中的实时表达式

你可以直接在网络面板模拟不同的网速。当用几秒钟加载代码时，来查看代码的反应，这就很好用了。

测试不同的网速

很多时候，我们会因为缓存的原因，加载了错误的代码，而发生错误。你可以在网络面板关闭关闭所以缓存来避免这种事请发生。（只有在 DevTools 窗口打开时才会禁用缓存）

保存日志是另一个有用的特性，当您浏览不同的页面时，它可以防止清除日志 / 控制台输出。

禁用缓存和保留日志

Chrome 开发者工具有内置截图工具。按下 ctrl+shift+p （在开发者工具窗口打卡）然后输入’screenshot’。

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

我们一直使用 console.log 来进行调试输出，但是你还有更多的选择：

console.warn, console.error

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

console.warn，console.error

console.table

console.table 可以在把你结构化的数据列表，以漂亮的表格格式打印出来。

console.table(data)

还有一些像 console.assert、console.group 这样的，你可以在 这儿 查看剩下的。

使用 $_ 引用在控制台中执行的前一个操作的返回值。

$_

在控制台中，你可以在没有 jquery 时使用 $ 来快速选择元素。

类似的 $$ 是 document.querySelectorAll 的快捷方式

检查 hover 状态可能会非常棘手，因为你必须移动你的鼠标到指定的元素上，但是有一种简单的方法：在 Styles 下，可以强制元素样式。

强制开启某个元素的状态

有没有想过确切定义某个 CSS 规则的位置？这很容易找到，你可以直接按 ctrl+click（在 Mac 上按 cmd+click）就可以了。

Ctrl+click 会带你到定义 CSS 规则的位置

你还有其他 DevTools 技巧吗？请在评论中告诉我