Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Mastering Google Chrome DevTools Course

Name: Mastering Google Chrome DevTools Course
Rating: 4.2 (335 reviews)

Learn how to use the main tools in DevTools, including performance tools, lighthouse, accessibility, among many others.

Created byHéctor Uriel Pérez

Last updated 11/2022

English

What you'll learn

Get to know the main tools of Chrome DevTools
Knowing in which situations to use DevTools panels
How to debug JavaScript code using the DevTools
Inspect and modify the DOM
Inspect and modify CSS
Optimizing website performance

Course content

16 sections • 61 lectures • 2h 32m total length

Introduction to the course2:27
Chrome DevTools: The big picture3:44
Explore Chrome DevTools, a built-in Chrome browser toolkit for performance analysis, network monitoring, and code optimization through panels like device mode, elements, console, sources, network, performance, memory, application, and security.
Opening Chrome DevTools2:20
Installing and opening Chrome DevTools
Commands and shortcuts1:38
Playing with the Command Palette

Viewing elements in the DOM2:29
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.
Viewing elements in the DOM
Editing the DOM2:47
Editing the DOM
Acceding nodes in the Console2:18
Acceding nodes in the Console
View the properties of DOM objects2:50
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.
View the properties of DOM objects
View and change CSS1:57
View and change CSS
Inspect CSS grid2:11
Inspect CSS grid
Inspect and Debug CSS Flexbox Layouts1:04
Inspect and Debug CSS Flexbox Layouts

Log messages in Console3:21
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.
Log messages in Console
Run JavaScript in the Console1:23
Run JavaScript in the Console
Watch JavaScript values in real time with live expressions1:01
Watch JavaScript values in real time with live expressions
Format and style messages in the Console1:58
Format and style messages in the Console

Debug JavaScript5:36
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.
Debug JavaScript
Pause your code with breakpoints4:27
Pause your code with breakpoints
Run Snippets of JavaScripts1:58
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.
Run Snippets of JavaScripts
Edit and save files with Workspaces2:18
Edit and save files with Workspaces

Using the Chrome Task Manager1:55
Using the Chrome Task Manager
Discover detached DOM tree memory leaks with Heap Snapshots2:27
Discover detached DOM tree memory leaks with Heap Snapshots
Identify JS heap memory leaks with Allocation Timelines1:20
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.
Identify JS heap memory leaks with Allocation Timelines
Investigate memory allocation by function1:45
Investigate memory allocation by function

Debug Progressive Web Apps3:14
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.
Debug Progressive Web Apps
View and edit local storage2:42
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.
View and edit local storage
View and edit session storage1:38
View and edit session storage
View and change IndexedDB data3:39
View and change IndexedDB data
View, edit, and delete cookies1:13
View, edit, and delete cookies
View Cache data1:03
View Cache data
Debug background services4:33
Debug background services

Lighthouse - Audit a site3:49
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.
Lighthouse - Audit a site
Lighthouse - Improving a site from the audit5:28
Lighthouse - Improving a site from the audit
Inspect and modify CSS animation effects2:01
Inspect and modify CSS animation effects
Track your HTML, CSS, and JavaScript changes2:10
Track your HTML, CSS, and JavaScript changes
Find unused JavaScript and CSS1:39
Find unused JavaScript and CSS
Identify potential CSS improvements2:20
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.
Identify potential CSS improvements
Issues - Find and fix problems1:03
Issues - Find and fix problems
Media - View and debug media players information1:06
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.
Media - View and debug media players information
Memory Inspector - Inspect JavaScript ArrayBuffer2:14
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.
Memory Inspector - Inspect JavaScript ArrayBuffer
Network conditions - Override the user agent string0:40
Network conditions - Override the user agent string
Security - Understand security issues1:00
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.
Security - Understand security issues
Search - Find text across all loaded resources1:21
Search - Find text across all loaded resources
WebAuthn - Emulate authenticators1:50
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.
WebAuthn - Emulate authenticators

Requirements

Basic knowledge of HTML
Basic knowledge of CSS
Basic knowledge of JavaScript

Description

Did you know that with Google Chrome DevTools it is possible to analyze the performance of your websites?

Or that it is possible to simulate vision problems to create accessible sites?

If your answer was no to any of these questions, it is because you may only know and have used Google Chrome DevTools superficially.

DevTools, is a set of powerful tools that help developers to build better websites.

This is possible because DevTools contains tools to debug code, inspect elements of a website, run JavaScript code for testing, find performance issues, style issues, accessibility issues, among many others.

In this course, you will learn how to use the main tools of DevTools, starting with a video in which I explain the use of one of the tools with a case study, followed by an exercise with the necessary resources and links so you can replicate what you have seen in the video, and ending with questions about the concepts learned in the lesson.

At the end of the course, you will know how to use and where to find the main DevTools to improve your applications and websites.

Some of the topics we will see in the course are:

Tools for interacting with DOM tree elements.
Using the Console
Using the Sources panel to interact with the source code.
Visualization of network elements with the Network panel.
Tools to improve performance and find performance bottlenecks.
Tools to find rendering problems
Among many other topics.

To get the most out of the course, it is recommended to have basic knowledge of HTML, CSS and Javascript.

What are you waiting for to create better applications and websites? See you in the course

Who this course is for:

Developers who want to learn how to use the Chrome DevTools
Developers who want to improve their debugging skills
Developers who want to troubleshoot website issues
Developers who want to learn about the latest features in the Chrome DevTools

Mastering Google Chrome DevTools Course

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 10min

Simulate devices with Device Mode2 lectures • 5min

Elements7 lectures • 16min

Console4 lectures • 8min

Sources4 lectures • 14min

Network2 lectures • 8min

Performance2 lectures • 6min

Memory4 lectures • 7min

Application7 lectures • 18min

Lighthouse and other important topics13 lectures • 27min

Requirements

Description

Who this course is for: