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

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

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

1. 快速引用审查元素

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

引用元素

2. 置顶实时表达式

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

Chrome 的实时表达式

3. 模拟低速网络

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

测试不同的网速

4. 禁用缓存,保留日志

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

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

禁用缓存、保留日志

5. 在控制台直接截屏

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

在开发者工具窗口直接截屏

6. console.log 之外

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

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

console.warn 和 console.error

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

console.table(data)

console 还有很多方法,比如 console.assertconsole. group,详见 这篇文章

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

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

$_

8. $ 表示 document.querySelector

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

$('body')

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

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

指定特定元素状态

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

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

ctrl + 点击跳转到 CSS 规则定义

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

最新文章

评论

正在加载评论