谷歌浏览器调试模式快捷键了解谷歌浏览器调试模式快捷键

文章插图
最近打算写一写Chrome教程文档，不知道大家最感兴趣的是什么内容呢？
1.如何打开
无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。
2.面板组成
如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。
控制器：控制面板的外观与功能
过滤器：过滤请求列表中显示的资源

按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。

概览：显示HTTP请求、响应的时间轴。
请求列表：默认时间排序，可选择显示列。
概要：请求总数、总数据量、总花费时间等。
image-20190522114020527
3.控制器
image-20190523101125138
模拟慢速网络
image-20190523102954487
还可以自定义，点击Add…
image-20190523103103402
4.过滤器
如何对请求进行过滤呢？
4.1按字符串
1.键入png到过滤文本框。仅显示包含文本的文件png 。在这种情况下，与过滤器匹配的唯一文件是PNG图像。
image-20190524112336773
2.类型/.*.[cj]s+$/ 。DevTools过滤掉任何资源，其文件名不以a j或c后跟1个或多个s字符结尾。
image-20190524112320315
3.类型-main.css 。DevTools过滤掉了main.css 。如果任何其他文件与模式匹配，它们也将被过滤掉。
image-20190524112259664
4.2按类型
image-20190523102734525

XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此处为列出的任何其他类型）
多个类型，按住Command（Mac）或Ctrl（Windows、Linux）
按时间过滤：概览面板，拖动滚动条
隐藏Data URLs：CSS图片等小文件以 BASE64 格式嵌入HTML中，以减少HTTP请求数。

4.3属性过滤
下面演示使用Filter过滤器，如图所示：
image-20190523114458965

domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
has-response-header：显示包含指定HTTP响应标头的资源
is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
method：显示通过指定 HTTP 方法类型检索的资源
mime-type：显示指定 MIME 类型的资源
mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
scheme：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。

多属性间通过空格实现 AND 操作。
5.请求列表的排序

时间排序，默认
按列排序
按活动时间排序

Start Time：发出的第一个请求位于顶部
Response Time：开始下载的第一个请求位于顶部
End Time：完成的第一个请求位于顶部
Total Duration：连接设置时间和请求/响应时间最短的请求位于顶部
Latency：等待最短响应时间的请求位于顶部
- 上一页
- 1
- 2
- 3
- 下一页
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

谷歌浏览器调试模式快捷键了解 谷歌浏览器调试模式快捷键

谷歌浏览器调试模式快捷键了解谷歌浏览器调试模式快捷键