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 + 点击）这条规则即可。
你有其他窍门想要分享？欢迎留言。
评论