Introduction to Dev Tools, v3
Table of Contents
IntroductionJon 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 HistoryJon 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.
Elements & Network PanelsJon 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.
Sources, Application, & Memory PanelsJon 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 FinderJon 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 ViewJon 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 & SpecificityJon 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 SolutionJon live codes the solution to the Quick Edits exercise answers a question about using breakpoints with frameworks.
WorkspacesJon 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 ExerciseJon 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 SolutionJon live codes the solution to the Workspaces exercise and addresses a student's question regarding live reloading.
Step Through DebuggingJon 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 ExerciseJon 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&AJon 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 WaterfallJon 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&AJon 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 PerformanceJon 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 PerformanceJon 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.
Layout Thrashing ExerciseJon 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 SolutionJon live codes the solution to the Layout Thrashing exercise and answers a student's question about viewing the call stack.
Running Node.jsJon demonstrates how to run DevTools on a Node.js application by running an inspect flag in the terminal.
Simulating Network ConditionsJon 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 AuditsJon 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.