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/