Chrome这些调试技巧

1.如何打开

无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。

2.面板组成

如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。

控制器：控制面板的外观与功能

过滤器：过滤请求列表中显示的资源

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

 

概览：显示HTTP请求、响应的时间轴。

请求列表：默认时间排序，可选择显示列。

概要：请求总数、总数据量、总花费时间等。

3.控制器

模拟慢速网络

还可以自定义，点击Add...

4.过滤器

如何对请求进行过滤呢？

4.1按字符串

1.键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下，与过滤器匹配的唯一文件是PNG图像。

2.类型/.*\.[cj]s+$/。DevTools过滤掉任何资源，其文件名不以a j或c后跟1个或多个s字符结尾。