【Chrome控制台】network选项卡的使用

最新推荐文章于 2024-06-01 10:00:00 发布
最新推荐文章于 2024-06-01 10:00:00 发布
阅读量2.9k 收藏 7
点赞数 8
分类专栏： Chrome 文章标签： chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owo_ovo/article/details/137040739
版权

首先打开调试面板「windows:F12；mac：command+option+i」，找到Network选项卡，其中是对网络相关的数据信息。

录制

控制台内容区域左上角红色按钮就是录制按钮，默认是开启状态，表示监听整个页面运行过程中所产生的所有网络请求，一般不需要关闭。

在这里插入图片描述

清空

录制按钮右侧的是清空按钮，点击后，会清空目前监控到的所有网络请求。

在这里插入图片描述

筛选

清空按钮右侧的是筛选按钮，默认为开启状态。

在这里插入图片描述

开启后，下方会多出几种选项，可以根据选项进行筛选。

在这里插入图片描述

搜索

通过搜索功能可以快速查找到对应请求

在这里插入图片描述

持久日志

选中Preserve log后，将开启持久日志：刷新页面后，不清空日志。

在这里插入图片描述

禁用缓存

未开启前，很多请求都走了磁盘缓存，开启后不再使用缓存。

在这里插入图片描述

限流器

可以模拟网络速度，默认有快3G、慢3G以及离线三个选项。

在这里插入图片描述

请求详情

点击某请求信息后，Headers选项卡中可以看到「头信息」。

在这里插入图片描述

Payload选项卡可以查看请求相关参数。

在这里插入图片描述

Preview选项卡可以对相应数据进行预览

在这里插入图片描述

Response选项卡表示服务器返回的原始数据。

在这里插入图片描述

Response返回的原始数据类型目前只支持纯文本，不支持二进制格式。

在这里插入图片描述

Initiator选项卡 ：请求的发起者

在这里插入图片描述

Timing选项卡：请求的耗时

Queueing对应排队时间：对同一域的请求，开辟的TCP连接数量有限，在同一TCP连接中，只能进行排队。

Resource Scheduling：以下的时间只是进入队列的时间，并不是排队所耗费的总时间。

在这里插入图片描述

Connection Start：连接开始

Stalled失速造成时间消耗，具体是因为前方有请求排队，造成了拥堵。

在这里插入图片描述

Request/Response：请求响应时间

  • Request sent：浏览器将请求封装起来通过网络关口发出的耗时。
  • Waiting for server response：等待服务器响应的耗时，此时直接收到了响应头信息，并没完全接收到相应数据。
  • Content Download：内容下载时间。

在这里插入图片描述

Connection ID：如果ID相同，表示请求共用的同一TCP信道。

在这里插入图片描述

Waterfall：请求执行的先后顺序

有红蓝两条竖线，其中蓝色表示：DOMContentLoaded；红色表示：Load。

在这里插入图片描述

