你可能不知道的 10 个 Chrome DevTools 技巧

Chrome DevTools 对前端工程师来说,几乎每天都会用到,但是有些技巧你可能不知道,让我们来了解一下吧~

1. 轻松获取某个审查元素的引用

打开控制台,在 Elements 界面下,对着某个 dom 标签点击右键,选择 Store as global variable

2. 创建并钉住一个动态表达式

你可以在控制台创建一个动态表达式,并且把它钉到控制台顶部,这对观察页面上某个变化的元素非常有用。

3. 模拟弱网环境

Network 界面下可以模拟多种不同的网络环境,利用它可以观察你的应用在不同环境下的加载时间。

4. 禁用缓存和保存日志

缓存有时候会造成很多难以排查的 bug,为了排除这个因素,你可以勾选Network 界面下的 Disable cache 选项(它只在 DevTools 窗口打开时生效)。

Preserve log 可以让你在切换页面的时候也能保存控制台中的打印日志。

5. 在控制台直接创建截图

Chrome Devtools 有一个内置的截图工具。打开控制台,然后按下 Ctrl+Shift+P,输入 screenshot ,即可选择针对当前网页进行截图。如果选择 Capture node screenshot 还可以针对当前选中的元素创建截图。

6. 不只是 console.log

除了 console.log,还有几个常用的方法:

console.warn, console.error

console.warn 可以打印出黄颜色的警告信息,也可以配合 filter 方便查询。

console.table

如果你有一个数组,用 console.table 来打印就再合适不过了。

还有更多的方法如: console.assertconsole.group,你可以在这里找到:Google Developers

7. $_ 返回最近那个表达式

使用 $_ 可以打印出你在控制台最后使用的表达式的值。

8. 直接使用 $

你可以直接使用 $ 来查询元素,这不需要 jquery,因为它就是 document.querySelector 的别名。

同时 $$ 也是 document.querySelectorAll 的别名。

9. 触发元素的 hover 状态

在审查元素时,可以在 Styles 页面点击 :hov ,即可打开 Force element state 面板,然后就能轻松调试元素的特殊状态。

10. Ctrl+Click 查找 CSS 属性

如果想知道某个具体的 css 规则在哪定义的,只需要在 Styles 面板中,在那个规则上使用 Ctrl+Click (Mac 下用 CMD+Click)。

参考链接

  • 英文原文

本文分享自微信公众号 - 码力全开(codingonfire)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码客

Linux上安装及配置Yum

2) 下载新的CentOS-Base.repo 到/etc/yum.repos.d/

29820
来自专栏软件开发-青出于蓝

Mybatis之Executor

                                                                    图1

9510
来自专栏zhisheng

Redis从入门到精通,至少要看看这篇!

常用的 SQL 数据库的数据都是存在磁盘中的,虽然在数据库底层也做了对应的缓存来减少数据库的 IO 压力。

17140
来自专栏机器学习与python集中营

奔走相告,Python 3.8.0 正式发布!

那么,这次新发布的 Python 3.8.0 有哪些重要的改进呢?以下是是 Python 3.8 相比 3.7 的新增特性。

5430
来自专栏码客

我常用的iOS开源库

OC库和Swift库相似功能的很多 选择的建议是:如果OC库在Swift中完全能用 就优先用OC库 原因是:Swift语言还是不太稳定 语言一更新 程序一大改 ...

10640
来自专栏Hadoop数据仓库

Galera Cluster for MySQL 详解(一)——基本原理

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

14110
来自专栏软件测试testclass

一款超好用的Http抓包工具:Fiddler

Fiddler 一款超好用的Http抓包工具,这对于Tester来说一点也不为过。同时对于一名Coder来说,也是一个很好的调试工具。

13220
来自专栏前端菜鸟变老鸟

WEB性能(6)--经典最佳实践

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

8410
来自专栏码客

Oracle 序列重建

在导出数据的时候 数据库会先导出序列 再导出表数据 就会导致表中的id大于序列的值 导致新插入数据时 报唯一约束错误

11910
来自专栏大史住在大前端

高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染

动画的流畅程度通常是以FPS(Frame Per Second,每秒帧率)作为衡量的。在摄像机录制视频时每一帧实际上包含了一段时间内的画面记录(长曝光摄影的道理...

8720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励