How to use Fiddler?
Fiddler is a free and open-source packet analyzer. It is used for network troubleshooting, analysis, software, communications protocol development and education. Fiddler captures HTTP and HTTPS traffic data between the browser and server. These data are extremely valuable to troubleshoot HTTP, Java script errors and performance issues related to browser page rendering, this article is a step by step tutorial to guide how to use Fiddler and capture HTTP Traffic.
Fiddler sits between the http client and http server listening on a port for traffic. As the finger displays in below, it enables a proxy between two layers to intercept the traffic, the request being taken does not proceed to server directly, instead, it is sent to Fiddler proxy bridge, Fiddler records the incoming andoutgoing data and then forward to server again.
Fiddler application, available for free download from page http://www.telerik.com/fiddler
After downloaded, double-click the exe file and agree to the installing license, follow the step-by-step wizard to complete the installation, during installing, you may be asked to close all browsers.
Lunch the shortcut of Fiddler from from Start > All Program, you will see the below main Fiddler UI, when starting Fiddler, it will automatically check the latest version against the Fiddler server and ask you upgrade if there have new version available.
Use Internet Explorer or Mozilla FireFox, open a web page that sends a request via the explorer, we will instantly see a list of the web requests in the web sessions panel, while, if you visit more web pages, the recorded requests will continue growing and keep in order.
The web sessions show all HTTP and HTTPS sessions captured by Fiddler, the messages include certain key information:
The each type of item have an own icon on the left hand, the below is the list of the all icons.
Of course, It’s just an overall summary list, it give a generic sense that we can choose what we want.
If you double click on a HTTP session, the Inspectors tab on right hand is displayed, it visualize requests or response content in meaningful ways. In the top half of the right hand side is the request what was sent to server, there have multiple tabs of view where show format message and data(Headers, Text View, web forms, HexView, Auth, Cookies, Raw, JSON and XML). The first one is header, it logged cache, Client, Cookies/Login, Miscellaneous and Transport, these infos are particular helpful to troubleshoot.
Request Inspectors
[RW] Headers—Shows request headers and status.
[RW] TextView—Shows the request body in a text box.
[RW] HexView—Shows the request body in a hexadecimal view.
[RO] XML—Shows the request body as an XML DOM in a tree view.
Response Inspectors
[RW] Transformer—Removes GZip, DEFLATE, and CHUNKED encodings for easier debugging.
[RW] Headers—Shows response headers and status.
[RW] TextView—Shows the response body in a text box.
[RW] HexView—Shows the response body in a hexadecimal view.
[RO] ImageView—Shows the response body as an Image. Supports all .NET image formats.
[RO] XML—Shows the response body as an XML DOM in a tree view.
[RO] Privacy—Explains the P3P statement in the response headers, if present.
The bottom half is response, this is the entire response being sent back to the client browser, it may possible be HTML page, image, JSON string, Cascading Style Sheet (CSS) and other resources, we can click textview, syntaxview, Imageview and other clickable tab to view it in different format, the below example demos we syntax view the html source page of this site.
For instance, the below is the analytic data which retrieved the home page of this site.
In this tutorial introduces the basic features and examples of Fiddler, Fiddler is a very good debug tool. You may take a try if you have not tried it.
1. Fiddler Overview
Fiddler sits between the http client and http server listening on a port for traffic. As the finger displays in below, it enables a proxy between two layers to intercept the traffic, the request being taken does not proceed to server directly, instead, it is sent to Fiddler proxy bridge, Fiddler records the incoming andoutgoing data and then forward to server again.
Besides Fiddler, FireBug is an alternative one and most popular and powerful web development tool, it can Inspect HTML and modify style and layout in real-time.
2. Download Fiddler
Fiddler application, available for free download from page http://www.telerik.com/fiddler
3. Install Fiddler on your client machine
After downloaded, double-click the exe file and agree to the installing license, follow the step-by-step wizard to complete the installation, during installing, you may be asked to close all browsers.
4. Start Fiddler
Lunch the shortcut of Fiddler from from Start > All Program, you will see the below main Fiddler UI, when starting Fiddler, it will automatically check the latest version against the Fiddler server and ask you upgrade if there have new version available.
5. Use Fiddler to Capture HTTP or HTTPS traffic
5.1 Check overall Web sessions
Use Internet Explorer or Mozilla FireFox, open a web page that sends a request via the explorer, we will instantly see a list of the web requests in the web sessions panel, while, if you visit more web pages, the recorded requests will continue growing and keep in order.
The web sessions show all HTTP and HTTPS sessions captured by Fiddler, the messages include certain key information:
- # – An ID# of the request generated by Fiddler for your convenience
- Result – The Result code from the HTTP Response
- Protocol – The Protocol (HTTP/HTTPS/FTP) used by this session
- Host – The hostname of the server to which the request was sent
- URL – The path and file requested from the server
- Body – The number of bytes in the Response body
- Caching – Values from the Response’s Expires or Cache-Control headers
- Process – The local Windows Process from which the traffic originated
- Content-Type – The Content-Type header from the Response
- Custom – A text field you can set via scripting
- Comments – A text field you can set from scripting or the session’s context menu
The each type of item have an own icon on the left hand, the below is the list of the all icons.
Of course, It’s just an overall summary list, it give a generic sense that we can choose what we want.
5.2 Check Fiddler Inspectors
If you double click on a HTTP session, the Inspectors tab on right hand is displayed, it visualize requests or response content in meaningful ways. In the top half of the right hand side is the request what was sent to server, there have multiple tabs of view where show format message and data(Headers, Text View, web forms, HexView, Auth, Cookies, Raw, JSON and XML). The first one is header, it logged cache, Client, Cookies/Login, Miscellaneous and Transport, these infos are particular helpful to troubleshoot.
Request Inspectors
[RW] Headers—Shows request headers and status.
[RW] TextView—Shows the request body in a text box.
[RW] HexView—Shows the request body in a hexadecimal view.
[RO] XML—Shows the request body as an XML DOM in a tree view.
Response Inspectors
[RW] Transformer—Removes GZip, DEFLATE, and CHUNKED encodings for easier debugging.
[RW] Headers—Shows response headers and status.
[RW] TextView—Shows the response body in a text box.
[RW] HexView—Shows the response body in a hexadecimal view.
[RO] ImageView—Shows the response body as an Image. Supports all .NET image formats.
[RO] XML—Shows the response body as an XML DOM in a tree view.
[RO] Privacy—Explains the P3P statement in the response headers, if present.
The bottom half is response, this is the entire response being sent back to the client browser, it may possible be HTML page, image, JSON string, Cascading Style Sheet (CSS) and other resources, we can click textview, syntaxview, Imageview and other clickable tab to view it in different format, the below example demos we syntax view the html source page of this site.
5.3 Check statistics of the request
Click on statistics tab, it will show the estimated performance statistics for the selected HTTP sessions. It gives us a straight-forward insight for receive status and chart from high level. It’s good for performance turning.
For instance, the below is the analytic data which retrieved the home page of this site.
Request Count: 1
Bytes Sent: 1,178 (headers:1,178; body:0)
Bytes Received: 148 (headers:148; body:0)ACTUAL PERFORMANCE
————–
ClientConnected: 21:44:54.604
ClientBeginRequest: 21:44:54.650
GotRequestHeaders: 21:44:54.650
ClientDoneRequest: 21:44:54.650
Determine Gateway: 47ms
DNS Lookup: 0ms
TCP/IP Connect: 452ms
HTTPS Handshake: 0ms
ServerConnected: 21:44:55.141
FiddlerBeginRequest: 21:44:55.141
ServerGotRequest: 21:44:55.142
ServerBeginResponse: 21:44:56.012
GotResponseHeaders: 21:44:56.012
ServerDoneResponse: 21:44:56.012
ClientBeginResponse: 21:44:56.012
ClientDoneResponse: 21:44:56.012Overall Elapsed: 0:00:01.362RESPONSE BYTES (by Content-Type)
————–
~headers~: 148
ESTIMATED WORLDWIDE PERFORMANCE
————–
The following are VERY rough estimates of download times when hitting servers based in WA, USA.US West Coast (Modem – 6KB/sec)
RTT: 0.10s
Elapsed: 0.10sJapan / Northern Europe (Modem)
RTT: 0.15s
Elapsed: 0.15sChina (Modem)
RTT: 0.45s
Elapsed: 0.45sUS West Coast (DSL – 30KB/sec)
RTT: 0.10s
Elapsed: 0.10sJapan / Northern Europe (DSL)
RTT: 0.15s
Elapsed: 0.15sChina (DSL)
RTT: 0.45s
Elapsed: 0.45s
Bytes Sent: 1,178 (headers:1,178; body:0)
Bytes Received: 148 (headers:148; body:0)ACTUAL PERFORMANCE
————–
ClientConnected: 21:44:54.604
ClientBeginRequest: 21:44:54.650
GotRequestHeaders: 21:44:54.650
ClientDoneRequest: 21:44:54.650
Determine Gateway: 47ms
DNS Lookup: 0ms
TCP/IP Connect: 452ms
HTTPS Handshake: 0ms
ServerConnected: 21:44:55.141
FiddlerBeginRequest: 21:44:55.141
ServerGotRequest: 21:44:55.142
ServerBeginResponse: 21:44:56.012
GotResponseHeaders: 21:44:56.012
ServerDoneResponse: 21:44:56.012
ClientBeginResponse: 21:44:56.012
ClientDoneResponse: 21:44:56.012Overall Elapsed: 0:00:01.362RESPONSE BYTES (by Content-Type)
————–
~headers~: 148
ESTIMATED WORLDWIDE PERFORMANCE
————–
The following are VERY rough estimates of download times when hitting servers based in WA, USA.US West Coast (Modem – 6KB/sec)
RTT: 0.10s
Elapsed: 0.10sJapan / Northern Europe (Modem)
RTT: 0.15s
Elapsed: 0.15sChina (Modem)
RTT: 0.45s
Elapsed: 0.45sUS West Coast (DSL – 30KB/sec)
RTT: 0.10s
Elapsed: 0.10sJapan / Northern Europe (DSL)
RTT: 0.15s
Elapsed: 0.15sChina (DSL)
RTT: 0.45s
Elapsed: 0.45s
6. This Fiddler tutorial is done, leave a question or comment to us if you have
Conclusion:
In this tutorial introduces the basic features and examples of Fiddler, Fiddler is a very good debug tool. You may take a try if you have not tried it.
Comments
Post a Comment