【调试】Chorme Devtools 小功能合集

228 阅读1分钟

1、 当你想重新发送一次XHR请求的时候,不用刷新页面,直接点击 Replay XHR

image.png

2、Network 自定义展示列

image.png

Waterfall 下拉可以选择总共的花费时间

image.png

3、NetWork 过滤器

之前就知道根据url来过滤,实际过滤器有很多种

image.png

  • has-response-header:过滤响应包含某个 header 的请求
  • method:根据 GET、POST 等请求方式过滤请求
  • domain: 根据域名过滤
  • status-code:过滤响应码是 xxx 的请求,比如 404、500 等
  • larger-than:过滤大小超过多少的请求,比如 100k,1M
  • mime-type:过滤某种 mime 类型的请求,比如 png、mp4、json、html 等
  • is:过滤某种状态的请求,比如 from cache 从缓存拿的,比如 running 还在运行的
  • resource-type:根据请求分类来过滤,比如 document 文档请求,stylesheet 样式请求、fetch 请求,xhr 请求,preflight 预检请求
  • cookie-name:过滤带有某个名字的 cookie 的请求
  • cookie-path
  • cookie-value
  • cookie-domain

以上也不用记,输入- 就可以看到全部的提示

image.png

但是-减号要去掉,它代表着非的意思,和右侧的 invert 是一个意思

4、 remove event listeners

移除这两个事件, 鼠标悬浮上去也不会离开。但是这种情况,你得清楚,当悬浮上去,出现下拉列表是什么时间,不一定是mouseleave, 比如我在 ant-design 就没找到类似,暴力一点的话,直接让它display:block

image.png

5、请求定位到源码

image.png

image.png