前端杂谈 · Web

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

•̀.̫•́✧ · 4月17日 · 2020年本文1238字 · 阅读4分钟1,666

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

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

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

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

Chrome 中的实时表达式

三、模拟缓慢的网速

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

测试不同的网速

四、禁用缓存和保存日志

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

禁用缓存和保留日志

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

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

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

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

console.warn, console.error

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

console.warn,console.error

console.table

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

console.table(data)

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

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

$_

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

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

强制开启某个元素的状态

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

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

十个 Chrome 开发者工具栏(DevTools)使用技巧-歪?是3.1415926吗

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

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

9 条回应
  1. 匿名2020-5-5 · 8:15

    谢谢啦,嘿嘿

  2. 匿名2020-5-3 · 15:08

    蟹蟹博主,好人一生平安

  3. 匿名2020-5-3 · 0:49

    厉害厉害