作为前端工程师,咱们每天的作业离不开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