前端-chromeF12 谷歌开发者工具详解 Network篇

我不是女神ヾ 2022-03-12 03:56 261阅读 0赞

### 开发者工具初步介绍 ###

chrome开发者工具最常用的四个功能模块：

*  Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。大大方便了开发者调试页面，这真是十分友好的~
 *  console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~
 *  Sources：主要用来调试js和查看源代码
 *  Network：网络功能，用于查看相关的ajax请求
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tydWll_size_16_color_FFFFFF_t_70][]

### Network详细介绍 ###

![20180210122233332][]

那我就按照从左到右的顺序来写啦~

*  ![70][]记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。
 *  ![70 1][]清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）
 *  ![70 2][]捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。

![70 3][]

![70 4][]过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。

![70 5][]

也可以是一些指定条件  
指定条件有哪些？

domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：当前时间点在执行的请求。当前可用值：running

larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何种HTTP请求方式。如 GET

mime-type：也写作content-type，是资源类型的标识符。如 text/html

scheme：协议规定。如 HTTPS

set-cookie-name：服务器设置的cookies名称

set-cookie-value：服务器设置的cookies的值

set-cookie-domain：服务器设置的cookies的域

status-code：HTTP响应头的状态码

*  ![70 6][]显示详细信息

![70 7][]

![70 8][]

![70 9][]显示时间流

*  ![70 10][]是否保留日志   
    当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~
 *  ![70 11][]是否进行缓存
    
    当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。
 *  ![70 12][]设置模拟限速，如下图所示。  
    ![70 13][]
    
    设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

## Network主题内容介绍 ##

![70 14][]

下列介绍中，前者为名词解释，后者为举例

*  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.   
        
        1.Parser ：请求是由页面的html解析时发送
    2.   
        
        2.Redirect：请求是由页面重定向发送
    3.   
        
        3.script ：请求是由script脚本处理发送
    4.   
        
        4.other ：请求是由其他过程发送的，比如页面里的Link链接点击
 *  size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小

## 请求文件具体说明 ##

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

![70 15][]

一共分为四个模块：

*  Headers

![70 16][]

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

*  Preview：预览面板，用于资源的预览。

![70 17][]

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

![70 18][]

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

![70 19][]

## 细节补充 ##

对某请求右键，出现页面如下图所示。

![70 20][]

*  Copy Request Headers：复制HTTP请求头到系统剪贴板

*  Copy Response Headers：复制HTTP响应头到系统剪贴板

*  Copy Response：复制HTTP响应内容到系统剪贴板

*  Copy as  
    cURL：将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)

*  Copy All as HAR：将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

*  Save as HAR with Content：将资源的所有的网络信息保存到HAR文件中(.har文件)

*  Clear Browser Cache：清除浏览器缓存

*  Clear Browser Cookies：清除浏览器cookies

*  Open in Sources Panel：当前选中资源在Sources面板打开

*  Open Link in New Tab：在新tab打开资源链接
 *  Copy Link Address：复制资源url到系统剪贴板

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tydWll_size_16_color_FFFFFF_t_70]: /images/20220312/6683a481fcd0491c970c8a62fcccface.png
[20180210122233332]: /images/20220312/240ed413aa2c4bb08b010e92c12690de.png
[70]: /images/20220312/7e11c0ae606a4395a21eb41cc6029946.png
[70 1]: /images/20220312/fe1118908cdf459eb32295d88cba28cc.png
[70 2]: /images/20220312/008445507da14ea5bdbd0f9e9e19d0b6.png
[70 3]: /images/20220312/def66082393244d085c06cbb1e5c78ed.png
[70 4]: /images/20220312/4f964d1fe73c4f5a8d36b1c59e7182e7.png
[70 5]: /images/20220312/57c4b846f9ed4fbd99d93a41487f23ad.png
[70 6]: /images/20220312/67ee6bff15b749d7a7642776fdbb11fb.png
[70 7]: /images/20220312/cf65bbb2c04e4ce6bff9551d97129ff3.png
[70 8]: /images/20220312/ad52ee33668d4aa18c1e8bb750ed4b26.png
[70 9]: /images/20220312/60f434c457f546d99a475c2e4bd4553f.png
[70 10]: /images/20220312/33812d90451340938cc9ff9d2dc4a7b2.png
[70 11]: /images/20220312/78c9d4983abd47ba9f8dc793d9e59845.png
[70 12]: /images/20220312/3bb3bec81c584a5c929eab8723162745.png
[70 13]: /images/20220312/608b7974491d48489207211f597c8649.png
[70 14]: /images/20220312/9c75df31a18044a89571b2e997c85768.png
[70 15]: /images/20220312/d9c3a8aca0264def8bc979d10cf9f5e6.png
[70 16]: /images/20220312/1ac258bc73674606a15d2b00b1693a48.png
[70 17]: /images/20220312/6522eda8801b489bb42f6c188e2d01c6.png
[70 18]: /images/20220312/d86570fb660e4742b39244b0b332175f.png
[70 19]: /images/20220312/2b27efd18ee44b888b5c14301c473775.png
[70 20]: /images/20220312/11cb1b131d764c41a17eb1b8116d73fc.png