Debugging with Fiddler

Ido FlatowSenior Architect

Microsoft MVPSELA Group

Debugging the Web with Fiddler

@idoFLATOWhttp://bit.ly/flatow-blog

This presentation:http://sdrv.ms/

13mgEP9

www.devconnections.com

DEBUGGING THE WEB WITH FIDDLER

MEET FIDDLER…



MEET FIDDLER…



MEET FIDDLER…



ApplicationNetwork

APIsProxy Website

WHAT IS FIDDLER?



HOW FIDDLER WORKS…

Internet Explorer

WinINET

Office

CryptoAPI WinHTTP

Fiddler

Firefox

Upstream Proxy

Web Site

Firewall



FIDDLER FACTS

A proxy server An HTTP/HTTPS Sniffer An HTTP Debugger Written in .NET 3.5 / 4 A free utility (for now, cross your fingers) An extensible application A must tool for web developers

Unfortunately, it doesn’t make coffee!



SCENARIO: INSPECTING TRAFFIC

Web sessions Inspectors Filters QuickExec



9

THE SESSIONS LIST

Sequence and color coding

Caching informationOrigin

process

Manual commentsResponse size



FIDDLER TO THE RESCUE

Browsers (Static sites, ASP.NET, J2EE, PHP)

Desktop applications that use HTTP Web services Windows Phone Emulator Any device that supports

a proxy server ( )



THE RIGHT INSPECTOR FOR THE JOB



FILTER BY…

By process type

By specific process

By host

By process name/PID/svchost

By URL

By status code

By MIME or size

QuickExec



FIDDLER AND HTTPS

HTTPS is secured - between two machines Fiddler acts as a “machine-in-the-middle” Generates certificates for web sites on-the-

fly Fiddler supports client certificates for

authentication Supports excluding

problematic HTTPS sites



IF YOU SEE THIS, DON’T PANIC

Before rebooting your machinetry running Fiddler again

When Fiddler crashes proxy setting are still in

effect



SCENARIO: PERFORMANCE TUNING

Timeline Statistics More inspectors



REMINDERUNDERSTANDING THE

CONNECTION

ApplicationNetwork

APIsProxy Website

Second connectionFrom Fiddler to the

server

First connectionFrom client to Fiddler



VISUALIZE THE TRAFFIC WITH TIMELINE

Start End

Bar color = MIME

Red = new connection

Green = reused connection

Disk = cached response

Bar = begin receive

Stripes = buffered by Fiddler

Prefer stream over bufferUse buffer when editing responses



STATISTICS ARE IMPORTANT

Single page statistics give info on performance Client processing

Server processing

Network latency

Server time: ServerBeginResponse – ServerGotRequest

Upload time: ServerGotRequest – ClientDoneRequest

Download time:ServerDoneResponse – ServerBeginResponse

Watch out for misleading connection reuse



DRAWING CONCLUSIONS

Reduce number of requests Reduce traffic roundtrips Reduce the size of requests and responses Applying compression where needed Identify non-cached responses

Use Fiddler to improve performance, not to measure it!



SCENARIO: DEBUGGING

Replay Composer Breakpoints



PLAY IT AGAIN, SAM

Why run the client scenario again, just to resend the request?

Simply click “Replay” Reissue a single request

Reissue a set of requests

Reissue unconditionally (no cache headers)

Reissue multiple times



CHANGING REQUESTS WITH COMPOSER

Create any request from scratch Use previous requests with drag-n-drop Don’t bother calculating content length

www.bobthebuilder.com



DEBUGGING LOCALHOST

In some cases, proxies are bypassed when using localhost (127.0.0.1) addresses

What to do? Use the machine’s name Use fictitious DNS names

ipv4.fiddler or ipv6.fiddler (converted to 127.0.0.1 / [::1])

localhost. or localhost.fiddler (converted to localhost)

Force the use of a proxy with netsh



SCENARIO: TESTING

Save / Export Auto responder



WHAT DID YOU TYPE IN WRONG TO GET IT TO CRASH?

Save traffic to file Save sessions

as .SAZ (Zip) archive .SAZ stores content

and session info Other archiving

options: HTTP Archive (HAR)

Visual Studio Web Test



AUTO-RESPONDERAN IN-MEMORY WEBSITE

If URI matches… then respond with… Respond with file/redirection/breakpoint/drop Not only that, you can also:

Import sessions as responses

Edit stored responses

Use original latency time (updatable)

Export and import rules



SCENARIO: CUSTOMERS

Reverse proxy Fiddler Cap



CAN’T FIDDLE THE CLIENT? FIDDLE THE SERVER

Local Network

Web ServerFiddler

8180

http://bit.ly/fiddler-reverse-proxy



29

MINI FIDDLER, CUSTOMER-ORIENTED

Six simple steps Install and run

Click 1. Start Capture

Browse the web site

[Take some screenshots]

Click 2. Stop Capture

Click 3. Save Capture

Email me the .SAZ file



EXTENDING FIDDLER

Customize rules script Create custom inspectors Create requests and responses auto-

modifiers Create new exporter/importer Extend QuickExec with new commands Add menus and tabs



FIDDLER IS MORE THAN A SNIFFER

Monitors traffic, yes, but also… Controls traffic Modifies traffic Generates traffic Easy to use Extensible

Enhance your web debugging

with Fiddler today!



http://bit.ly/flatowblog@[email protected]

My Info

Fiddler Websitehttp://www.fiddler2.com

http://groups.google.com/group/httpfiddlerFiddler Forum

http://www.telerik.com/automated-testing-tools/blog/eric-lawrence.aspxhttp://blogs.msdn.com/b/fiddler (older blog)

Fiddler Blog

http://sdrv.ms/13mgEP9This Presentation

RESOURCES

Technology

Debugging with Fiddler