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