Table of Contents
Introduction
Introduction
Jon Kuperman introduces the course, provides course materials including the GitHub repository, discusses the benefits of learning to use DevTools, and provides a course outline. Debugging, web performance, and insight into how other websites work are a few benefits discussed.DevTools History
Jon demonstrates how to inspect using DevTools, what is being displayed in the Elements tab, and how to view source code. The past process of checking for values and objects in source code and past tools used to help debug code.
Setup
Elements & Network Panels
Jon demonstrates actions using the Elements panel including how to view HTML and CSS, add/change classes and IDs, and Update Styles. How to view files sent from server, measure load performance, and inspect request and response data using the Network panel is also covered in this segment.Performance, Console, & Security Panels
Jon walks through how to record CPU, record memory usage, inspect threads, and spot page performance issues using the Performance panel. How to use the JavaScript REPL and interact with the DOM using the Console panel is also covered. A demonstration of using the Security panel to check that requests use HTTPS, view certificates, and view any TLS/SSL issues is also provided in this segment.Sources, Application, & Memory Panels
Jon uses the Sources panel to view a full IDE, access a step through debugger, and persist changes to disk. The Application panel can be used for viewing application storage, checking PWA features, and clearing the cache. Generating memory snapshots and how to find and fix memory leaks using the Memory panel is also covered in this segment.Lighthouse, Device Emulation, & Element Finder
Jon discusses the usage of Lighthouse as a full website auditor and how to use the feedback generated to check page performance, SEO, and accessibility. The ability to emulate different device screen sizes, request headers, and testing touch events is also covered. The element finder can be used to quickly select specific elements and view them in the Elements panel.Quick Edits: CSS, HTML, & Scroll Into View
Jon uses Chrome DevTools to demonstrate editing CSS and HTML, scroll into view, console shortcuts, hiding and showing elements, and simulating state changes. These DevTool features can be used to instantly see changes on the DOM and help find specific page elements.Quick Edits: Computed Styles & Specificity
Jon discusses how CSS determines what styles should be displayed using selector specificity. The computed styles feature will show which CSS styles will render after applying specificity rules.Quick Edits: HTML Breakpoints, Themes, & Accessibility
Jon demonstrates how to set HTML breakpoints to find which line of JavaScript is altering a selected line of HTML. How to set themes, view which colors are on the current page, and how to view the accessibility panel are also covered in this segment.Quick Edits Exercise
Jon instructs students to change an ordered list to an unordered list, find the JavaScript that calls the alert, decide what color the revealed blockquote will be, and find the border color of a card with a specific id.Quick Edits Solution
Jon live codes the solution to the Quick Edits exercise answers a question about using breakpoints with frameworks.Workspaces
Jon introduces the ability to use DevTools as an IDE and discusses the limitations of Workspaces. Templating languages and the Create React App framework will not work with Workspaces. Jon also answers a student's question regarding persisting changes through a refresh.Workspaces Exercise
Jon instructs students to open the workspace folder in the Workspace and complete the three tasks outlined in the Workspace. A student's question regarding saving changes in the sources panel is also covered.Workspaces Solution
Jon live codes the solution to the Workspaces exercise and addresses a student's question regarding live reloading.Step Through Debugging
Jon demonstrates how to use the step through debugger in DevTools to pause the execution of an app on a specified line of code. This segment covers how to set and activate breakpoints, the debugger keyword, walk the call stack, conditional breakpoints, and setting XHR breakpoints.Step Through Debugging Exercise
Jon instructs students to use step through debugging to find out why the list isn't populating from the API call. A student's question about removing all breakpoints is also covered.Step Through Debugging Solution and Q&A
Jon live codes the solution to the Step Through Debugging exercise. Student's questions regarding what can be put in the Watcher, how to avoid issues with Chrome extensions, when watcher values should be set, and how to persist changes without using workspace are also covered in this segment.
Network & User Performance
Network Performance & Network Waterfall
Jon discusses the importance of page load time and its effect on user traffic. Network terminology, filtering requests, inspecting packets, how to watch an app load with screenshots, simulating network conditions, emulating offline mode, and discussing the network waterfall are also covered in this segment.Network Performance Q&A
Jon answers students questions regarding the correlation between priority and waterfall, if TTFB and waiting are server side or front end issues, if the user's machine is taken into consideration, what the Initiator column contains, how to use the advanced search options, and displaying memory cache.Measuring Real User Performance
Jon discusses the history of measuring user performance by using getTime and console.time to measure the time it takes to send and receive data. The current method of using performance mark and measure from the performance API to see the actual loading time.On-Page Performance
Jon demonstrates how to read a flamegraph, find page jank, paint rectangles, check your applications FPS, find slow functions, and view web vitals. Discussing what scripting, rendering, and painting are is also covered in this segment.Performance Panel & Page Jank Tips
Jon discusses different rows in the Performance panel and demonstrates how improve performance by using requestAnimationFrame, web workers, frameworks, and reducing code complexity. Web workers can be invoked from any JavaScript file using the given code and creating a worker.js file.Layout Thrashing Exercise
Jon instructs students to generate enough images to cause page jank, run a performance recording, look for ways to quickly recognise page jank, and find what the optimize button does to help the site run faster.Layout Thrashing Solution
Jon live codes the solution to the Layout Thrashing exercise and answers a student's question about viewing the call stack.Running Node.js
Jon demonstrates how to run DevTools on a Node.js application by running an inspect flag in the terminal.Memory Leaks & Memory Heap Snapshots
Jon discusses how to recognise a JavaScript memory leak by using Chrome Task Manager, the Performance panel, and the Memory panel. The Chrome Task Manager is not part of the DevTools, but can be used to display JavaScript memory being used by Chrome tabs. A student's question regarding what to look for in the performance panel to recognise a memory leak is also covered.What Can Slow Down a Website
Jon discusses different problems that can slow down your website on both the back end and the front end. Back end issues include the database, server, network, and file compression. Front end issues include having large JavaScript bundles, too many files, images or JavaScript not being async, images are to large, uncompressed images, unused JavaScript or CSS, CSS in Document Body, and not using browser caching.Simulating Network Conditions
Jon demonstrates how to simulate different network speeds using the Network panel and CPU throttling on the Performance panel. Student questions regarding services that look for dead code,Lighthouse Audits
Jon demonstrates how to use Lighthouse to audit an application and discusses the meaning of the different scores generated. The metrics rated are performance, PWA, best practices, accessibility, SEO, and mobile and desktop performance.