Debugging client-side web applications can be difficult because they involve a complex mix of HTML, CSS, and JavaScript while also storing data on the client and constantly communicating with a web server. In this course, Debugging Sites with Chrome DevTools, you’ll learn how to use the powerful set of tools included with Chrome to quickly diagnose and fix problems in your client-side applications. First, you’ll explore how to examine and edit both the structure and style of a site to make sure your designs are being implemented correctly. Next, you’ll see how to fully harness the power of the browser console to log output, execute JavaScript, and troubleshoot problems. Finally, you’ll learn how to troubleshoot performance problems and debug JavaScript code right in the browser and save fixes back to your development environment. When you’re finished with this course, you’ll have the skills needed to confidently and efficiently debug modern client-side web applications.
Author Name: Brice Wilson
Author Description:
Brice Wilson has been a professional developer for over 30 years and has used many tools and programming languages during that time. He has worked as a developer and architect for a number of large companies and enjoys learning, experimenting with, and teaching new technologies. His current interests are centered on server and client-side web development.

Table of Contents

• Course Overview
  1min
• Understanding the Capabilities of Chrome DevTools
  12mins
• Examining and Editing Web Pages
  24mins
• Using Device Mode to Simulate Multiple Devices
  12mins
• Using the Console
  26mins
• Debugging JavaScript
  23mins
• Viewing Network Communication and Local Data
  16mins
• Optimizing Website Performance
  7mins