Jon Kuperman
Cloudflare
Introduction to Dev Tools, v3
3 hours, 22 minutes CC
Course Description
Go beyond console.log to master all the built-in tools available in Google's Chrome Developer Tools to edit, debug, and profile your web applications! You'll learn to step through your code with the debugger, audit web page performance on top of simulated network conditions. And remove "page jank" when a site isn't keeping up.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
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.
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
Section Duration: 1 hour, 26 minutes
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.
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.
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.
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.
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.
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.
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.
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.
Jon live codes the solution to the Quick Edits exercise answers a question about using breakpoints with frameworks.
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.
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.
Jon live codes the solution to the Workspaces exercise and addresses a student's question regarding live reloading.
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.
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.
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
Section Duration: 1 hour, 35 minutes
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.
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.
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.
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.
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.
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.
Jon live codes the solution to the Layout Thrashing exercise and answers a student's question about viewing the call stack.
Jon demonstrates how to run DevTools on a Node.js application by running an inspect flag in the terminal.
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.
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.
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,
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.
Wrapping Up
Section Duration: 8 minutes
Jon wraps up the course by discussing Puppeteer, Lighthouse CI, and how to enable Chrome DevTools experiments and addons including AXE and React. Links to continue learning about DevTools are also shared in this segment.
For real, you did something with this course Jon Kuperman my mind is blown by how much I’ve been underutilizing these very powerful tools. Well done!
Natalie Davis
codeFreedomRitr
This was a great overview of Chrome Dev Tools and I feel much more confident using it for optimizing websites and not just console.log 😆
Jessica Fuller
lift_eat_code
Developers who are learning to code or are early in their career often don't have much knowledge of working with the DevTools. Being able to work with the DevTools can help you tremendously.
Tiger Abrodi
TAbrodi
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops