How to Analyse HTTP Requests using Net Panel, HTTP Fox & Fiddler2
It is essential to any web developer to understand HTTP requests and be able to analyse which files are loaded when a web page is loaded. For example, say a web page is loading really slow and you want to know why! Yes, we’ve all been there! Thankfully there are tools which can help us inspect our HTTP requests and monitor what HTTP requests are being sent off during page execution.
Included in this post:
- NET Panel – overview and how to use it.
- HTTP Fox – overview and how to use it.
- Fiddler2 – overview and how to use it.
I’ll give you a brief overview of each tools features, what’s best about them and how you can use them to help with your web diagnostics.
#1 – Firebug NET Panel
NET Panel is part of the Firebug install and sits under the “NET” tab. The main purpose of the Net Panel is to monitor HTTP traffic initiated by a web page and simply present all collected and computed information to the user. Its content is composed of a list of entries where each entry represents one request/response round trip made by the page.
What’s good about it
- Live viewing of JS files, CSS files, Flash, HTML & images as they are being loaded.
- Waterfall Graph Timeline as files are loaded it displays them
How to use it
As an example I am going to inspect the jQuery file loaded onto my web page. Firstly, load Firebug and open the NET Panel. Then reload your web page. The files should begin to appear in a list as they load.
The NET Panel has an awesome Waterfall Style Chart which shows you load order and load times.
Request Parameters (really useful to see what parameters and values you are sending off in your request).
Request Header Information
Request Response (in the example it is the JavaScript file code, but it could be JSON, HTML, Data or anything returned from the request).
Request Cache Information
#2 – HTTP Fox
HTTP Fox is a Firefox add-on which can be used as an alternative to Firebug’s NET Panel. I prefer HTTP over NET panel for it’s speed & ease of use. HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
What’s good about it
- Full screen detach option for maximum detail
- Search filter on live results as they come in
How to use it
It’s essentially the same process as the NET Panel above but I really do prefer HTTP Fox for it’s speed and ease of use! It’s my favourite for sure and the way I like to use it is to detach it from the main window and have it alongside in a second screen on auto scroll. You can detach it using the button in the bottom right hand of the browser.
When the page is loading the files are listed.
I definitely recommend using filters to find files. In the example below I have found all the PNG images loaded.
Request Cookies
Request Post Data
Sometimes if a file doesn’t load properly it will be highlighted red – great for finding missing files/bad requests!
#3 – Fiddler 2
I have included Fiddler 2 because every web developer should be doing multi browser testing and Fiddler 2 works with any browser, especially IE. Note that Firebug NET Panel and HTTP Fox Mozilla add-ons only work with FireFox, so fiddle.
What’s good about it
- Fiddler2 works with Internet Explorer and other browsers
- Fiddler2 is free
What’s not good about it
- Fiddler2 has extensive options/settings (you probably will only use like 5% of them)
How to use it
Drag the Process Filter button onto the window you want to track, such as IE.
Select any filters you wish to add:
- Tick use filters (on the filter tab)
- Select “Show only the following hosts”
- Enter the domain you wish to show activity for
Reload the page to load the page requests. You can double click a request in the web sessions window to see its details or Click Inspectors to get the javascript loaded, cookies set, caching and header info.
You have to refresh for the filters to work. Sometimes if it doesn’t work properly, close and reload fiddler and use the launch ie button.
#4 – Wireshark
Wireshark is a powerful network analysis tool and I would only suggest using it if the other options above don’t produce any results for you.
This post was written to help expand the knowledge of web development. It pays to know (and understand) what’s happening behind the scenes when your web page is loading. If you have any comments, or suggestions, they are welcome as always!
