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