Mastering Chrome Developer Tools v2
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Table of Contents
IntroductionJon Kuperman introduces himself and then reviews the Chome DevTools course agenda.
A History of DebuggingJon reviews a brief history of browser developer tools. Years ago developers relied on viewing the page source, alert boxes and plugins like Firebug. Today each browser has its own set of developer tools enabling a much richer debugging experience.
Developer Tool PanelsJon demonstrates how to open and navigate through the Chrome Developer Tools. He gives a brief overview of each panel as well as the device emulator. Jon will be taking a deeper dive into each of the areas later in the course.
Elements & StylesJon uses Chrome DevTools as a full-time IDE showcasing how to edit HTML and CSS. Jon reviews how to modify colors in a site through multiple options: by redefining color scheme with OS's color wheel UI, Google's Material Design color scheme, or DevTools can generate the site's own color scheme. Next, Jon shows how to edit HTML elements within a document as well as the changing element state such as hover, visited, and focus.
Specificity and DOM NodesJon reviews specificity within DevTools to narrow down which CSS rule is overriding other rules in a page design, how to change up color formats, for example changing colors values from hexadecimal to RGB, editing the DOM nodes.
DOM BreakpointsJon discusses where to locate changes that occur in DOM mutation events, such as when a node is removed, modified, or its attributes are changed.
Saving Changes in WorkspacesJon demonstrates how to create a Workspace which maps the network resources to their corresponding files in a directory on your local computer. Jon answers questions from students about Workspaces with Sass, Pug, or other preprocessing languages.
Recent Selection HistoryJon reviews how Chome DevTools stores recent selection in elements inspector through a special variable, $0, accessible in the console.
Editing a Page ExerciseIn this exercise, students edit an HTML page using the Google Chrome Dev Tools. Jon answers a question about persisting HTML in DevTools.
Editing a Page SolutionJon walks through the Editing Exercise demonstrating how to edit through Chrome DevTools. Jon takes questions from students.
Conditional & XHR BreakpointsJon discusses conditional breakpoints, which allow you to enter a boolean statement which will be tested before the breakpoints is executed. An XHR breakpoint will only run a breakpoint when an XHR request contains a specified string of text.
Debugging ExerciseIn this exercise, students figure out why images are not loading when a button is clicked.
Debugging SolutionJon walks through the Debugging Exercise solution.
The WaterfallJon demonstrates the Network panel, which displays a lot of information about how the page loaded including a filterable waterfall diagram that shows when and how long each asset took to load. Detailed information about each asset including size, type, and an initiator is listed at the bottom.
Color CodesJon reviews the meanings behind the color codes that are displayed in a Chrome DevTools waterfall diagram.
ScreenshotsJon illustrates how to take screenshots as a page is loaded to inspect the user’s experience at different points during the loading process.
Auditing ToolsAfter discussing that the performance of a webpage can translate to a loss in traffic or even a decline in sales, Jon demonstrates auditing tools that look at a site's performance and interactivity.
Audit ExerciseIn this exercise, students run a page audit and performance analysis.
Audit SolutionJon walks through the solution to the Audit Exercise by conducting audits through Lighthouse service and inspecting elements with DevTools. Jon reviews common problems that are discovered from audits.
The --inspect FlagJon introduces debugging Node.js applications by running an app with the --inspect flag.
Node.js Debugging ExerciseIn this exercise, students work on debugging a Node.js application.
Node.js Debugging SolutionJon walks through the solution to the Node.js Debugging Exercise by showing how to debug a Node.js application. Jon takes questions from students.
The Performance APIJon introduces the Performance API that provides access to performance-related information for the current page.
Mark and Measure ExerciseIn this exercise, students need to determine how long an API call takes to complete.
Mark and Measure SolutionJon walks through the solution to the Mark and Measure Solution to determine the time for an API call.
Querying By SizeJon reviews images performance in the context of responsive websites and how srcset HTML tag for image elements can aid in delivering the right image for the appropriate browser viewport width.
srcset ExerciseIn this exercise, students update an image element to include options for the browser to pick the appropriate image depending on the browser viewport width.
srcset SolutionJon walks through the solution to srcset Exercise by adding values to the srcset attribute so that the browser can deliver a preferred image to the preferred browser viewport width.
Page JankJon discusses performance issues within web applications such as page jank. Page jank is any stuttering or halting the user sees when a site or app isn’t keeping up with the refresh rate. Most devices refresh their screens 60 times per second. The goal is for the browser to match this refresh rate to keep the webpage or application looking smooth.
Performance PanelJon reviews Performance panel, which is used to analyze runtime performance, to demonstrate how to create a performance profile and read the rendering graphs.
Page Jank ExericseIn this exercise, students smooth animation to remove "jankiness" in the animation.
Page Jank SolutionJon walks through the solution to the Page Jank Exercise by using Performance panel to isolate the issue and then refining the animation code.
Chrome Task Manager & SnapshotsJon introduces the Chrome Task Manager, which is a real-time monitor that tells how much memory a page is currently using. Next, Jon demonstrates the Heap Snapshot feature in the Profile panel which allows you to compare the difference in memory from two different points in time in the application.
Memory Leaks ExerciseIn this exercise, students need to find out which of four pages have a memory leak.
Memory Leaks SolutionJon walks through the solution to the Memory Leaks Exercise using the Chrome Task Manager to identify the page with the memory leak. Then, Jon figures the potential causes of the memory leak by using the Heap snapshot.