Mastering Chrome Developer Tools v2

Jon Kuperman introduces himself and then reviews the Chome DevTools course agenda.

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.

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.

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.

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.

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.

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.

Jon reviews how Chome DevTools stores recent selection in elements inspector through a special variable, $0, accessible in the console.

In this exercise, students edit an HTML page using the Google Chrome Dev Tools. Jon answers a question about persisting HTML in DevTools.

Jon walks through the Editing Exercise demonstrating how to edit through Chrome DevTools. Jon takes questions from students.

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.

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.

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.

In this exercise, students figure out why images are not loading when a button is clicked.

Jon walks through the Debugging Exercise solution.

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.

Jon reviews the meanings behind the color codes that are displayed in a Chrome DevTools waterfall diagram.

Jon illustrates how to take screenshots as a page is loaded to inspect the user’s experience at different points during the loading process.

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.

In this exercise, students run a page audit and performance analysis.

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.

Jon introduces debugging Node.js applications by running an app with the --inspect flag.

In this exercise, students work on debugging a Node.js application.

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.

Jon introduces the Performance API that provides access to performance-related information for the current page.

In this exercise, students need to determine how long an API call takes to complete.

Jon walks through the solution to the Mark and Measure Solution to determine the time for an API call.

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.

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.

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.

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.

Jon reviews Performance panel, which is used to analyze runtime performance, to demonstrate how to create a performance profile and read the rendering graphs.

In this exercise, students smooth animation to remove "jankiness" in the animation.

Jon walks through the solution to the Page Jank Exercise by using Performance panel to isolate the issue and then refining the animation code.

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.

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.

In this exercise, students need to find out which of four pages have a memory leak.

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.

Jon reviews DevTools experiments to see what new developments are being worked on for future releases.