Debugging Your Website with Fiddler and Chrome Developer Tools

Explore advanced techniques for debugging websites using Fiddler and Chrome Developer Tools in this comprehensive conference talk. Learn about HTTP requests and responses, JavaScript error handling, and CSS troubleshooting. Discover how to leverage Fiddler's powerful features to capture and analyze network traffic, simulate various network conditions, and test backend APIs. Dive into Chrome Developer Tools to inspect the live DOM, debug JavaScript, and optimize website performance. Master essential skills such as finding sessions, handling mixed content warnings, and using the filmstrip view for visual debugging. Gain practical insights on image optimization, saving traces, and simulating different user agents to enhance your web development workflow.

Introduction
About me
HTTP
HTTP Request
HTTP Response
Fiddler
How does Fiddler work
Chrome Developer Tools
Structure
Running Fiddler
JavaScript Errors
Style Issues
Performance Concerns
Mixed Content Warning
Capture Success and Failure
Find Sessions
Fiddler Tricks
What if something is blocked
What if Im on a slow connection
What if I have another user agent
What if it is the first request
Simulate latlong orientation
Calling backend APIs
Using Dev Tools for Chrome
Fiddler Cap
Chrome Dev Tools
Image Bloat
Saving Traces
Filmstrip View