听说你不会在chrome浏览器下进行调试?这篇文章教懂你

编辑:kunyu 日期:2021-01-07

1.如何打开

无论是在Windows还是Mac,都可以使用(FN)+F12键打开Chrome的Network面板。

2.面板组成

如图所示,Chrome的Network面板主要由5个部分组成,包括控制器、过滤器、概览、请求列表、概要,下面简单介绍下这5个部分的作用。

控制器:控制面板的外观与功能

过滤器:过滤请求列表中显示的资源

  • 按住Command(Mac)或Ctrl(Window/Linux),然后点击过滤器可以同时选择多个过滤器。


概览:显示HTTP请求、响应的时间轴。

请求列表:默认时间排序,可选择显示列。

概要:请求总数、总数据量、总花费时间等。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



3.控制器

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



模拟慢速网络

听说你不会在chrome浏览器下进行调试?这篇文章教懂你

还可以自定义,点击Add…

听说你不会在chrome浏览器下进行调试?这篇文章教懂你


4.过滤器

如何对请求进行过滤呢?

4.1按字符串

1.键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下,与过滤器匹配的唯一文件是PNG图像。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



2.类型/.*\.[cj]s+$/。DevTools过滤掉任何资源,其文件名不以a j或c后跟1个或多个s字符结尾。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



3.类型-main.css。DevTools过滤掉了main.css。如果任何其他文件与模式匹配,它们也将被过滤掉。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



4.2按类型

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



  • XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifest或Other(此处为列出的任何其他类型)

  • 多个类型,按住Command(Mac)或Ctrl(Windows、Linux)

  • 按时间过滤:概览面板,拖动滚动条

  • 隐藏Data URLs:CSS图片等小文件以 BASE64 格式嵌入HTML中,以减少HTTP请求数。

4.3属性过滤

下面演示使用Filter过滤器,如图所示:

听说你不会在chrome浏览器下进行调试?这篇文章教懂你


  • domain:仅显示来自指定域的资源。您可以使用通配符字符(*)纳入多个域

  • has-response-header:显示包含指定HTTP响应标头的资源

  • is:使用 is:running 可以查找 WebSocket 资源,is:from-cache 可查找缓存读出的资源

  • Larget-than:显示大于指定大小的资源(以字节为单位)。将值设为1000等同于设置为1k

  • method:显示通过指定 HTTP 方法类型检索的资源

  • mime-type:显示指定 MIME 类型的资源

  • mixed-content:显示所有混合内容资源(mixed-content:all),或者仅显示当前显示的资源(mixed-content:displayed)

  • scheme:显示通过未保护HTTP(scheme:http)或受保护 HTTPS(scheme:https)检索的资源。

  • set-cookie-domain:显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。

  • set-cookie-name:显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。

  • set-cookie-value:显示具有 Set-Cookie 标头并且值与指定值匹配的资源。

  • status-code:仅显示 HTTP 状态代码与指定代码匹配的资源。

多属性间通过空格实现 AND 操作。

5.请求列表的排序

  1. 时间排序,默认

  2. 按列排序

  3. 按活动时间排序

  • Start Time:发出的第一个请求位于顶部

  • Response Time:开始下载的第一个请求位于顶部

  • End Time:完成的第一个请求位于顶部

  • Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部

  • Latency:等待最短响应时间的请求位于顶部

6.请求列表

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



简单介绍下每列的含义:

Name:资源的名称

Status:HTTP状态代码

Type:请求的资源的MIME类型

Initiator:发起请求的对象或进程。它可能有以下几种值:

  • Parser(解析器):Chrome的 HTML 解析器发起了请求(鼠标悬停显示JS脚本)

  • Redirect(重定向):HTTP重定向启动了请求

  • Script(脚本):脚本启动了请求

  • Other(其他):一些其他进程或动作发起请求,例如用户点击链接跳转到页面或在地址栏中输入网址。

Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小

Time:总持续时间,从请求的开始到接受响应中的最后一个字节

Waterfall:各请求相关活动的直观分析图

