实用 Chrome DevTool Tips

9,416

作为前端工程师,我们每天的工作离不开Chrome,特别是Chrome 的 DevTools,提供了很多强大实用的功能,熟练掌握这些工具,能够为我们的日常开发和调试工作节省大量时间,提高效率。

目前网络上有很多此类介绍 chrome 开发者工具的文章,但是大多只是功能的陈述,没有结合实际的使用场景,导致看完之后,不知道能运用在什么场景下,过几天就忘了。

本文尝试通过结合实际开发经验,来为大家介绍一些常用的 chrome 开发者工具的使用,希望能够帮助到大家。

Console

  • 在任意面板唤起 console

    • Ctrl + `
    • 使用场景:console 是我们最常用的面板,我们可能在其他的面板下调试代码时需要使用到console。如果直接点击 console 面板来回切换的话,效率不高,可以直接用快捷键唤起 console,并且能够保留当前正在查看的面板。

quickOpenConsole.gif

  • $0 $1 $_

    • $0: 引用最后一次选中的dom节点
    • $1: 引用倒数第二个选中的dom节点
    • $_: 引用 console 中上一个表达式返回的值
    • 使用场景:在 console 中我们可能经常要尝试一些功能,写一些测试代码。$0 和 $1 能够让我们快速选中 dom 节点,对选中的 dom 做些操作。$_ 方便我们在没有给返回值赋给变量,但又需要引用这个值的情况使用。

$0.gif

$_.gif

  • store as global variable

    • 当你想将某些值存储到变量(接口请求、返回参数,dom节点,debug时的某些变量)在console面板使用时
    • 当你在 console 打印出一些库的对象时,使用 store as global variable 后能够直接调用这些库的方法,比如 moment、antd 的 form 等

sag.gif

  • copy()

    • 帮你快速的 copy 一些 console 中的变量

copy.gif

Elements

  • computed style

    • 当项目变得复杂时,一个节点上的样式可能会受到多处代码的影响,computed style 能够查看真正使它生效的 CSS 样式

  • Break on

    • 当 DOM 状态变化时打断点
    • 使用场景:在中后台项目中经常会基于 antd 的组件做一些改造,以 Dropdown Menu 举例,我们想自定义改造组件下拉的内容,来满足我们的需求。这时候如果直接使用检查元素来修改,会发现鼠标一旦移开后下拉就会收起,造成了调试的麻烦。这个时候就很适合使用 Break on 这个功能

break on.gif

  • 提取节点样式

    • 右击节点 👉 copy 👉 copy styles

Network

  • 禁用网络缓存

    • 当新内容发布后,页面始终展示的还是旧的内容时使用(开发调试时最好一直将其勾选)
    • Network 👉 Disable cache

截屏2021-07-03 下午10.05.49.png

  • 网络节流(模拟弱网环境)

    • 当开发移动端应用时,查看应用在弱网环境下是否还能够有较好的加载速度

截屏2021-07-03 下午10.08.34.png

  • Block url

    • 阻止某个url的请求(当你不得不在线上debug时,把某些写操作的请求给阻止,如表单提交等)

  • advanced filter

    • 对网络请求进行更精细的筛选

  • is:from-cache

    • 查看哪些请求是走缓存的
  • has-response-header:

    • 筛选出包含某些请求头的接口
  • larger-than:

    • 查看有哪些请求体积过大,便于分析性能、优化拆包等
  • method:

    • 只查看某种方法的网络请求(POST/GET)
  • 太多了记不住?

    • 在筛选框里输入英文首字母,浏览器会为你自动提示这些选项

hint.gif

  • Header options

    • 在network 面板,右击,可以选择在network面板中要展示的内容(cookie,cache-control)
    • 可以将接口某个自定义的 header 展示出来,如我们常见的 x-tt-logid,这样就能很方便的将有问题的接口的 logid 快速的 copy 给后端同学了

x-tt-logid.gif

Sources Panel

  • Conditional breakpoints

    • 当我们在某处打了个断点,却只想在某些情况下触发时使用
    • 使用场景:当我们打断点调试react代码时,经常会遇到state变化导致页面多次触发 render,从而一直触发断点,而我们只想在特定条件才想断点的情况。下面这个例子示范了如何只在num有值的情况下才断点

cdb.gif

  • Blackbox(add script to ignore list)

    • 跳过工具库的代码(在调用栈上不显示react、react-dom等工具库的函数)

  • Pause on exception

    • 当出现抛错❌ 的时候断点
    • 使用场景:当代码因为某些情况(接口数据异常、访问了 undefined 等)导致页面白屏,可以使用此方法在出现异常的上下文环境查看导致异常的原因

throw.gif

  • Never Pause Here

    • 当你在某处打了断点,但是你暂时不想关心这里的具体情况时
    • 结合上面说到的 Pause on exception,如果开启这个的话会在任何有抛错的地方打断点,但有时候像一些老项目里有很多报错,但是不影响正常逻辑时,我们可以用这个方法忽略这个断点

image.png

  • Code Folding

    • Cmd + shift + p 👉 Code Folding
    • 线上查看代码时,可以将函数体收起

Other

  • Cmd + shift + p

    • 在任意面板按下这三个键,会弹出功能列表,可以快捷的跳转到某些面板、使用某些功能等
  • Show paint rectangles

    • 高亮显示页面哪个区块在渲染
  • screenshot

    • 对某个dom节点/全屏进行截图

final.gif