Debugging Your Website with Fiddler and Chrome Developer Tools
summary
Shows how to use Fiddler and Chrome DevTools to find concrete failures: Fiddler runs as a proxy that captures mobile devices via proxy, Composer replays and mutates requests to reveal missing server-side validation, and AutoResponder simulates missing files or slow responses with autoresponder to mock failures. Demonstrates image fixes (photo PNG → JPEG drops ~600KB to ~90KB), missing caching and bundling causing huge pages (avg ~2.5MB, ~100 requests), and how to decrypt HTTPS with a local cert for full inspection.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:20About me
- 0:51HTTP
- 1:22HTTP Request
- 2:36HTTP Response
- 3:31Fiddler
- 6:56How does Fiddler work
- 8:59Chrome Developer Tools
- 9:44Structure
- 10:30Running Fiddler
- 14:13JavaScript Errors
- 18:28Style Issues
- 21:09Performance Concerns
- 27:20Mixed Content Warning
- 29:48Capture Success and Failure
- 31:27Find Sessions
- 36:48Fiddler Tricks
- 39:44What if something is blocked
- 42:19What if Im on a slow connection
- 43:07What if I have another user agent
- 43:49What if it is the first request
- 44:38Simulate latlong orientation
- 48:04Calling backend APIs
- 52:53Using Dev Tools for Chrome
- 53:57Fiddler Cap
- 55:10Chrome Dev Tools
- 56:16Image Bloat
- 58:36Saving Traces
- 59:36Filmstrip View
related talks
01h 00mDebugging your website with Fiddler and Chrome Developer tools
37mLeverage Network Debugging to Elevate Your Apps' Performance Quality
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
50mRocking Out with Browser-Based Developer tools
27mChrome Developer Tools
54mRemoving the gag from your browser
30mThe Chrome DevTools Performance Panel