鼠标右键单击,添加其他列:

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



还可以自定义header头:

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



7.预览请求内容

如图所示,在请求列表点击以下

听说你不会在chrome浏览器下进行调试?这篇文章教懂你


功能包括:

  • 查看头部,包括请求头、响应头。

  • 查看Cookie

  • 预览响应正文:查看图像用

  • 查看响应正文

  • 时间详细分布

  • 导出数据为HAR格式

  • 查看未压缩的资源大小:Use Large Request Rows

  • 浏览器加载时间(概览、概要、请求列表)DOMContentLoaded 事件的颜色设置为蓝色,而load事件设置为红色

  • 将请求数据复制到剪贴板

  • Copy Link Address:将请求的网址复制到剪贴板

  • Copy Response:将响应包体复制到剪贴板

  • Copy as cURL:以 cURL 命令形式复制请求

  • Copy All as cURL:以一系列 cURL 命令形式复制所有请求

  • Copy All as HAR:以 HAR 数据形式复制所有请求

  • 查看请求上下游:按住 shift 键悬停请求上,绿色是上游,红色是下游。

下面演示如何查看请求上下游,首先按住 shift 键,其次移动鼠标到不同请求,如图所示:

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



听说你不会在chrome浏览器下进行调试?这篇文章教懂你



8.浏览器加载时间

触发流程:

  • 解析 HTML 结构

  • 加载外部脚本和样式表文件

  • 解析并执行脚本代码 // 部分脚本会阻塞页面的加载

  • DOM 树构建完成 // DOMContentLoaded 事件

  • 加载图片等外部文件

  • 页面加载完毕 // load事件

9.请求时间详细分布

点击请求列表后,找到Timing,看到如图所示的字段

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



Queueing:浏览器在以下情况下对请求排队

  • 存在更高优先级的请求

  • 此源已打开六个 TCP 连接,达到限值,仅适用于 HTTP/1.0 和 HTTP/1.1

  • 浏览器正在短暂分配磁盘缓存中的空间

Stalled:请求可能会因 Queueing 中描述的任何原因而停止

DNS Lookup:浏览器正在解析请求额IP地址

Proxy Negotiation:浏览器正在与代理服务器协商请求

Request sent:正在发送请求

ServiceWorker Preparation:浏览器正在启动Service Worker

Request to ServiceWorker:正在将请求发送到Service Worker

Waiting(TTFB):浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte(至第一字节的时间)。此时间包括1次往返延迟时间及服务器准备响应所用的时间

Content Download:浏览器正在接收响应

Receiving Push:浏览器正在通过 HTTP/2 服务器推送接收此响应的数据

Reading Push:浏览器正在读取之前收到的本地数据

10.阻止请求

当某些资源不可用时,页面的外观和行为如何?它完全失败了,还是仍然有些功能?阻止要求查找:

1.按Control+ Shift+ P或 Command+ Shift+ P(Mac)打开命令菜单。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



2.键入block,选择“ 显示请求阻止”,然后按Enter。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



3.单击添加模式。

4.类型main.css。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



5.单击添加。

6.重新加载页面。正如预期的那样,页面的样式有点混乱,因为它的主样式表已被阻止。请注意main.css网络日志中的行。红色文本表示资源已被阻止。

听说你不会在chrome浏览器下进行调试?这篇文章教懂你



main.css已被封锁

7.取消选中启用请求阻止复选框。


相关推荐

热门教程

