This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Table of Contents
Introduction
Introduction
Jon Kuperman introduces himself and then reviews the Chome DevTools course agenda.A History of Debugging
Jon 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 Panels
Jon 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.
Editing
Elements & Styles
Jon 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 Nodes
Jon 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 Breakpoints
Jon 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 Workspaces
Jon 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 History
Jon reviews how Chome DevTools stores recent selection in elements inspector through a special variable, $0, accessible in the console.Editing a Page Exercise
In 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 Solution
Jon walks through the Editing Exercise demonstrating how to edit through Chrome DevTools. Jon takes questions from students.
Debugging
Step Through Debugging
Jon introduces the debugging tools located under the Sources panel, explaining how to set breakpoints, add watch variables, and explore code within the call stack. Jon shows how to use the debugger API which allows you to use the debugger; JavaScript statement in your code to force the browser to break on a specific line. Jon answers questions from students.Blackboxing
Most of the time, JavaScript errors will be located within the application source code and not inside any included libraries. Jon demonstrates how to “blackbox” scripts, so the browser developer tools ignore them.Conditional & XHR Breakpoints
Jon 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 Exercise
In this exercise, students figure out why images are not loading when a button is clicked.Debugging Solution
Jon walks through the Debugging Exercise solution.
Networking
The Waterfall
Jon 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 Codes
Jon reviews the meanings behind the color codes that are displayed in a Chrome DevTools waterfall diagram.Screenshots
Jon illustrates how to take screenshots as a page is loaded to inspect the user’s experience at different points during the loading process.
Auditing
Auditing Tools
After 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 Exercise
In this exercise, students run a page audit and performance analysis.Audit Solution
Jon 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.
Node.js Profiling
The --inspect Flag
Jon introduces debugging Node.js applications by running an app with the --inspect flag.Node.js Debugging Exercise
In this exercise, students work on debugging a Node.js application.Node.js Debugging Solution
Jon walks through the solution to the Node.js Debugging Exercise by showing how to debug a Node.js application. Jon takes questions from students.
Performance Monitoring
The Performance API
Jon introduces the Performance API that provides access to performance-related information for the current page.Mark and Measure Exercise
In this exercise, students need to determine how long an API call takes to complete.Mark and Measure Solution
Jon walks through the solution to the Mark and Measure Solution to determine the time for an API call.
Image Performance
Querying By Size
Jon 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 Exercise
In 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 Solution
Jon 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 Jank
Page Jank
Jon 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 Panel
Jon 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 Exericse
In this exercise, students smooth animation to remove "jankiness" in the animation.Page Jank Solution
Jon walks through the solution to the Page Jank Exercise by using Performance panel to isolate the issue and then refining the animation code.
Memory
Causes of Memory Leaks
In JavaScript, memory is freed up through a process called garbage collection. Objects that are no longer referenced are flagged and cleared by the garbage collector. A memory leak typically occurs when an object that should be garbage collected is not. Jon talks through a few of the most common places memory leaks occur in JavaScript.Chrome Task Manager & Snapshots
Jon 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 Exercise
In this exercise, students need to find out which of four pages have a memory leak.Memory Leaks Solution
Jon 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.