实用 Chrome DevTool Tips

做为前端工程师，咱们天天的工做离不开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节点/全屏进行截图