更多
  • UC浏览器电脑版的表单储存路径文件夹位置查找教程
    UC浏览器电脑版的表单储存路径文件夹位置查找教程

    UC电脑浏览器是一款功能齐全的双核浏览器,表单功能是UC浏览器的个强大的功能插件,但是表单功能的储存路径是默认的,有一些用户找不到储存后的位置十分苦恼。因此浏览器部落小编就和大家聊一聊关于UC浏览器电脑版的表单储存路径文件夹位置查找教程。

  • QQ浏览器恢复历史记录操作步骤教程
    QQ浏览器恢复历史记录操作步骤教程

    每个浏览器都有历史记录功能,QQ浏览器也不例外。历史记录的功能是帮助用户找到他们以前浏览过的重要信息。那么,QQ浏览器的历史保存在哪里呢?如果被意外删除,它能恢复吗?针对这个问题浏览器部落小编带来下文关于QQ浏览器恢复历史记录操作步骤教程一起来了解一下。

  • 打开火狐浏览器时弹出两个网页的解决办法及原因分析
    打开火狐浏览器时弹出两个网页的解决办法及原因分析

    想必很多用户在使用火狐浏览器的时候都会遇到这样一个问题,就是在打开火狐浏览器时弹出两个网页。这个问题该如何解决呢?下面小编就带来火狐浏览器弹出两个网页解决方法及原因一览,希望可以帮到您!

  • 如何打开搜狗浏览器中的护眼模式功能【图文】
    如何打开搜狗浏览器中的护眼模式功能【图文】

    有很多用户在使用浏览器的时候都会选择不同的模式和不同的背景颜色,设置成自己喜欢的看起来会觉得更舒服。那么,在搜狗浏览器中的护眼模式应该如何打开呢?接下来,就让浏览器部落小编带大家一起来看看关于如何打开搜狗浏览器中的护眼模式功能。

  • QQ浏览器记住密码的方法|怎么在QQ浏览器中记住密码
    QQ浏览器记住密码的方法|怎么在QQ浏览器中记住密码

    有些网站用户们基本上每天都需要用到,尤其是在工作上,需要通过公司内部网站做事情。但是,每天用QQ浏览器登录的时候,都要输入一遍账号密码,就会显得很麻烦。那么,应该如何让QQ浏览器记住密码呢?针对这个问题,浏览器部落小编带来下文关于QQ浏览器记住密码的方法,一起来了解一下吧。

  • 在搜狗浏览器中如何才能打开小窗口浏览模式
    在搜狗浏览器中如何才能打开小窗口浏览模式

    当我们在使用网页观看视频时还有别的事情要处理,这时候我们不可避免地要来回切换,非常麻烦,因为一个只能显示一个网页,那么我们有什么办法来解决这个问题呢?针对这个问题浏览器部落小编带来下文关于在搜狗浏览器中如何才能打开小窗口浏览模式一起来了解一下。

  • 如何解决搜狗浏览器的网页静音问题
    如何解决搜狗浏览器的网页静音问题

    搜狗高速浏览器是国内最早发布的双核浏览器,许多朋友遇到了搜狗浏览器如何让网页静音的问题。这个问题应该如何解决?针对这个问题浏览器部落小编带来下文关于如何解决搜狗浏览器的网页静音问题一起来了解一下。

  • Edge浏览器如何添加/删除浏览器加载项或工具栏
    Edge浏览器如何添加/删除浏览器加载项或工具栏

    ​有人说一款成功的浏览器必定是一款功能完整的浏览器。Edge浏览器就符合它功能完整的特性,Edge浏览器具有高性能、兼容性强、便捷等特性。但是有的小伙伴不知道Edge浏览器如何添加浏览器加载项。接下来就让浏览器部落小编来带大家看看关于Edge浏览器如何添加 删除浏览器加载项或工具栏。

  • UC浏览器下载网页视频插件的具体方法【图文】
    UC浏览器下载网页视频插件的具体方法【图文】

    使用UC浏览器的用户非常多,大家也经常都会用UC浏览器下载一些自己想看的视频,但是应该如何来下载网页中的视频呢?针对这个问题,浏览器部落小编带来下文关于UC浏览器下载网页视频插件的具体方法,一起来了解一下。

下载排行

