Chrome DevTools：如何过滤网络请求

As front end developers, most of our time is spent in the browser with DevTools open (almost always, unless we are watching YouTube ... sometimes even then).

作为前端开发人员，我们大部分时间都花在打开DevTools的浏览器中(几乎总是，除非我们正在观看YouTube，有时甚至是那时)。

One of the major sections in DevTools is the

network

tab. There are a couple of things you can do in the

network

tab, like the following:

DevTools中的主要部分之一是

network

选项卡。 您可以在[

network

标签中执行以下操作：

• Find network requests by text
  通过文本查找网络请求
• Find network requests by regex expression
  通过正则表达式查找网络请求
• Filter (exclude) out network requests
  过滤(排除)网络请求
• Use the property filter to see network requests by a certain domain
  使用属性过滤器查看特定域的网络请求
• Find network requests by resource type
  按资源类型查找网络请求

For the purposes of this tutorial I am using freeCodeCamp's home page, freecodecamp.org/news. Simply go to the page and open the

network

tab.

就本教程而言，我使用的是freeCodeCamp的主页freecodecamp.org/news 。 只需转到该页面并打开“

network

标签。

You can see the

network

tab by hitting

cmd + opt + j

on your Mac or

ctrl + shift + j

in Windows. It will open up the

console

tab in DevTools by default.

您可以通过在Mac上按

cmd + opt + j

或在Windows中按

ctrl + shift + j

来查看“

network

标签。 默认情况下，它将在DevTools中打开

console

选项卡。

Once the

console

tab is open, simply click on the

network

tab to make it visible.

打开

console

选项卡后，只需单击

network

选项卡使其可见。

Once the

network

tab is open we can begin our tutorial.

打开

network

标签后，我们就可以开始我们的教程了。

让我们开始 (Let's begin)

Make sure the correct page is open (freecodecamp.org/news) and the "network" tab panel is open in DevTools:

确保打开了正确的页面( freecodecamp.org/news )，并且在DevTools中打开了“网络”标签面板：

• The green box here illustrates the icon that can hide/show the filter area in the network panel tab.
  此处的绿色框说明了可以隐藏/显示“网络面板”选项卡中的过滤器区域的图标。
• The red box here illustrates the filter area box. With this box we can filter out network requests.
  这里的红色框说明了过滤区域框。 使用此框，我们可以过滤出网络请求。

通过文字查找网络请求 (Find network request by text)

Type

analytics

into the Filter text box. Only the files that contain the text

analytics

are shown.

在过滤器文本框中输入

analytics

。 仅显示包含文本

analytics

的文件。

通过正则表达式查找网络请求 (Find network request by regex expression)

Type

/.*\min.[c]s+$/

. DevTools filters out any resources with filenames that end with a

min.c

followed by 1 or more

s

characters.

/.*\min.[c]s+$/

。 DevTools过滤掉所有文件名以

min.c

结尾且后跟1个或多个

s

字符的资源。

过滤(排除)网络请求 (Filter (exclude) out network request)

Type

-min.js

. DevTools filters out all files that contain

min.js

. If any other file matches the pattern they will also be filtered out and won't be visible in the network panel.

-min.js

DevTools过滤掉包含

min.js

所有文件。 如果任何其他文件与该模式匹配，它们也将被过滤掉，并且在网络面板中将不可见。

使用属性过滤器查看特定域的网络请求 (Use property filter to see network request by a certain domain)

Type

domain:code.jquery.com

into the filter area. It will only show network requests that belong to the URL

code.jquery.com

.

在过滤器区域中输入

domain:code.jquery.com

。 它只会显示属于URL

code.jquery.com

网络请求。

按资源类型查找网络请求 (Find network request by resource type)

If you only want to see which font(s) file is being used on a certain page click

Font

:

如果您只想查看特定页面上正在使用哪种字体文件，请点击

Font

：

Or if you only want to see the web socket files being loaded on a certain page click

WS

:

或者，如果您只想查看特定页面上正在加载的Web套接字文件，请单击

WS

：

You can also go one step further and view both

Font

&

WS

files together. Simply click on

Font

first and then

cmd

click on

WS

to multi-select tabs. (If you are on a Windows machine you can multi-select by using

ctrl

click).

您还可以更进一步，一起查看

Font

和

WS

文件。 只需先单击“

Font

，然后

cmd

单击

WS

以多选选项卡。 (如果您在Windows计算机上，则可以使用

ctrl

单击来进行多选)。

That is it for this tutorial. If you found it useful do share it with your colleagues and let me know what you think as well on twitter.com/adeelibr.

本教程就是这样。 如果您发现它有用，请与您的同事分享，并在twitter.com/adeelibr上告诉我您的想法。

翻译自: https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks/