This is the fourth post in a series of productivity tips and tricks to help you debug web applications with Firefox Devtools. It shows you 5 tips & tricks for working with the Network Monitor in the Firefox Developer Tools.
You can filter HTTP requests by domain in the Network Monitor by pressing
F on a Mac (
F on Windows and Linux). If you want to search for all the requests that don’t contain a string in the domain URL, you can start your query with a dash (
-), and that filter only the domains not matching the query string. It’s really useful to find all the external requests during a performance audit, so you can later move those resources to the same domain.
You can throttle the speed of your network requests and see how your website loads on different connections. Firefox has a lot of presets useful for mobile devices, with an intuitive name instead of me having to guess what speed a bad 3G connection would be.
You can run visual performance analysis on the HTTP requests your website is making. If you’ve just opened the Network Monitor, there is a stopwatch icon on the main panel, otherwise, you can find it in the lower left corner of the Network Monitor. Once you’ve clicked the icon, the Network Monitor loads the website twice: once with an empty browser cache or “cold”, and once with a primed browser cache or “hot”. It’s really useful to simulate the first time a user loads your site and any following visits.
You can save a snapshot of the network requests in your Network Monitor. It saves them as HAR or HTTP Archive format. You can also import HAR files and have them display in the Network Monitor so you can debug them. This one is especially useful when working with distributed teams, different parts of the world will give you a different timeline. This way you can all work off of the same baseline, or debug that pesky 10-second delay in your images that only happens behind some obscure firewall with your backup CDN. You get the point.