Mastering Google Chrome DevTools Course

Focused View

Héctor Uriel Pérez

2:32:25

112 View

1. Introducction

1. Introduction to the course.mp4

02:27

2. Chrome DevTools The big picture.mp4

03:44

3. Open Chrome DevTools.mp4

02:20

4. Installing and opening Chrome DevTools.html

5. Commands and shortcuts.mp4

01:38

6. Playing with the Command Palette.html

2. Simulate devices with Device Mode

1. Simulate mobile devices with Device Mode.mp4

03:07

2. Simulating mobile devices.html

3. Throttle the network and CPU.mp4

01:51

4. Throttling the network and CPU.html

3. Elements

1. Viewing elements in the DOM.mp4

02:29

2. Viewing elements in the DOM.html

3. Editing the DOM.mp4

02:47

4. Editing the DOM.html

5. Acceding nodes in the Console.mp4

02:18

6. Acceding nodes in the Console.html

7. View the properties of DOM objects.mp4

02:50

8. View the properties of DOM objects.html

9. View and change CSS.mp4

01:57

10. View and change CSS.html

11. Inspect CSS grid.mp4

02:11

12. Inspect CSS grid.html

13. Inspect and Debug CSS Flexbox Layouts.mp4

01:04

14. Inspect and Debug CSS Flexbox Layouts.html

4. Console

1. Log messages in Console.mp4

03:21

2. Log messages in Console.html

3. Run JavaScript in the Console.mp4

01:23

4. Run JavaScript in the Console.html

5. Watch JavaScript values in real time with live expressions.mp4

01:01

6. Watch JavaScript values in real time with live expressions.html

7. Format and style messages in the Console.mp4

01:58

8. Format and style messages in the Console.html

5. Sources

1. Debug JavaScript.mp4

05:36

2. Debug JavaScript.html

3. Pause your code with breakpoints.mp4

04:27

4. Pause your code with breakpoints.html

5. Run Snippets of JavaScripts.mp4

01:58

6. Run Snippets of JavaScripts.html

7. Edit and save files with Workspaces.mp4

02:18

8. Edit and save files with Workspaces.html

6. Network

1. Inspect network activity.mp4

07:27

2. Inspect network activity.html

3. Viewing network properties by searching for a file.mp4

00:50

4. Viewing network properties by searching for a file.html

7. Performance

1. Analyze runtime performance.mp4

03:36

2. Analyze runtime performance.html

3. Finding bottlenecks.mp4

02:34

4. Finding bottlenecks.html

8. Memory

1. Using the Chrome Task Manager.mp4

01:55

2. Using the Chrome Task Manager.html

3. Discover detached DOM tree memory leaks with Heap Snapshots.mp4

02:27

4. Discover detached DOM tree memory leaks with Heap Snapshots.html

5. Identify JS heap memory leaks with Allocation Timelines.mp4

01:20

6. Identify JS heap memory leaks with Allocation Timelines.html

7. Investigate memory allocation by function.mp4

01:45

8. Investigate memory allocation by function.html

9. Application

1. Debug Progressive Web Apps.mp4

03:14

2. Debug Progressive Web Apps.html

3. View and edit local storage.mp4

02:42

4. View and edit local storage.html

5. View and edit session storage.mp4

01:38

6. View and edit session storage.html

7. View and change IndexedDB data.mp4

03:39

8. View and change IndexedDB data.html

9. View, edit, and delete cookies.mp4

01:13

10. View, edit, and delete cookies.html

11. View Cache data.mp4

01:03

12. View Cache data.html

13. Debug background services.mp4

04:33

14. Debug background services.html

10. Lighthouse and other important topics

1. Lighthouse - Audit a site.mp4

03:49

2. Lighthouse - Audit a site.html

3. Lighthouse - Improving a site from the audit.mp4

05:28

4. Lighthouse - Improving a site from the audit.html

5. Inspect and modify CSS animation effects.mp4

02:01

6. Inspect and modify CSS animation effects.html

7. Track your HTML, CSS, and JavaScript changes.mp4

02:10

8. Track your HTML, CSS, and JavaScript changes.html

9. Find unused JavaScript and CSS.mp4

01:39

10. Find unused JavaScript and CSS.html

11. Identify potential CSS improvements.mp4

02:20

12. Identify potential CSS improvements.html

13. Issues - Find and fix problems.mp4

01:03

14. Issues - Find and fix problems.html

15. Media - View and debug media players information.mp4

01:06

16. Media - View and debug media players information.html

17. Memory Inspector - Inspect JavaScript ArrayBuffer.mp4

02:14

18. Memory Inspector - Inspect JavaScript ArrayBuffer.html

19. Network conditions - Override the user agent string.mp4

00:40

20. Network conditions - Override the user agent string.html

21. Security - Understand security issues.mp4

01:00

22. Security - Understand security issues.html

23. Search - Find text across all loaded resources.mp4

01:21

24. Search - Find text across all loaded resources.html

25. WebAuthn - Emulate authenticators.mp4

01:50

26. WebAuthn - Emulate authenticators.html

11. Recorder

1. Record, replay, and measure user flows.mp4

07:11

2. Record, replay, and measure user flows.html

12. Rendering

1. Discover issues with rendering performance.mp4

04:24

2. Discover issues with rendering performance.html

3. Emulate CSS media features.mp4

02:25

4. Emulate CSS media features.html

5. Apply other effects - enable automatic dark theme, emulate focus, and more.mp4

02:43

6. Apply other effects - enable automatic dark theme, emulate focus, and more.html

13. Sensors

1. Override geolocation.mp4

01:32

2. Override geolocation.html

3. Simulate device orientation.mp4

00:43

4. Simulate device orientation.html

14. Remote debugging

1. Remote debug Android devices.mp4

02:43

2. Remote debug Android devices.html

3. Access local servers.mp4

01:57

4. Access local servers.html

15. Accesbility

1. Audit a pages accessibility.mp4

02:45

2. Audit a pages accessibility.html

3. Make your website more readable.mp4

02:33

4. Make your website more readable.html

5. Track element focus.mp4

00:43

6. Track element focus.html

16. Settings and customization

1. Setting options and customizing DevTools.mp4

03:24

2. Setting options and customizing DevTools.html

Description

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

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

Who is this 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

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Developer Tools

Héctor Uriel Pérez

Instructor's Courses

I am a Microsoft MVP, Master in Computer Science with a major in Software Engineering from the National Center for Research and Technological Development, with more than 10 years of experience in development with the .NET platform. Throughout my career, I have participated in projects for the Electrical Research Institute, the National Autonomous University of Mexico, as well as different private companies. I am recognized as a technology influencer, and I have certifications of specialization in Microsoft technologies development. My areas of interest are software architecture, web technologies, user interfaces, mobile development, internet of things, databases and cloud computing.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.