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).
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:
- 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
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.
console tab is open, simply click on the
network tab to make it visible.
network tab is open we can begin our tutorial.
Make sure the correct page is open (freecodecamp.org/news) and the "network" tab panel is open in 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
analytics into the Filter text box. Only the files that contain the text
analytics are shown.
Find network request by regex expression
/.*\min.[c]s+$/. DevTools filters out any resources with filenames that end with a
min.c followed by 1 or more
Filter (exclude) out network request
-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.
Use property filter to see network request by a certain domain
domain:code.jquery.com into the filter area. It will only show network requests that belong to the URL
Find network request by resource type
If you only want to see which font(s) file is being used on a certain page click
Or if you only want to see the web socket files being loaded on a certain page click
You can also go one step further and view both
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
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.