田本初
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端-chromeF12 谷歌开发者工具详解 Network篇
m0_57077948的博客
04-12 1327
那我就按照从左到右的顺序来写啦~记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。也可以是一些指定条件指定条件有哪些？domain：资源所在的域，即url中的域名部分。如 domain:api.github.com。
001-谷歌浏览器控制台使用
loveEveryWeb的博客
05-06 4176
谷歌浏览器控制台使用1. 使用说明2. 整体布局介绍3. Element3.1 页面元素查找&修改css样式3.2 操作HTML元素4. Console4.1 日志打印4.2 代码编辑器5. Sources6. Network6.1 接口状态码6.2 接口传参&数据返回7. Application -- 浏览器存储7.1 cookie 存储7.2 localStorage存储7.3...
chrome 控制台 功能介绍
09-21
chrome 控制台 中文 使用方法 来自google官方网站
网络调试利器：Chrome Network工具的详细指南
最新发布
霍格沃兹测试学院的博客
06-01 1178
作为测试工程师，熟练使用Chrome开发者工具中的Network工具可以极大地提升我们调试和分析Web应用的能力。Network工具用于监视网络活动，包括HTTP请求、响应、资源加载时间和数据传输量等。本文将详细介绍如何使用这个强大的工具来进行网络分析和调试。过滤器栏：用于过滤显示的请求，可以根据不同条件（如类型、方法、状态码等）筛选。请求列表：显示所有捕获的网络请求，包括请求的URL、方法、状态码、类型、时间等。
前端Chrome控制台调试技巧，超级有用（2024-6-1）
hap1994的博客
06-01 1447
console占位符描述%cCSS样式占位符，值就是CSS样式，如下示例，可用来自定义log的样式%oor%O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。%dor%i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。%s打印字符串。%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10image.png。
这才是 Chrome 控制台的正确使用方法！太重要了！
奎特尔星球
09-26 6839
Chrome 控制台是很多开发者的必备工具之一，但你真的掌握了它的精髓吗？是否还是全靠 console.log() 排查问题？其实，控制台的功能远比这更强大，用好控制台，能帮助我们更加准确高效地发现问题、定位问题，让 bug 无所遁形。今天就同大家分享一下我自己常用的Chrome 控制台调试功能及使用方法，希望能帮助大家的 Cocos Creator 项目在 Chrome 控制台更好地进行调试。...
浏览器控制台Network面板简述
热门推荐
麦穗的博客
09-01 1万+
浏览器控制台Network面板简述如何打开NetWork面板控制台Network的作用面板组成请求列表请求列表每列：查看单个资源的详细信息查看HTTP头信息General部分：Response Headers（响应头）部分:Request Headers （请求头）部分： 如何打开NetWork面板 打开控制台方法： 在所在浏览的网页上，鼠标右键—>检查，或者直接按下F12键。如果F12这时去调节亮度了，那么就尝试按键盘上Fn+F12同时，这个时候就可以打开控制台了。再切换到第4个目录就可以看到Net
谷歌浏览器F12开发者工具NETWORK的用法详解
winkexin的博客
05-17 7225
谷歌浏览器开发者工具中的Network是前端,程序等相关开发者经常用到的,那么你都知道他们每个功能的意义吗?相信读了这篇文章,将会对你的工作带来事倍功半的效果因本人经常有360极速浏览器,谷歌内核,所以本文以360极速浏览器的开发者工具Network为例,基本和谷歌的Network一致看接口的返回值看接口的请求头，响应头查看资源的加载速度查看资源的大小，缓存情况，响应情况（cdn、waiting 等时间）功能区 2.筛选区(功能区漏斗需要开启) 3.快照区(功能区需要打开屏幕捕获)
F12控制台学习之network
qq_45169795的博客
05-18 2939
控制台之network简学
谷歌浏览器控制台调试器的基本使用方法，常用方法必备,手把手教学
海贼王某人的博客
01-17 1万+
谷歌浏览器控制台调试器的基本使用方法，常用方法必备,手把手教学
谷歌浏览器--控制台(console)调试--使用/教程/实例
IT利刃出鞘的博客
11-07 1万+
原文网址： 简介 说明 本文用示例介绍浏览器使用控制台（console）调试前端的方法。 Console API提供了允许开发人员执行调试任务的功能，Console对象提供了浏览器控制台调试的接口。浏览器都实现了这个接口，比如：谷歌浏览器、火狐浏览器、360浏览器、Safari浏览器、IE浏览器等等。也就是说：所有浏览器都可以用console进行调试。 官网 MDN：Console - Web API 接口参考 | MDN 谷歌浏览器：https://devel...
Chrome控制台使用详解.pdf
05-22
Chrome控制台使用详解.pdf 介绍在chrome浏览器调试javescript的使用方法
如何使Chrome控制台支持多行js模式——意外发现
10-27
一直以来，Chrome控制台都缺少象IE调试台那样的多行执行模式,今天意外发现Chrome其实也支持多行模式
chrome-console:PubNub Chrome 控制台
06-21
PubNub Chrome 控制台第 1 步：克隆此存储库 git clone https://github.com/pubnub/chrome-console.git第 2 步：加载解压后的扩展在 Chrome 中，打开 chrome://extensions/ 点击+开发者模式单击加载解压缩的扩展程序...
amCoffee：Chrome控制台的CoffeeScript版本
02-02
描述中提到的 "Chrome控制台的CoffeeScript版本" 表明amCoffee这个工具让开发者能够在Chrome的开发者工具（Console）中使用CoffeeScript语言进行调试和交互。这对于习惯于CoffeeScript语法的开发者来说是一个非常...
Chrome控制台妙用之定位xpath_js_css居家必备好工具
08-10
Chrome浏览器的控制台是开发者日常工作中不可或缺的工具，尤其对于Java和Vue等前端开发者来说，它提供了丰富的功能，包括网络请求分析、元素检查...后续的文章将会继续分享更多关于Chrome控制台的使用技巧和实战案例。
chrome浏览器Network重放重新发送网络请求方法
03-11 3693
1. 打开Chrome浏览器，并进入需要重放HTTP请求的网页。2. 在Chrome浏览器中，按下“F12”键，或者点击菜单栏中的“更多工具” -> “开发者工具”，打开开发者工具面板。3. 在开发者工具面板中，选择“Network”选项卡，在该选项卡下，可以看到所有的HTTP请求和响应信息。4. 找到需要重放的HTTP请求，右键点击该请求，并选择“Replay XHR”选项，即可重放该请求。
如何正确的使用 Chrome 的控制台 - Network 面板
七号空间
07-21 2373
认识Network 面板 阻止使用缓存 显示前一个页面的请求+ 在我们使用控制台调试web应用时经常会观察在跳转页面前浏览器发送了那些请求完成了什么操作。但是通常浏览器在完成页面跳转时会重新刷新请求列表。 自定义请求网络 模拟不同网络情况下的请求。 过滤器 属性 domain: 仅显示来自指定域的资源。你可以使用通配符字符(*)纳入多个域 has-response-header: 显示包含指定 HTTP 相应头的资源 is: 使用 is:run...
chrome 控制台network请求过多，过滤一些不需要的接口
hap1994的博客
03-15 1025
控制台network中查看接口调用信息，会显示很多的css和js文件，过滤掉一些不需要的文件只显示我们需要的接口。在filter输入框中输入-.s3mb -.css -.json （中间是空格）即可过滤掉 s3mb，js，css后缀文件。
chrome控制台模拟按键
08-11
回答: 在Chrome控制台中模拟按键事件可以使用JavaScript的KeyboardEvent对象来实现。您可以创建一个KeyboardEvent对象，设置相关属性，然后使用dispatchEvent方法触发事件。例如，您可以使用以下代码在控制台中模拟按下Enter键： ``` var event = new KeyboardEvent('keydown', { key: 'Enter' }); document.dispatchEvent(event); ``` 这段代码会在当前页面中触发一个模拟按下Enter键的事件。您也可以根据需要修改key属性的值来模拟其他按键。请注意，此方法在最新的Chrome浏览器中仍然有效，但是一些过时的方法（如UIEvent.initUIEvent和KeyboardEvent.initKeyEvent）已经被废弃，推荐使用最新标准的KeyboardEvent实现。123 #### 引用[.reference_title] - *1* *2* [Chrome 控制台 JavaScript 模拟键盘事件输入 最新有效](https://blog.csdn.net/tonglingtou1875/article/details/117160048)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [chrome浏览器控制台创建js脚本并执行](https://blog.csdn.net/weixin_42363510/article/details/111990520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值