Debugging your website with Fiddler and Chrome Developer tools
summary
Demonstrates using Fiddler and Chrome Developer Tools to find concrete causes: Fiddler runs as a proxy on port 8888, captures HTTPS by generating a local cert, and lets you make JavaScript pretty and use an auto responder to mock 404s or add delays; Chrome DevTools shows CSS specificity, lets you pretty‑print/minified JS, force :hover, throttle network, and save as har. Calls out common fixes—enable compression, bundle/minify files, set long cache expirations—and notes the average page is ~105 requests ~2.5MB.
AI-written summary · about
chapters (22)
- 0:00Introduction to debugging
- 3:46What is Fiddler?
- 5:40Fiddler basics
- 8:13How Fiddler works
- 10:52Chrome Developer Tools
- 12:17Troubleshooting missing files
- 16:10Debugging JavaScript
- 22:58Fixing CSS styles
- 26:56Web performance analysis
- 33:55HTTPS mixed content
- 35:39Comparing traces
- 37:21Debugging DOM changes
- 39:01Request tracing
- 41:21Request manipulation
- 43:31Simulating network issues
- 46:03Connection throttling
- 47:14Device emulation
- 49:44Remote device tracing
- 52:17Debugging backend APIs
- 53:37Decrypting HTTPS
- 55:01Sharing traces
- 56:55Conclusion and resources
related talks
01h 01mDebugging Your Website with Fiddler and Chrome Developer Tools
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
37mLeverage Network Debugging to Elevate Your Apps' Performance Quality
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
27mChrome Developer Tools
28mFrom Friction to Flow: Debugging With Chrome DevTools
54mRemoving the gag from your browser
28mGetting down to brass tacks: Using chrome dev tools to level up your applications