2017 AIM HDC

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.