DevTools tips — day 22: network tips
part of the “Advent calendar for front-end developers” series
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve played with snippets, today let’s talk about network:
61. Hide network overview
Are you usually looking into the Network panel to:
- see that requests timeline
- or maybe just the requests list — to check the statuses, sizes and responses?
My bet is that it’s the latter. If that’s the case there really is no point in the Overview section taking around half of the Network’s real estate. Hide it.
62. Request initiator shows a call stack
The Initiator column in Network panel shows which script and its line triggered the request. It shows the last step of the call stack that caused the request to be made so unless you are using e.g. a native fetch API, it will point show some low level library code — for example xhr.js when using Axios library or zone.js when working with Angular.
More than those vendor libraries you probably want to see which part of your code triggered the request. To get that information just hover over that displayed initiator (i.e. the vendor library) and you will see the full call stack, including your file:
63. Filter requests by method
The filter input in the Network panel can take a string or regular expression that you type there and only show the requests that match. But you can also use it to filter by, well, a lot of properties.
Just type e.g. method: or mime-type: there and see for yourself!
To get a full list of possible keywords press [ctrl] + [space] on the empty input.
64. Customise the requests table
In the requests table you can see several pieces of information about each request, such as: Status, Type, Initiator, Size and Time. But you can also add more (e.g. I usually add a Method). Much more actually:
To customise which columns are displayed, just right-click anywhere on the requests table’s header. Note that Response Headers is a whole submenu with even more options, and even a possibility to define your own:
And that’s it for today. As always, if you’ve learned something new, please:
→ smash that👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 23rd day is already published, read it here:
