Firefox’s new Network Monitor

[anuseems]

Network Monitor is a new weapon in Firefox's Web Developer arsenal that recently made its way into the beta version of the browser. Beta, Aurora and Nightly versions of Firefox support the feature already with the Stable version receiving access when it is updated to Firefox 23.

To start Network Monitor, use the shortcut Ctrl-Alt-Q or select it by clicking on Alt and selecting Tools > Web Developer > Network from the menu that opens up.

The web developer window opens up in network view. You can keep the window independent from Firefox or use the small buttons on the right of the menu bar of it to snap it to the bottom or side of the browser window.

Note that network only works on the tab that was active when you opened it and not on other tabs.

The monitor displays all requests the browser makes when a web page is loaded in it. Each request is listed with its request method, file, domain the information are retrieved from, type of data, size, and the loading time. The colored icons at the beginning of the line display the response header, with green indicating that everything is ok. The yellow icons in the screenshot above detailed that the resources were not modified (304). Errors such as 404 not found are indicated with red icons.

You can filter for specific types of data at the bottom, for instance to display only the loading time of JavaScript code or images (landed in Firefox 24 so not in the BETA right now).

The loading time of individual elements works similar to how page load testing scripts work. You can use it to find the longest loading items on a web page. It may also help you find out if there are bottlenecks on the page, elements that block others from being loaded until they are loaded in full.

A click on a request displays information about it in a sidebar on the screen. Here you get access to all headers, cookies, parameters, the contents and timings.

Headers - Displays all headers of the item. This can be very useful to check the content encoding, caching and other information to make sure it is configured correctly.

Cookies - If cookies are saved by the requested item, they are listed here with their SID and token.

Parameters - If parameters are added to requests, they are listed here. Great if you are debugging requests.

Response - What is been requested, e.g. the HTML body or CSS stylesheet. Images are displayed here too

Timings - Displays all timings including DNS resolution, connecting, sending, waiting and receiving timings.

Note: The network monitor will load the selected web page exactly as you would in Firefox. If you have an ad blocker installed or another extension or script that blocks or modifies requests, then you will see the effect in the tool as well. So, an ad blocker will block all ads so that you won't see ad requests listed among the requests at all.

Closing Words

The Web Developer tools are constantly being worked on by Mozilla. The addition of a Network Monitor is yet another useful tool that Firefox users have now in their arsenal.

Firebug users who are working on older machines may find this reason enough to switch to free up some RAM in the process.

@ http://www.ghacks.net/2013/07/04/a-look-at-firefoxs-new-network-monitor/

[dcs18]

Scoundrels!!!

Mozilla has slipstreamed Firebug into Firefox - I'd rather prefer this add-on to be independent of the browser. :frusty:

[DKT27]

I'm loving it. Slowly, Firefox is getting these features which developers were asking for years now. Chrome has all this from more than couple of years. Lot of devs have switched to Chrome only because of build-in functionality of these things.

Though I use Firebug myself, it is long believed that Firebug is one heavy Firefox addon, infact, years ago it was in the top 10 of notorious Firefox addons.

[dcs18]

People do not realize the prime reason they start hating wonderful software like Firefox & Windows 8 - simply due to their inexperience.

Example:

Windows 8 has got the globally unnecessary Metro integrated into it's kernel - most people have no use for it and have no idea how to disable each and every of it's components. Many are not even aware that it can be done. Microsoft should've created Metro as an add-on - those who prefer TouchScreen could just download and install it (the kernel would become lighter - everybody is happy.)

Similarly, the core of Firefox should've been left alone - most people have no need for that perverted Firebug. It would've evolved faster & better as an independent add-on. Mark my words - Peeps are gonna come back here, complaining about the resources Firefox starts hogging post-Firebug.

There are some other add-ons though, which are more suitable for integration into the Firefox kernel due to the very nature of their global requirement:-

• Adblock Plus
• Tab Mix Plus
• Xmarks (instead of the n00bish Sync that presently exists)

I'm afraid Firebug does not enjoy global acceptance - like the above-mentioned add-ons which really complement this browser.

[DKT27]

There's a difference between Metro and dev tools though.

Few points I'll like to mention:

• Developer tools in Firefox ain't all in your face about it like Metro is. They are optional, unlike Metro.
• Firefox developer tools have been there for ages, with new additions being added very slowly. No one so far has complained about any browser slowdowns, as far as developer tools are concerned.
• Uptill now, thousands of features have been added to developer tools, with this network monitor being added being just like fine fragment of rock in the sand.
• Firebug has already evolved a lot.
• Firebug devs have started leaving Firebug, believing that all their job is done now, they expect no evolution of the addon anymore (that's what I can understand). People leaving Firebug includes, but not limited to the main Firebug developer.
• With Firebug loosing interest in both developer community (due to Chrome) and developer themselves, Mozilla has no other option but to integrate functions directly into the browser.
• Even though Firefox's new dev tools layout has a long way to go before it can be fit enough, it's UI is very good.

• Firefox can never integrate Adblock plus, it is there for the openness of the internet, not there to stop websites from getting any revenue. There are lot of n00bs completely unaware about the addon, these n00bs are the reasons some of the websites manage to get just enough money to pay the servers.
• Tab mix plus's functions can be added, but may require significant effort and time, not only to integrate but to also maintain. Having said, Tab Mix Plus was also a leader in the notorious addons list.

[dcs18]

Nobody claimed there's no difference between Metro and Firebug - the similarities are quite glaring, though.

Just a few quick points

• I don't care how in-the-face or not Firefox is. Firebug is integrated despite the fact that it was available as an add-on. Metro is equally optional - that is exactly the problem with those who do not wish to learn and are destined to whine.
• I also don't care how long Firefox Developer Tools have been around and whether anybody has complained or not (actually many have.)
• I would like the thousands of features that have been added; to be enumerated - or they did not happen.
• If Firebug has evolved leave it alone - Mozilla has no business interfering with it's evolution.
• The Firebug evolution is not to be credited to Mozilla.
• Firebug is not an essential - hardly anybody uses it (does not matter if the Developers decide/d to lam.)
• Firebug is one of nails in the Chrome coffin - why did Mozilla need to follow an option that failed miserably in Chrome; it's not required (like Metro - just another sanitary napkin.)
• Nobody cares for an UI of an add-on they won't use and don't need - if legit. the ugliest of UI can be beautified.
• If Firefox can integrate an abortion like Firebug - any add-on (not limited to Adblock Plus) can be integrated, too. Unlike NoScript, Adblock Plus is ideally suited for n00bs as it does not need to be finetuned, further (have very consciously desisted from writing an Adblock tutorial since that would hit the staff of this Board - oh boy, does it make the pages stream at a blazing pace.)
• Tab Mix Plus is as notorious as Firebug in the resources department - if a good-for-nothing like Firebug is gonna be integrated, I'd rather it was a useful Tab Mix Plus, instead.