Mastering Google Chrome DevTools Course

Use Chrome DevTools device mode to simulate a mobile viewing window, adjust viewport sizes and percentages, edit or add custom devices with user agents, and test media queries and rotation.

Throttle the network and CPU in Chrome DevTools to simulate slow connections and CPU slowdowns. Create network limitation profiles, run speed tests, and observe how bandwidth and processing power change.

Explore the elements tab to view DOM nodes with dev tools, inspect elements, navigate the DOM tree with arrows, and search by text, CSS selectors, or expat selectors.

Edit dom elements by double-clicking to change text, attributes, and html blocks; reorder nodes, force states, and use undo to preview and revert changes.

Discover how to access dom nodes in the console with $0, store five global references that disappear on refresh, reuse them to modify attributes, copy paths, and test JavaScript expressions.

Explore how devtools reveals DOM element properties in the properties tab, showing simple properties, objects and arrays, prototype inheritance, and searchable attributes like href while inspecting child nodes and methods.

Explore how to view and edit CSS in DevTools, right-click an element to inspect styles, modify the box model, and preview live changes.

Explore how to inspect CSS grid with Chrome DevTools, visualizing grids, highlighting elements, and using layout panels to adjust alignment, lines, sizes, names, and overlays.

Explore how to inspect and debug flexbox and grid layouts with DevTools, view the DOM, open the flexbox editor, visualize overlays, and use layout options in the layout tab.

Explore how the Ref Tools console displays JavaScript messages—log info, log warning, and log error—with stack traces, source links, and browser errors, and filter by level or text.

Learn how the Chrome DevTools console evaluates JavaScript expressions, prints results, and lets you test functions or generate values, including modifying element values and debugging code.

Learn to watch JavaScript values in real time using live expressions in the console, add multiple expressions, and see updates quickly as you interact with the page.

Master formatting and styling console messages using format specifiers like %d and %s, and apply CSS styles with %c to customize output in the browser console.

Explore the sources panel in Chrome DevTools to set breakpoints, inspect variables in scope, and step through code with step, step into, and resume controls, testing fixes via the console.

Master debugging with Chrome DevTools by using line-of-code breakpoints, debugger statements, and conditional breakpoints; manage them in the breakpoints panel and trigger on DOM changes or network requests.

Create and manage JavaScript snippets in Chrome DevTools, run them on any page, and save, rename, or delete snippets from the sources panel or command menu.

Use the workspaces feature in the sources panel to save edits to CSS, HTML, and JS on your local files, with changes retained after refresh.

Explore the network panel to verify resource downloads, inspect HTTP headers and sizes, and analyze the waterfall and overview timeline to spot bottlenecks.

Learn to view network properties by searching for a file across multiple DevTools panels, filter results, and reveal the file in the network panel to inspect load type information.

Explore how to use the Chrome DevTools performance panel to diagnose runtime performance, measure frames per second and CPU usage, and interpret recordings to identify performance issues.

Identify bottlenecks with the performance tool by examining scripting and rendering. Optimize the update function in JavaScript by using a variable instead of per-frame style changes, and observe FBS improvements.

Explore Chrome's memory panel and task manager to diagnose memory issues like leaks and garbage collections, and visualize real-time memory usage of native memory and the JavaScript heap.

Identify detached DOM nodes and memory leaks using heap snapshots in Chrome DevTools. Learn to create detached nodes, capture snapshots, and filter results to locate the leak source in code.

Explore how the allocation timeline tool detects memory leaks in the JavaScript heap by visualizing allocations as blue bars and inspecting strings stored in the window scope.

Investigate memory allocation by function using DevTools, run allocation sampling to identify memory hotspots such as the growth function and do something three while creating 100, 5,000, and 50,000 elements.

Learn how devtools exposes progressive web app details, from manifest and identity to installation, protocol handlers, and testing protocol registrations, including installation and uninstall flows.

Learn to view, save, edit, and retrieve local storage data in the browser, using the devtools local storage panel and console for key-value management.

Learn how to view and edit session storage, contrast session storage with local storage, and manage key value records in the application panel, including creating and deleting data.

Explore how to view and modify IndexedDB data in Chrome DevTools, including opening databases, inspecting object stores and indexes, and using snippets to update or delete records.

View, edit, and delete cookies in the DevTools cookies panel, filtering by name or value, and clearing all cookies for a site.

Learn how to view and manage cache data in Chrome DevTools by inspecting cache storage, refreshing items, viewing HTTP headers and previews, and deleting selected or all cached items.

Analyze background services with service workers using the background fetch and background sync APIs, including offline handling, event logging, and push notifications via the notification API.

Lighthouse in dev tools analyzes page performance, shows a report with issues and fixes, and guides you through navigation, time-span, and snapshot modes with device simulation and improvement opportunities.

Resize images, compress them, remove render-blocking resources, deliver only critical JavaScript and CSS, and defer non-critical resources to boost Lighthouse performance scores.

Inspect and modify CSS animation effects using the Chrome DevTools animation tool to adjust duration, speed, and start time, view the timeline, and manage animation groups.

Track html, css, and javascript changes in Chrome DevTools using the overrides window with a local folder. Edit html and javascript in sources panel, and css in styles window.

Explore the coverage tool in Chrome DevTools and run tests from the command menu to identify unused JavaScript and CSS and load only necessary resources.

Identify potential CSS improvements using DevTools capture overview to analyze colors, contrast, fonts, and unused declarations, then navigate to the elements panel to address accessibility issues.

Centralize browser problems with DevTools using the issues tool to detect cookies and mixed content, then open the issues window for details, affected resources, and a recommended fix.

Learn to view and debug media player information with Chrome DevTools, inspecting properties like resolution and decoders, and tracing playback events. Save the gathered data as JSON for analysis.

Discover how to inspect a JavaScript ArrayBuffer in Chrome dev tools, use breakpoints, reveal in memory inspector, view data view, and switch between big and little endian and encoding.

Override the user agent string in DevTools using the network conditions panel from the command menu, selecting a common agent or entering a custom one to test a site.

Open the security panel in DevTools to evaluate a site's security, reload for analysis, and view issues on secured origins, mixed content, and certificate information.

Learn to perform global searches across resources using the devtools search window, viewing results in the sources panel, and searching HTML elements, CSS selectors, case-sensitive options, and regular expressions.

Learn how WebAuthn enables passwordless authentication using device authenticators, then emulate, configure, and test virtual authenticators in Chrome DevTools to register credentials and simulate sign-ins.