您当前的位置:首页 > 电脑百科 > 软件技术 > 应用软件

一文带你详解 Chrome F12 Network 选项

时间:2021-08-26 13:49:36  来源:  作者:柠檬班软件测试

Chrome F12 介绍

 

Chrome 开发者工具 F12 是前端开发、测试人员的利器,使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。

其中的 Network 类似与 fiddler 抓包工具,能够获取请求、响应、缓存等等内容。

接下来介绍下 Network,来吧。

界面介绍

 

1,界面总览

纯干货!一文带你详解 Chrome F12 Network 选项

 

2,记录请求

开启按钮时记录所有请求,关闭按钮时不会记录

纯干货!一文带你详解 Chrome F12 Network 选项

 

3,清除请求

清除按钮,清除所有记录的请求

 

4,过滤请求

 

过滤器,能够自定义筛选条件,也可以选择预定义的过滤方式

  • 自定义条件
纯干货!一文带你详解 Chrome F12 Network 选项

 

  • 预定义的过滤
纯干货!一文带你详解 Chrome F12 Network 选项

 

ALL:显示所有请求
XHR:显示AJAX异步请求
JS:显示js文件
css:显示css文件
Img:显示图片
Media:显示媒体文件,音频、视频等
Font:显示Web字体
Doc:显示html
WS:显示websocket请求
Other:显示其他请求

 

5,保留请求记录

 

勾选之后,刷新页面不会清空之前的请求记录,下面是连续刷新两次页面结果

纯干货!一文带你详解 Chrome F12 Network 选项

 


纯干货!一文带你详解 Chrome F12 Network 选项

 

6,是否进行缓存

 

当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从 Status 栏的状态码看文件请求状态。

 

7,弱网设置

 

设置模拟限速,如下图所示。

纯干货!一文带你详解 Chrome F12 Network 选项

 

8,网络设置

 

caching:缓存设置

Network throttling :弱网设置

User agent:属于 http 请求头一部分。表示所用浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。

Accepted Content-Encodings:服务端压缩格式

纯干货!一文带你详解 Chrome F12 Network 选项

 

9,右键界面

纯干货!一文带你详解 Chrome F12 Network 选项

 

Open in new tab:在新的标签中打开链接

Clear browser cache:清空浏览器缓存

Clear browser cookies:清空浏览器cookies

Copy:复制

Block request URL:拦截当前请求url

Block request domian:拦截当前域名下所有请求

Replay XHR:重新请求AJAX

Sort By:排序请求

Header Options:显示请求头选项

Save all as HAR with content:保存所有请求为.har文件

 

10,copy

纯干货!一文带你详解 Chrome F12 Network 选项

 

Copy Link Address:复制资源url到系统剪贴板

Copy Response:复制HTTP响应

Copy stack trace:复制堆栈信息

Copy as PowerShell:复制请求PwoerShell代码

Copy as fetch:复制请求fetch代码

Copy as Node.js fetch:复制请求Node.js fetch代码

Copy as cUrl(cmd):复制请求cUrl 命令代码

Copy as cUrl(bash):复制请求cUrl 命令代码

Copy all as PowerShell:复制所有请求PwoerShell代码

Copy all as fetch:复制所有请求fetch代码

Copy all as Node.js fetch:复制所有请求Node.js fetch代码

Copy all as cUrl(cmd):复制所有请求cUrl 命令代码

Copy all as cUrl(bash):复制所有请求cUrl 命令代码

Copy All as HAR:复制所有请求HAR文件



