十个 Chrome 开发者工具栏(DevTools)使用技巧

F2E 前端

我每天大量使用 Chrome 开发者工具,但还是有些东西我希望我能早点儿知晓

一、轻松获得任何被检查元素的引用

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

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

二、创建固定在控制台的实时表达式

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

Chrome 中的实时表达式

三、模拟缓慢的网速

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

测试不同的网速

四、禁用缓存和保存日志

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

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

禁用缓存和保留日志

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

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

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

六、记录方式不只是 console.log

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

console.warn, console.error

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

console.warn,console.error

console.table

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

console.table(data)

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

七、$_ 返回最近的计算表达式

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

$_

八、$ 是 document.querySelector 的快捷方式

在控制台中,你可以在没有 jquery 时使用 $ 来快速选择元素。
类似的 $$ 是 document.querySelectorAll 的快捷方式

9: 在样式面板中触发 hover 或 focus 状态

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

强制开启某个元素的状态

10: Ctrl+click 可以查找定义 CSS 属性的位置

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

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

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

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/lpellis/things-you-may-no...

译文地址:https://learnku.com/f2e/t/38891

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!