Mastering Google Chrome DevTools Course

Mastering Google Chrome DevTools Course, available at $54.99, has an average rating of 4.45, with 61 lectures, based on 226 reviews, and has 2091 subscribers.

You will learn about 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 This course is ideal for individuals who are Developers who want to learn how to use the Chrome DevTools or Developers who want to improve their debugging skills or Developers who want to troubleshoot website issues or Developers who want to learn about the latest features in the Chrome DevTools It is particularly useful for Developers who want to learn how to use the Chrome DevTools or Developers who want to improve their debugging skills or Developers who want to troubleshoot website issues or Developers who want to learn about the latest features in the Chrome DevTools.

Enroll now: Mastering Google Chrome DevTools Course

Summary

Title: Mastering Google Chrome DevTools Course

Price: $54.99

Average Rating: 4.45

Number of Lectures: 61

Number of Published Lectures: 61

Number of Curriculum Items: 120

Number of Published Curriculum Objects: 120

Original Price: $39.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to the course

Lecture 2: Chrome DevTools: The big picture

Lecture 3: Opening Chrome DevTools

Lecture 4: Commands and shortcuts

Chapter 2: Simulate devices with Device Mode

Lecture 1: Simulate mobile devices with Device Mode

Lecture 2: Throttle the network and CPU

Chapter 3: Elements

Lecture 1: Viewing elements in the DOM

Lecture 2: Editing the DOM

Lecture 3: Acceding nodes in the Console

Lecture 4: View the properties of DOM objects

Lecture 5: View and change CSS

Lecture 6: Inspect CSS grid

Lecture 7: Inspect and Debug CSS Flexbox Layouts

Chapter 4: Console

Lecture 1: Log messages in Console

Lecture 2: Run JavaScript in the Console

Lecture 3: Watch JavaScript values in real time with live expressions

Lecture 4: Format and style messages in the Console

Chapter 5: Sources

Lecture 1: Debug JavaScript

Lecture 2: Pause your code with breakpoints

Lecture 3: Run Snippets of JavaScripts

Lecture 4: Edit and save files with Workspaces

Chapter 6: Network

Lecture 1: Inspect network activity

Lecture 2: Viewing network properties by searching for a file

Chapter 7: Performance

Lecture 1: Analyze runtime performance

Lecture 2: Finding bottlenecks

Chapter 8: Memory

Lecture 1: Using the Chrome Task Manager

Lecture 2: Discover detached DOM tree memory leaks with Heap Snapshots

Lecture 3: Identify JS heap memory leaks with Allocation Timelines

Lecture 4: Investigate memory allocation by function

Chapter 9: Application

Lecture 1: Debug Progressive Web Apps

Lecture 2: View and edit local storage

Lecture 3: View and edit session storage

Lecture 4: View and change IndexedDB data

Lecture 5: View, edit, and delete cookies

Lecture 6: View Cache data

Lecture 7: Debug background services

Chapter 10: Lighthouse and other important topics

Lecture 1: Lighthouse – Audit a site

Lecture 2: Lighthouse – Improving a site from the audit

Lecture 3: Inspect and modify CSS animation effects

Lecture 4: Track your HTML, CSS, and JavaScript changes

Lecture 5: Find unused JavaScript and CSS

Lecture 6: Identify potential CSS improvements

Lecture 7: Issues – Find and fix problems

Lecture 8: Media – View and debug media players information

Lecture 9: Memory Inspector – Inspect JavaScript ArrayBuffer

Lecture 10: Network conditions – Override the user agent string

Instructors

Héctor Uriel Pérez
Microsoft MVP

Rating Distribution

1 stars: 3 votes

2 stars: 8 votes

3 stars: 33 votes

4 stars: 82 votes

5 stars: 100 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!