Debugging your website with Fiddler and Chrome Developer tools (Session Recording)

Debugging web sites can be tricky, but tools like Chrome Developer Tools and Fiddler continue to improve. Chrome provides a great client side JavaScript debugging experience. It also shows the live DOM and is often the only way to determine exactly what style rules have been applied in CSS.

The network tab provides basic details on requests and responses for the page, including the “initiator” column that indicates why the request was made. The tools provide profilers, audits, and the ability to throttle the network connection. It also provides basic emulation of device sizes for web pages. Fiddler can also be extremely helpful when debugging as traffic can be modified manually or programmatically. The auto responder feature can mock particular responses to web requests, or add specific delays for latency. The composer can construct specific requests that are difficult to create with browsers directly. Fiddler is also extremely helpful for capturing and modifying traffic from smartphones, tablets, and non-Windows platforms.

Together these free tools make it much easier to troubleshoot problems with today’s complex multi-device web sites.

Can't watch, or prefer to listen? Check out the podcast edition of this video.

Robert Boedigheimer works for Schwans Shared Services, LLC providing business solutions with web technologies. Robert has been developing web sites for the past 22 years. He is an ASP.NET MVP, a Telerik Developer Expert, a Pluralsight author, and a 3rd degree black belt in Tae Kwon Do. Robert regularly speaks at national and international events.

• Get Fiddler (it's free!)
• Robert's Pluralsight course on Fiddler
• Robert's Blog