A look at Firefox's new Network Monitor - gHacks Tech News

A look at Firefox's new Network Monitor

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-Shift-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.

firefox network monitor

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.

  1. 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.
  2. Cookies - If cookies are saved by the requested item, they are listed here with their SID and token.
  3. Parameters - If parameters are added to requests, they are listed here. Great if you are debugging requests.
  4. Response - What is been requested, e.g. the HTML body or CSS stylesheet. Images are displayed here too
  5. Timings - Displays all timings including DNS resolution, connecting, sending, waiting and receiving timings.

detailed network information

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.

Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. fokka said on July 4, 2013 at 5:42 am
    Reply

    it’s impressive how much added functionality for developers there is in a standard installation of firefox/nightly,i, as a more mainstream user, don’t even really know of.

  2. pd said on July 4, 2013 at 9:41 am
    Reply

    It’s called Firebug. It’s been around for 6 years or so.

  3. zondron said on July 4, 2013 at 10:02 am
    Reply

    Chrome has this feature for years.

    Open Google Chrome – load a web site – F12 – Network tab – reload page – watch the magic unfold.

    1. Jyo said on July 4, 2013 at 5:40 pm
      Reply

      Wow, I didn’t even know!! Magic indeed.

  4. B. Moore said on July 5, 2013 at 1:59 am
    Reply

    firefox is getting better all the time in some ways and way worse in others.

    just wish the gave more respect and appreciation and help to some of the add-on authors that kept firefox alive. some of my favorite add-ons are dying because of the back-end changes they are making. mozilla is giving zero support to the lower tier long time authors. firebug has be in the upper tier for awhile but they are getting pushed out the door by another method.

    to be honest firefox needs to have all of firebug built in to it plus more.
    it just really sucks for all the people apart of firebug.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.