About This Course

This course will teach you how to use the Chrome Developer Tools to inspect various aspects of a page, including the HTML structure, styles, JavaScript, storage, and more. You will also be able to evaluate several aspects of the page performance, including loading times, JavaScript execution, and content rendering. Additionally, you will learn how to debug a running script on the page using breakpoints and the debugging tools.

Course Outline

• Chapter 1: Overview

  A brief introduction to the Chrome Developer Tools including what they are, why you should care and how to configure and navigate through the various tools you’ll be exploring throughout the course.

• Chapter 2: The Application and Audits Tabs

  Explore the Application and Audits tabs and learn how examine aspects of a website including local storage, cookies, and site assets. Learn how to run an audit on a website and interpret the results and suggestions.

• Chapter 3: The Elements Tab

  Learn how to inspect a web page’s HTML elements and use the context menu to access more information and/or modify content. Also learn how to understand which CSS styles are being applied to the content on your page including layout, image and text. Discover how you can subsequently hide, show, modify, or delete these styles in order to troubleshoot or experiment with the look and feel of your page.

• Chapter 4: Finding and Fixing a CSS Issue in a Project

  Get experience working on a typical project that has a number of CSS problems such as incorrect sizing of images and missing font styles. You will learn how to identify a CSS issue, correct the issue in the CSS panel, and then apply those changes to your production file.

• Chapter 5: The Device Toolbar

  Testing your responsive web pages with devices is always best practice, but there’s still a lot you can do in the browser to analyze responsive page appearance and behavior. In this chapter, learn how to view a page with a variety of device and screen emulators and learn how to create a custom device as well.

• Chapter 6: The Console, Part I

  The JavaScript console is the most direct and efficient way to understand and troubleshoot your code in real-time. Learn how to view console logs, “reverse engineer” your source from log entries, run JavaScript through the console and locate and edit an element using code.

• Chapter 7: The Console, Part II

  Practice techniques for modifying your JavaScript code in order to generate custom messages within the console that will help you (and other developers) debug your websites and web applications.

• Chapter 8: The Sources Tab

  As websites become more complex, learning how to track down errors and debug code is more important than ever. Learn how to make this process easier by adding breakpoints and stepping through your code in order to track down and resolve pesky errors.

• Chapter 9: Debugging a Program With the Sources Tab

  Explore the usefulness of the tools in the Sources tab by debugging a web application that has ceased to function as expected. Specifically, you’ll be learning the difference between disabling, deactivating and removing breakpoints, and how to use these features to identify problems and test your fixes.

• Chapter 10: The Network Tab

  Understanding what network calls are taking place is a crucial part of developing high performance websites. Discover how to examine the timeline of network calls, filter different types of calls, and how to navigate to the source where the network call was made.

• Chapter 11: The Performance Tab

  Understanding how your users’ system performance is affected by JavaScript and related DOM nodes is an important part of the optimization process. Learn how to record and analyze all the activity in your application as it runs and examine properties such as frame rate, CPU use, and Network calls.

• Chapter 12: The Memory Tab and Closing Thoughts

  Take a deep dive into advanced techniques related to how your web application affects memory usage within Chrome and the operating system. You’ll also review what was covered in the course and get some advice on where to find additional tips and techniques on where to learn more about Chrome Developer Tools.

Prerequisites

• Basic to intermediate competency with HTML and CSS
• Prior experience of the JavaScript console is useful
• General understanding of web technologies such as Web Fonts and JavaScript frameworks

Software Requirements

• Mac or Windows desktop or laptop
• Google Chrome web browser
• A text editor (We suggest Visual Studio Code — it’s free and available for Mac, Windows, and Linux)