ChromeF12 谷歌开发者工具详解 -Network

关于F12开发者工具中Network模块，无论是开发代码调试，还是测试定位界面元素，定位问题等，使用的都比较频繁，本文将结合百度首页详细说明下F12的使用。

开发者工具基本介绍

最常用的四个功能模块：

Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。
console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行
Sources：主要用来调试js和查看源代码
Network：下面详细介绍

network详细介绍

第一个红色记录按钮，处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录
清除按钮，清除当前的网络连接记录信息，（点击一下就能清空）
捕获截屏按钮，记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取
过滤器，能够自定义筛选条件，找到自己想要资源信息，如下图所示

view后面的两个按钮，前者点亮文本，后者显示时间流，可根据时间查看对应时间下浏览器请求的资源信息。

【Group by frame】，这个用的不多，frame应该是内联框架。
【Preserve log】是否保留日志，当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来。
【Disable cache】是否进行缓存，开发者工具生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。
【Offine Online】设置模拟限速，设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况，如图示。

Network主题内容介绍

Name/Pat：资源名称以及URL路径（main.css）
Method：Http请求方法 (GET或者POST)
status/Text：Http状态码/文字解释（200，ok）
Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

Initiator：解释请求是怎么发起的，有四种可能的值

1.Parser  ：请求是由页面的html解析时发送
2.Redirect：请求是由页面重定向发送
3.script  ：请求是由script脚本处理发送
4.other   ：请求是由其他过程发送的，比如页面里的Link链接点击

size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小
time：请求的时间（ms）,pending表示延迟等待

请求文件具体说明

点击某个具体请求后的界面，如下图所示：

一共分为五个模块：

Headers：如上图，Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview：预览面板，用于资源的预览

Response：响应信息面板包含资源还未进行格式处理的内容

Cookies：请求中的Cookie信息，包括请求和返回时的缓存信息

Timing：资源请求的详细信息花费时间

ChromeF12 谷歌开发者工具详解 -Network相关推荐

怎样用谷歌network调试接口_前端-chromeF12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
前端-chromeF12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
chromeF12 谷歌开发者工具详解 Network篇
原文链接:https://segmentfault.com/a/1190000010302235 开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界 ...
[转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
谷歌开发者工具详解 Network篇
原文链接:https://segmentfault.com/a/1190000010302235 开发者工具初步介绍在利用chrome浏览器进行web端测试,我们可以通过F12键调起开发者工具. c ...
chromeF12 谷歌开发者工具详解
一:什么是抓包即抓取我们本地电脑与远端服务器通信时候所传递的数据包二:Chrome浏览器讲解 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进 ...
chromeF12 谷歌开发者工具详解（转载）
一:什么是抓包即抓取我们本地电脑与远端服务器通信时候所传递的数据包二:Chrome浏览器讲解 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进 ...
chrome F12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
谷歌开发者工具详解（看这一篇就够了）
目录如何打开 Element面板 1 元素选择 2 设备选择模式 3 主菜单 4 元素面板 5 样式调整的CSS预处理器 Console面板 Sources面板 Network面板简单介绍一下ch ...

ChromeF12 谷歌开发者工具详解 -Network

开发者工具基本介绍

network详细介绍

Network主题内容介绍

请求文件具体说明

ChromeF12 谷歌开发者工具详解 -Network相关推荐

最新文章

热门文章