作为前端工程师,我们每天的工作离不开Chrome,特别是Chrome 的 DevTools,提供了很多强大实用的功能,熟练掌握这些工具,能够为我们的日常开发和调试工作节省大量时间,提高效率。
目前网络上有很多此类介绍 chrome 开发者工具的文章,但是大多只是功能的陈述,没有结合实际的使用场景,导致看完之后,不知道能运用在什么场景下,过几天就忘了。
本文尝试通过结合实际开发经验,来为大家介绍一些常用的 chrome 开发者工具的使用,希望能够帮助到大家。
Console
-
在任意面板唤起 console
- Ctrl + `
- 使用场景:console 是我们最常用的面板,我们可能在其他的面板下调试代码时需要使用到console。如果直接点击 console 面板来回切换的话,效率不高,可以直接用快捷键唤起 console,并且能够保留当前正在查看的面板。
-
$0
$1
$_
$0
: 引用最后一次选中的dom节点$1
: 引用倒数第二个选中的dom节点$_
: 引用 console 中上一个表达式返回的值- 使用场景:在 console 中我们可能经常要尝试一些功能,写一些测试代码。
$0
和$1
能够让我们快速选中 dom 节点,对选中的 dom 做些操作。$_
方便我们在没有给返回值赋给变量,但又需要引用这个值的情况使用。
-
store as global variable
- 当你想将某些值存储到变量(接口请求、返回参数,dom节点,debug时的某些变量)在console面板使用时
- 当你在 console 打印出一些库的对象时,使用 store as global variable 后能够直接调用这些库的方法,比如 moment、antd 的 form 等
-
copy()
- 帮你快速的 copy 一些 console 中的变量
Elements
-
computed style
- 当项目变得复杂时,一个节点上的样式可能会受到多处代码的影响,computed style 能够查看真正使它生效的 CSS 样式
-
Break on
- 当 DOM 状态变化时打断点
- 使用场景:在中后台项目中经常会基于 antd 的组件做一些改造,以 Dropdown Menu 举例,我们想自定义改造组件下拉的内容,来满足我们的需求。这时候如果直接使用检查元素来修改,会发现鼠标一旦移开后下拉就会收起,造成了调试的麻烦。这个时候就很适合使用 Break on 这个功能
-
提取节点样式
- 右击节点 👉 copy 👉 copy styles
Network
-
禁用网络缓存
- 当新内容发布后,页面始终展示的还是旧的内容时使用(开发调试时最好一直将其勾选)
- Network 👉 Disable cache
-
网络节流(模拟弱网环境)
- 当开发移动端应用时,查看应用在弱网环境下是否还能够有较好的加载速度
-
Block url
- 阻止某个url的请求(当你不得不在线上debug时,把某些写操作的请求给阻止,如表单提交等)
-
advanced filter
- 对网络请求进行更精细的筛选
-
is:from-cache
- 查看哪些请求是走缓存的
-
has-response-header:
- 筛选出包含某些请求头的接口
-
larger-than:
- 查看有哪些请求体积过大,便于分析性能、优化拆包等
-
method:
- 只查看某种方法的网络请求(POST/GET)
-
太多了记不住?
- 在筛选框里输入英文首字母,浏览器会为你自动提示这些选项
-
Header options
- 在network 面板,右击,可以选择在network面板中要展示的内容(cookie,cache-control)
- 可以将接口某个自定义的 header 展示出来,如我们常见的 x-tt-logid,这样就能很方便的将有问题的接口的 logid 快速的 copy 给后端同学了
Sources Panel
-
Conditional breakpoints
- 当我们在某处打了个断点,却只想在某些情况下触发时使用
- 使用场景:当我们打断点调试react代码时,经常会遇到state变化导致页面多次触发 render,从而一直触发断点,而我们只想在特定条件才想断点的情况。下面这个例子示范了如何只在num有值的情况下才断点
-
Blackbox(add script to ignore list)
- 跳过工具库的代码(在调用栈上不显示react、react-dom等工具库的函数)
-
Pause on exception
- 当出现抛错❌ 的时候断点
- 使用场景:当代码因为某些情况(接口数据异常、访问了 undefined 等)导致页面白屏,可以使用此方法在出现异常的上下文环境查看导致异常的原因
-
Never Pause Here
- 当你在某处打了断点,但是你暂时不想关心这里的具体情况时
- 结合上面说到的 Pause on exception,如果开启这个的话会在任何有抛错的地方打断点,但有时候像一些老项目里有很多报错,但是不影响正常逻辑时,我们可以用这个方法忽略这个断点
-
Code Folding
- Cmd + shift + p 👉 Code Folding
- 线上查看代码时,可以将函数体收起
Other
-
Cmd + shift + p
- 在任意面板按下这三个键,会弹出功能列表,可以快捷的跳转到某些面板、使用某些功能等
-
Show paint rectangles
- 高亮显示页面哪个区块在渲染
-
screenshot
- 对某个dom节点/全屏进行截图