Google开发者工具面板-network全面讲解

最新推荐文章于 2024-05-01 18:30:07 发布

Rsun04551

最新推荐文章于 2024-05-01 18:30:07 发布

阅读量450

点赞数

分类专栏：工作总结

本文链接：https://blog.csdn.net/yang_guang3/article/details/113857302

版权

169 篇文章 16 订阅 ¥19.90 ¥99.00

订阅专栏

本文深入介绍了Google开发者工具中的Network面板，详细讲解了网络请求的详细信息，包括HTTP状态码、资源类型、时间轴、瀑布流图以及资源详情，如Headers、Preview、Response、Cookies和Timing等，帮助进行网络性能优化。

摘要由CSDN通过智能技术生成

1 开发者工具面板
面板上包含了Elements元素、Console控制台、Sources源码、Network网络、Performance性能、Memory内存、Application应用、Security安全
在这里插入图片描述
这些按钮的功能点如下：

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Sources:断点调试JS。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session
Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。

2 Network面板
2.1 面板功能分布
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请

了解本专栏

关注