Debugging the web with Fiddler and Chrome

Who I am

• Maxime Rouiller

• ASP.NET/IIS MVP

• 10 years of experience doing web development

• Freelancer

• Twitter: @MaximRouiller

• Blog: http://blog.decayingcode.com

The Plan

• Introduction to Fiddler

• Introduction to Chrome Developer tools

• When to use each of them

• Demos!

What is Fiddler

• Web Debugging Proxy for all browsers, OS and platforms

• Works with anything

• Free

• Download here: http://www.telerik.com/fiddler

DemoSimple introduction to Fiddler and its UI

DemoWhat makes Fiddler work

What is Chrome Developer tools?

• Integrated in Google Chrome

• Tons of features

• Works in all web pages on all major OS

• Download here: http://www.google.com/chrome/browser/

DemoShowing off the tools

DemoThe importance of caching

When to use which one?

Fiddler

• Debugging sequences of requests

• Modifying a request and resending it

• Analyzing on-the-wire performance of requests

• Save/Replay requests for reproduction steps

Google Chrome

• Debugging JavaScript

• Analyzing web page performance

• Writing interactive Javascript

• Debugging CSS/HTML

More Demos!Debugging media queries with Chrome

Debugging JavaScript with Chrome

Debugging mobile applications with Fiddler

Debugging WebAPI with Fiddler

Questions?

• Contact me on Twitter: @MaximRouiller

• Blog: http://blog.DecayingCode.com

• Add me to LinkedIn

• www.MaximeRouiller.com

• Or speak to me at the break!