An Interest In:
Web News this Week
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
- April 7, 2024
Using Web Debugging Proxies
My previous two articles focused on debugging tools, so it’s only fitting that I continue with this theme. When debugging front-end code, you tend to spend a lot of time reviewing how CSS and JavaScript affect your page’s rendering; equally important is how network requests affect your site. In many cases, we work locally and forget that page size, latency, and script loading and blocking can greatly affect the way a user experiences your site. So having a good set of tools to inspect network traffic is vital to rounding out your debugging toolset.
Thankfully, all major modern browsers provide debugging tools that allow you to inspect network traffic, and 3rd party tools like Fiddler and Charles not only allow you to see network requests, but offer expanded capabilities to interact with your site.
We’ll explore both types of tools.
Browser-Based Traffic Sniffing
As I mentioned, every major browser has built-in debugging tools. These include:
- Internet Explorer’s F12 Developer Tools
- Firefox’s Web Developer Tools and the Firebug add-on
- Chrome’s Developer Tools
- Opera’s Dragonfly
- Safari’s Web Inspector
Each set has their own unique capabilities, but each has the ability to collect network traffic. If we look at the following images, you can see that while the UIs may vary, the data collected and displayed is very similar: