Build Better Websites With Chrome Developer Tools will familiarize you with all aspects of the built-in developer tools within the Chrome browser. Understanding how to use these tools will speed up your development time and help you create bug-free, high-performing pages and web applications.
About This Course
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
Chapter 7: The Console, Part II
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
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.
- Basic to intermediate competency with HTML and CSS
- 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)