Web applications: Use Fiddler for debugging

[maliborskaya]

Fiddler is a free web debugging proxy that logs all HTTP/HTTPS traffic between your web application and the Internet. You can download Fiddler from the Telerik official site.

Capturing session data with Fiddler can be useful for troubleshooting scenarios such as:

• When no user actions are captured for your application, the RUM JavaScript isn't injected, and the beacon signal isn't sent back.

• When a JavaScript error caused by the RUM JavaScript affects your application.

• In case of missing user actions, for example, a special interaction with the application.

You can upload exported Fiddler sessions to your organization's incident management system to facilitate issue resolution.

Note: Before using Fiddler, go to Tools > Fiddler Options > Connections and select Allow remote computers to connect. Otherwise, the Fiddler proxy won't work.
Also, you might have to change some of your firewall policies to allow the Fiddler port for incoming requests on the computer on which Fiddler runs.

Create an HTTP session

You can use Fiddler to create an HTTP session of the monitored web application.

If your web app uses HTTPS

1. In Fiddler, select Tools > Fiddler Options > HTTPS.

2. Select Capture HTTPS CONNECTs and Decrypt HTTPS traffic.
   

3. Select File > Capture Traffic or use F12 to turn off capturing. Clear your browser's cache so that all cached items are removed and downloaded again.

4. Select File > Capture Traffic or use F12 to start capturing traffic again.

5. Reproduce the problem scenario to demonstrate that the issue occurred within your application. Make sure the affected page is fully reloaded after restarting traffic capture.

6. When done, select File > Save > All Sessions.

If your system supports web proxy

The instructions below are valid for any kind of system that supports a web proxy, for example, for Safari.

1. In Fiddler, select Settings > Wi-Fi > Modify Network.

2. Set Fiddler as the Wi-Fi proxy, as shown below. Add your machine's IP address as the Proxy hostname and the port that Fiddler listens on as the Proxy port.
   
   To find the port that Fiddler listens on, select Tools > Fiddler Options > Connections. Use the value from the Fiddler listens on port field. To find your workstation IP and the proxy port via the command line, run ipconfig on Windows or ifconfig on Linux.

3. (optional) If your application uses SSL certificates, add the Fiddler certificate to your device.

   • Select Tools > Fiddler Options > HTTPS > Actions > Export Root Certificate to Desktop to obtain the Fiddler certificate.

   • Save the exported certificate, which is usually named FiddlerRoot.cer, on your Android device by going to Settings > Security > Install from SD card. You should then see the certificate in the USER tab of Trusted credentials.
     

4. Select File > Capture Traffic or use F12 to turn off capturing. Clear your browser's cache so that all cached items are removed and downloaded again.

5. Select File > Capture Traffic or use F12 to start capturing traffic again.

6. Reproduce the problem scenario to demonstrate that the issue occurred within your application. Make sure the affected page is fully reloaded after restarting traffic capture.

7. When done, select File > Save > All Sessions.

Common mistakes when using Fiddler

Not enabling HTTPS decryption and restarting your application

Make sure you've selected the Decrypt HTTPS traffic check box in Fiddler's Settings > Wi-Fi > Modify Network. Also, do not forget to restart your application.

Otherwise, the body size of all requests in Fiddler is 0 bytes, as shown below:

If Decrypt HTTPS traffic is enabled, the requests have an actual size, as shown below:

Not clearing the cache and reloading the affected page

Make sure to clear the cache in your browser and then reload the page where the problem occurs. This allows the necessary files to reload for the Fiddler session and enables your organization's support team to reliably reproduce the issue.

For example, the following image shows only five requests triggered when you type in the Google search field. This is not enough to reproduce the issue locally.

With the cache cleared and the page reloaded, you can see all the files needed to reproduce the issue and the five requests triggered when you type in the Google search field. This is enough for your organization's support team to reproduce the issue locally and speed up the support process.

Alternatives to Fiddler sessions

Use Chrome DevTools to export an HTTP Archive Session

If you cannot use Fiddler to create a session, Google Chrome offers an alternative way to export a session for review.

Note: Consider this alternative only as a last resort, as browsers tend to drop response bodies in HTTP archives. It's easier to reproduce a problem with Fiddler.

To collect the HTTP Archive Session (HAR) file using Chrome DevTools

1. Open Google Chrome and clear the browser cache.
2. Use F12 to open Chrome DevTools.
3. Go to the Network tab.
4. Reproduce the problem to demonstrate the issue within your application.
5. When done, select all sessions, right-click the blank space, and select Save as HAR with Content.

Use IE Dev Tools to export a NetXML session

If you cannot use Fiddler to create a session, Internet Explorer offers an alternative way to export a session for review.

Note: Consider this alternative only as a last resort, as browsers tend to drop response bodies in HTTP archives. It's easier to reproduce a problem scenario with Fiddler.

To export a NetXML session using Internet Explorer Developer Tools

1. Open Internet Explorer 8+.
2. Use F12 to open the developer toolbar.
3. Clear the cache and domain cookies.
4. Select the Play icon to begin the trace.
   
5. Reproduce the problem scenario to demonstrate the issue within your application.
6. When done, select the Export icon (the disk icon with an arrow to the right) to save the file.