更多
  • 1
    傲游浏览器V5.2.5翻墙版下载
    傲游浏览器V5.2.5翻墙版下载

    傲游浏览器V5 2 5翻墙版下载 傲游浏览器是一款高速双核浏览器,它支持网络商店上的所有可用插件和扩展。同时,浏览器还会自动更新,确保您获得所有的最新安全补丁。傲游浏览器具有无痕模式,可以任意穿行于各个网站而不留下痕迹。给予用户浏览网页的同时更好的视觉体验。倘若您喜欢这款浏览器,浏览器部落提供其下载地址。

  • 2
    夸克浏览器官方版下载V1030
    夸克浏览器官方版下载V1030

    夸克浏览器官方版下载V1030是一款浏览器类的软件,专注于搜索和浏览体验,是由原来的极简浏览器更名而来的,目前这款浏览器的所有浏览器书签等内容是可以直接同步的,一直以来都是以轻快为核心,设计风格也比较简约,是目前许多年轻人都在用的潮流浏览器。想要拥有这样的浏览器,就赶紧来下载体验吧。

  • 3
    猎豹安全浏览器2019官方正式版下载
    猎豹安全浏览器2019官方正式版下载

    猎豹安全浏览器是一款可让您更快速、轻松且安全地使用网络的浏览器。同时,浏览器还会自动更新,确保您获得所有的最新安全补丁。并且,具有无痕模式,可以任意穿行于各个网站而不留下痕迹。如果您对这款浏览器感兴趣的话,浏览器部落提供其下载地址。

  • 4
    猎豹浏览器纯净版版下载v1120
    猎豹浏览器纯净版版下载v1120

    猎豹浏览器是一款内存占用极低的智能极速浏览器,它具有速度快、兼容性高、自动更新等特点。同时,尊重您的隐私,不会收集您的任何个人信息。假如您对这款浏览器感到满意的话,浏览器部落提供其下载地址。

  • 5
    知也浏览器1.0.2.28绿色版安全下载
    知也浏览器1.0.2.28绿色版安全下载

    知也浏览器是一款​浏览器是一款小巧、高速、便捷的双核浏览器,知也浏览器的性能高、兼容性强,并且浏览器还有海量的多功能插件,尊重您的隐私,不会收集您的任何个人信息,同时,浏览器还会自动更新,确保您获得所有的最新安全补丁。

  • 6
    小白浏览器官方版下载v10.1.2
    小白浏览器官方版下载v10.1.2

    小白浏览器是一款内存占用极低的智能极速浏览器,它支持最新内核与经典内核完美兼容,带来极速浏览。在浏览网页上,展现更炫酷,更动感,极速浏览的同时也充分保证兼容性。如果您对这款浏览器感兴趣的话,浏览器部落提供其下载地址。

  • 7
    夸克浏览器6.45.22.1103官方绿色下载
    夸克浏览器6.45.22.1103官方绿色下载

    夸克浏览器是一款高速双核浏览器。它支持网络商店上的所有可用插件和扩展,是兼具运行速度快、外观优美且具有卓越性能的浏览器。它有着诸多强大的独立插件、海量界面皮肤,尽可能的满足用户的视觉需求。

  • 8
    傲游浏览器最新高效兼容版下载v1218
    傲游浏览器最新高效兼容版下载v1218

    傲游浏览器是一款具备高效浏览速度及稳定性,使浏览网页更加流畅的浏览器。能够瞬间开启。还提供无痕浏览功能,丰富的人性化功能插件,全新内核和轻薄界面架构造。假如您对这款浏览器感到满意的话,浏览器部落提供其下载地址。

  • 9
    Opera浏览器极速安全版下载v1218
    Opera浏览器极速安全版下载v1218

    Opera浏览器是一款具有无痕模式,可以任意穿行于各个网站而不留下痕迹的浏览器,热门的生活工具软件,功能齐全,操作简单流畅,具备良好的用户体验。尊重您的隐私,不会收集您的任何个人信息。假如您对这款浏览器感到满意的话,浏览器部落​提供其下载地址。

热门资讯