Tags:Chrome   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  Tags: Chrome  点击:(7)  评论:(0)  加入收藏
年末,又到了各大厂商盘点年度最佳的时候了。不过让世超感到意外的是 Google 竟然给自己 Chrome 的插件,做了一个 2021 年精选集锦,挑选出了 13 款今年最热门的 Chrome 插件。...【详细内容】
2021-12-13  Tags: Chrome  点击:(19)  评论:(0)  加入收藏
谷歌访问助手插件是专门针对chrome谷歌浏览器而开发的一款访问插件,可以为谷歌搜索,谷歌chrome商店,gmail邮箱提供加速服务,解决打不开的问题。这款插件可以帮助我们在使用谷歌...【详细内容】
2021-12-03  Tags: Chrome  点击:(12)  评论:(0)  加入收藏
你在用的浏览器又更新了——本次 Chrome 95 稳定版为标签页分组新增了保存功能,Edge 95 稳定版则带来了更适合笔记本用户的高效能模式和 PDF 阅读体验改进。除此之...【详细内容】
2021-10-27  Tags: Chrome  点击:(41)  评论:(0)  加入收藏
小编在这里为您提供帮助。通过以下几个步骤卸载 Google Chrome 并从 Mac 中删除其所有数据。以下是一些简单的说明。一起啦看看吧!卸载 Google Chrome 应用程序之前从 Mac 上...【详细内容】
2021-10-20  Tags: Chrome  点击:(62)  评论:(0)  加入收藏
尽管 Google Reader 已经被弃用,但是它的精神仍得以延续,Android 端 Chrome 浏览器现在可以使用 RSS 追踪功能了。该功能于今年 5 月开始测试,仅限于 Chrome Canary 频道版本,不...【详细内容】
2021-10-09  Tags: Chrome  点击:(42)  评论:(0)  加入收藏
Chrome F12 介绍 Chrome 开发者工具 F12 是前端开发、测试人员的利器,使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。其中的 Network 类似与 fiddle...【详细内容】
2021-08-26  Tags: Chrome  点击:(152)  评论:(0)  加入收藏
出品|开源中国文|御坂弟弟Google 在最新发布的 Chrome 浏览器中增加了一批新的 Chrome Actions,以便对该功能进行早期测试。Chrome Actions 是其最近推出的一项实验性功能,它...【详细内容】
2021-05-28  Tags: Chrome  点击:(171)  评论:(0)  加入收藏
Chrome 浏览器快捷命令命令列表 不知道或者忘记了命令怎么办,别急下面这条命令就是来拯救你的,只要记住这一条,就相当于记住了所有的命令,在 地址栏 中 输入下面的指令便可看到...【详细内容】
2021-05-19  Tags: Chrome  点击:(145)  评论:(0)  加入收藏
谷歌去年在 Android 版 Chrome 浏览器上引入了对“往返缓存”的支持,当用户点击后退或前进按钮时,可以瞬时加载页面。据外媒 Windows Latest 报道,谷歌 Chrome 92 版本已添加了...【详细内容】
2021-05-14  Tags: Chrome  点击:(182)  评论:(0)  加入收藏
▌简易百科推荐
ACDSee Pro 2.5 和ACDSee 2009(也就是 ACDSee 11)这两个版本,虽然图标最丑,但却是最适合目前使用的版本。(以前的ACDSee 3.1是第三方改装版,现在出现不稳定了,经常提示插件错误,虽...【详细内容】
2021-12-27  周星骋Cheng    Tags:ACDSee   点击:(2)  评论:(0)  加入收藏
IT之家 12 月 23 日消息,百度地图今日宣布,第二代车道级导航正式上线。据介绍,百度地图第二代车道借助北斗 + 5G,在实现全程车道级导航效果的基础上,全面升级最优车道推荐、全 /...【详细内容】
2021-12-24  IT之家    Tags:百度地图   点击:(10)  评论:(0)  加入收藏
推荐12款不用安装就能免费用的神仙软件,每一款都是百里挑一! 一、文件存储与传输1.不限量网盘地址:https://transferkit.io/一个在线云存储网盘,它提供了不限量的云存储空间,单文...【详细内容】
2021-12-17  牛片网    Tags:软件   点击:(15)  评论:(0)  加入收藏
古人说:凡事预则立不预则废,对于我们当代人来说,做好工作计划,更是职场人高效工作的第一步,所以计划对于我们的重要性不言而喻…… 工作表格模板汇总正是因为有了工...【详细内容】
2021-12-15  吴六柒    Tags:工作表格   点击:(32)  评论:(0)  加入收藏
当我们浏览知乎、Youtube、贴吧、CSDN等等,总会遇到服务商一些广告;复制文章的时候,剪切板总是自带一些版权信息;还有一些网页配色很亮,眼睛看着很不舒服。反正就是各种不爽。给...【详细内容】
2021-12-08  小皮虾Pro    Tags:浏览器   点击:(27)  评论:(0)  加入收藏
来源:AirPython作者:星安果 1. 前言大家好,我是安果!之前推荐过很多优秀的 Web 自动化工具,比如:Selenium、Helium、Cypress、Pyppeteer 等利用它们实现自动化的前提是必须安装依...【详细内容】
2021-11-30  CDA数据分析师    Tags:Automa   点击:(30)  评论:(0)  加入收藏
概述superset是由Airbnb开源的轻量级BI分析工具。主要有三大功能:使用数据可视化来探索你的数据,通过交互式的Dashboard来查看你的数据,通过Sql Lab来编写sql查询你的数据。特...【详细内容】
2021-11-30  新视像    Tags:Superset   点击:(21)  评论:(0)  加入收藏
媒体爆料称:近期,老牌音乐播放器Winamp宣布回归,官方网站也大改后重新上线。官方表示:不只是简单更新而是全面重制。新的Winamp 将推出适用于 Windows、macOS 和移动平台的多合...【详细内容】
2021-11-26    中关村在线  Tags:Winamp   点击:(23)  评论:(0)  加入收藏
新版高德地图上线 ADAS 预警导航功能,借助视觉 AI 技术,可智能识别前方车辆、行人,并提供碰撞预警、车道偏离等多种安全提醒,防止风险的发生。 在小联的调研中,只有6%的车机体验...【详细内容】
2021-11-23  手机互联    Tags:高德地图   点击:(143)  评论:(0)  加入收藏
朋友委托我帮忙看看可用邮箱大全有哪些?好用的企业邮箱是多少?他公司要开通企业邮箱。相信很多公司在考虑开通企业邮箱时,都会遇到这样的问题,企业邮箱哪个好?怎样选择合适的企业...【详细内容】
2021-11-11  超级打工人    Tags:企业邮箱   点击:(30)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条