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 gives you the 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. They also provide basic emulation of device sizes for web pages.

Fiddler can also be extremely helpful when debugging. You can manually or programmatically modify traffic. 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 helpful for capturing and modifying traffic from smartphones, tablets, and non-Windows platforms. Together these free tools make it much easier to troubleshoot problems on today's complex multi-device web sites.

You will learn:

• How to capture and modify requests from smartphones, tablets, and desktops
• How to troubleshoot problems with JavaScript and CSS
• How to throttle network connections to see impact on performance