更多
  • 小智双核浏览器功能介绍
    小智双核浏览器功能介绍

    小智双核浏览器,简称双核浏览器,是一款融合了Chromium和Trident浏览器内核引擎于一体的双核浏览器。继承了Chrome浏览器的高速性能和IE浏览器的良好兼容性优点,界面简洁美观,安全、快速。同时还支持多台设备间云同步、鼠标手势等多项功能。用户既能享受到Chrome浏览器一样的速度,也可通过双核引擎实现智能无缝切换,实现畅快的购物、网银支付体验。双核浏览器切换chrome模式非常便捷,需要的用户可以下载小智双核浏览器试用。

  • 使用部分Linux浏览器登录Google账号时受限制
    使用部分Linux浏览器登录Google账号时受限制

    近日,有网友发现自己在使用部分Linux浏览器(如 Konqueror、Falkon和Qutebrowser)登录Google账号时受到了限制,页面显示由于安全原因,无法登录。

  •  谷歌插件“chrome adobe flash player不是最新版本”是怎么回事?
    谷歌插件“chrome adobe flash player不是最新版本”是怎么回事?

    谷歌插件“chrome adobe flash player不是最新版本”是怎么回事?使用谷歌浏览器的时候进行一些图片上传或者其他音视频文件的传输的时候,经常会弹出来这个错误弹窗。那么这是怎么回事呢?接下来小编和大家一起来分享一下解决这个问题的方法吧。

  • chrome浏览器最新标签转移功能一览
    chrome浏览器最新标签转移功能一览

    谷歌chrome浏览器近几天总是常有各种小动作,近期又发出了谷歌Chrome浏览器在研发一个新的功能模块,能够在应用的应用将标签转移到别的的浏览器中应用,还能始终保持初始页面中的文本和全

  • 分享Tampermonkey油猴插件安装使用脚本的方法
    分享Tampermonkey油猴插件安装使用脚本的方法

    分享Tampermonkey油猴插件安装使用脚本的方法。猴软件本来在谷歌浏览器上公布,姓名为Greasemonkey。Chrome上的相近软件就是说Tampermonkey,他们应用的脚本制作是通用性的。Tampermonkey适用Chrome,Microsoft Edge。

  • 微软停止Win7支持,首位Windows看板娘奈奈美宣布毕业
    微软停止Win7支持,首位Windows看板娘奈奈美宣布毕业

    2020年1月14日,微软正式停止对Windows 7的支持服务,同时宣告乐 win7系统时代的终结了。目前,Windows家族首位官方看板娘“窗边奈奈美”也已经在推特上宣布毕业,作为一位十分特别的操作系统萌化代言人,“她”曾经为 win7带来了巨大人气,如今也不得不向大家挥手告别。

  • 最新消息:百度又被行政处罚近5万元 这是怎么回事?
    最新消息:百度又被行政处罚近5万元 这是怎么回事?

    1月9日上午消息,天眼查数据显示,近日,北京百度网讯科技有限公司新增一条行政处罚记录,百度App因通过信息网络向公众提供《乡村无敌小兽医》、《我的美女总裁老婆》、《桃运兵王》等共计15本涉嫌含有禁止内容的网络出版物,存在出版、传播含有《网络出版服务管理规定》第二十五条所述禁止内容的网络出版物的违法行为,被北京市文化市场行政执法总队罚款4 8万元。

  • 火狐Firefox 71浏览器发布:新增画中画支持
    火狐Firefox 71浏览器发布:新增画中画支持

    Firefox 71 现已正式发布。该版本添加了许多新的开发人员工具功能,其中包括 Web 套接字消息检查器,控制台多行编辑器模式,登录事件以及网络面板全文搜索。同时还添加了许多重要的新Web平台功能,例如CSS子网格,列跨度,Promise allSettled 和 Media Session API。

  • Mozilla宣布将让FirefoxReality浏览器加入PicoVR设备中
    Mozilla宣布将让FirefoxReality浏览器加入PicoVR设备中

    花火网消息,Mozilla一直以来都在讲究一种为虚拟现实量身定制的高质量沉浸式浏览器。最近这家公司宣布,要将Firefox Reality浏览器带到Pico最新的6DoF 一体式VR设备Neo 2系列。

本站发布的电脑系统及电脑软件均来源于网络,如侵犯到您的权益,请及时通知我们,我们会及时处理。