Chrome开发者工具详解-Network面板
面板组成
包括控制器、过滤器、概览、请求列表、概要。
- 控制器——控制面板的外观与功能。
- 过滤器——过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
- 概览——显示HTTP请求、响应的时间轴。
- 请求列表
- 默认时间排序，可选择显示列。
- 查看所有的资源请求，包括网络请求，图片资源，html、css、js文件等请求。
- 可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。
- 概要——请求总数、总数据量、总花费时间等。
请求列表
如果选择All，会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息。
请求的相关信息
打开一个Ajax异步请求，可以看到它的请求头信息，是POST请求还是GET请求、参数有哪些、还可以预览它的返回的结果数据，这些数据的使用和查看有利于前端和后端工程师们联调数据，也方便前端直观的分析数据，同时，测试工程师报bug时可以将这些参数截图发给程序猿，帮助他们快速准确定位到bug原因所在，提高沟通的效率。
简单介绍下每列的含义：
Name：资源的名称
Status：HTTP状态代码
Type：请求的资源的MIME类型
Initiator：发起请求的对象或进程，它可能有以下几种值：
- Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
- Redirect（重定向）：HTTP重定向启动了请求
- Script（脚本）：脚本启动了请求
Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。
Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
Time：总持续时间，从请求的开始到接受响应中的最后一个字节
Waterfall：各请求相关活动的直观分析图
鼠标右键单击，添加其他列：
还可以自定义header头
预览请求内容
如图所示，在请求列表点击以下
功能包括：
查看头部，包括请求头、响应头。
查看Cookie
预览响应正文：查看图像用
查看响应正文
时间详细分布
导出数据为HAR格式
查看未压缩的资源大小：Use Large Request Rows
浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色
将请求数据复制到剪贴板
- Copy Link Address：将请求的网址复制到剪贴板
- Copy Response：将响应包体复制到剪贴板
- Cop as cURL：以 cURL 命令形式复制请求
- Copy All as cURL：以一系列 cURL 命令形式复制所有请求
- Copy All as HAR：以 HAR 数据形式复制所有请求
查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。
控制器
模拟慢速网络
Queueing：浏览器在以下情况下对请求排队
Security标签页 可以告诉你这个网站的安全性，查看有效的证书等
Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告。
Chrome开发者工具详解-Network面板相关推荐
- Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
- Chrome开发者工具详解（六）之Timeline面板
Chrome开发者工具详解(3):Timeline面板 转载于:https://www.cnblogs.com/kunmomo/p/11201047.html
- Chrome开发者工具详解 （二）
Chrome开发者工具详解 (二) 前言 一.Console面板 **定位面页节点** **Css选择器进行节点定位** 事件监听 二.查看节点上注册的监听器 总结 前言 Console面板是与网页进 ...
- Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板. ...
- chrome F12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
- Chrome开发者工具详解
Chrome 开发者工具 Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中.Chrome 开发者工具非常重要,所蕴含的内容也是 ...
- 谷歌开发者工具详解 Network篇
原文链接:https://segmentfault.com/a/1190000010302235 开发者工具初步介绍 在利用chrome浏览器进行web端测试,我们可以通过F12键调起开发者工具. c ...
- 怎样用谷歌network调试接口_前端-chromeF12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
- 前端-chromeF12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
最新文章
- ISP线路类型【整理】
- linux openssl 反弹加密 shell
- Cracer渗透视频课程学习笔记——漏洞分析
- 【android-tips】android xml布局总结篇
- GeoServer怎样修改线性地图的颜色样式
- NOIP2008 普及组T1 ISBN号码 解题报告-S.B.S.
- php数组转ini文件,php – 将数组转换为.ini文件
- 面试系列26 如何基于dubbo进行服务治理、服务降级、失败重试以及超时重试
- 数据机构与算法：书籍介绍
- HttpServlet使用@WebServlet注解
- Python生成器 yield
- 思维导图github地址
- 30天自制操作系统 定时器
- grpc（5）：使用grpc+consul 开发服务调用
- access导入失败:操作必须使用一个可更新的查询。
- 锂离子电池性能测试软件,锂离子电池有什么性能测试设备？
- 谷歌学术搜索 2019
- 景区门票预约系统_无预约，不出游！免费景区门票赶紧预约～
- 使用Unison同步服务器目录
- 初学JAVA项目（三、槑图秀秀）