我每天大量使用 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.assert、console.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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。