本文详述了Chrome开发者工具中的Network面板，包括记录、清除网络连接信息、捕获页面渲染截图、过滤器功能以及各种筛选条件。还介绍了Name/Pat、Method、Status、Type等请求详情，以及Headers、Preview、Response、Timing等四个模块的功能。文章最后分享了作者的前端开发经验和资源学习资料，鼓励开发者们共同进步。
- console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~
- Sources：主要用来调试js和查看源代码
- Network：重头戏来了~
Network详细介绍
那我就按照从左到右的顺序来写啦~
记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。
清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）
捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。
过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。
也可以是一些指定条件
指定条件有哪些？
domain：资源所在的域，即url中的域名部分。如 domain:api.github.com
has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin
is：当前时间点在执行的请求。当前可用值：running
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
