Chrome DevTools 小功能集锦

Range 请求分片

Network 过滤器

输入一个 <font style="color:rgb(37, 41, 51);">-</font> 就会提示所有；这些过滤器都可以组合，只要中间加个空格就行；取反的话前面加个 - 就行咯

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

Network 自定义展示列

reply XHR

当你想重新发送一次 XHR 请求的时候，不用刷新页面，直接点击 replay XHR 即可：

请求定位到源码

当你想知道某个请求是在哪里发的，可以打开 Network 面板，在每个网络请求的 initiator 部分可以看到发请求代码的调用栈，点击可以快速定位到对应代码。

group by folder (平铺资源)

ctrl + p 控制台搜索文件也很常用

网页加载的文件默认是按照域名和目录组织的，找文件时一层层找起来比较麻烦。

这时候可以切换为平铺的，会按照 js、css、图片的顺序列出来，找某个文件就容易多了：

代码手动关联 sourcemap (调试线上)

sources 面板可以右键点击 add soruce map，输入 sourcemap 的 url 就可以关联上 sourcemap，当调试线上代码的时候可以用这种方式关联源码。

developer resources （显示被过滤的开发资源请求，比如sourcemap）

看到 sourcemap 有的同学可能会问，对了，sourcemap 文件为啥在 Network 里看不到呢？

明明会下载 sourcemap 文件，为啥我从来没看到过呢？

其实这个被 Network 过滤掉了，想看到这些文件的请求在另一个地方：

点击 show console drawer：

打开 developer resources:

就可以看到所有的 sourcemap 请求了：

只不过这部分做的很简陋，只能看 sourcemap 文件请求成功、失败之类的。

remove event listeners （可用于检查悬浮窗口）

直接检查悬浮窗口

element 面板选中元素可以看到这个元素和它的父元素的所有事件监听器：

可以手动 remove。

比如你想看下拉菜单的样式，但是鼠标一移开就消失了

这时候你可以删掉这个按钮的 mouseleave 事件的监听器：

这样移开鼠标也不会消失了：