chrome开发者工具网络请求过滤

简介: chrome开发者工具,会列出所有的网络请求,网络请求太多的时候,如何准确过滤出我们需要的网路请求呢?

1.JPG

前言



chrome开发者工具,会列出所有的网络请求,网络请求太多的时候,如何准确过滤出我们需要的网路请求呢?


我们以 www.aliyun.com/ 网址为例,一起来看看五种过滤方式。


文本过滤


比如过滤出请求路径包含index.js的请求。


2.JPG


正则表达式


查看png和gif图片 /.*png|.*gif/


3.JPG


exclude


语法 -文本

过滤掉所有包含文本的文件, 多个条件空格连接。


比如,下面过滤条件 -.css -.js, 表示过滤掉请求路径包含.css和包含.js的请求。

4.JPG


属性过滤


domain:at.alicdn.com 表示只显示请求域名在at.alicdn.com下的请求。


5.JPG


那怎么获取所有的属性过滤器呢? 输入如下符号就能获取所有的

-

6.JPG


资源类型


这个是我们用的最多的方式,选择某个类别的请求, 比如下面就只看 Fetch/XHR的请求。


7.JPG


唯一说一下的就是, 可以 ctrl + click进行多选


8.JPG


写在最后



不忘初衷,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。


技术交流群请到 这里来。 或者添加我的微信 dirge-cloud,一起学习。

相关文章
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
105 1
|
6月前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
|
7月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
90 0
|
4月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
5月前
|
缓存 安全 Web App开发
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
|
5月前
|
Web App开发 存储 缓存
Chrome开发者工具学习
Chrome开发者工具学习
|
6月前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
|
Web App开发 缓存 网络协议
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
400 0
浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
|
Web App开发 前端开发 搜索推荐
chrome 开发者工具——前端实用功能总结
chrome 开发者工具——前端实用功能总结
183 0
|
Web App开发 SQL 编解码
04-Chrome开发者工具使用教程
04-Chrome开发者工具使用教程

热门文章

最新文章