Chrome Developer Tools Course

Name: Chrome Developer Tools Course
Rating: 4.2 (118 reviews)

Learn Chrome DevTools to edit, debug, test and optimize your web apps

Created bySofia Kostiunina

Last updated 1/2019

English

What you'll learn

Edit websites on-the-fly
Test ideas and quickly make some design changes
Add workspaces and persist changes to disk
Use command menu
Debug JavaScript code
Set breakpoints
Use Console Log and other commands
Improve load and runtime performance
Analyze security issues
Find memory leaks and fix memory problems
Make audit and improve website's google ranking
Inspect and Debug Progressive Web Apps

Course content

4 sections • 27 lectures • 2h 18m total length

Introduction0:47
Introduction to the course
Chrome Developer Tools Overview1:02
This is a short overview of Chrome DevTools advantages.
Chrome Developer Tools resources0:21
Panels overview6:55
This video describes key functions of the Chrome DevTools top-level tabs or panels.

HTML and DOM changes4:36
In this video you will learn to use elements panel in your experiments with HTML and DOM changes
Edit CSS5:36
Learn to use Chrome Dev Tools to view and change page's CSS in your experiements with styles
Command menu2:20
Navigate and discover new settings and actions with DevTools Command Menu
Adding a workspace5:48
Add workspaces to Chrome to save changes to a local copy on your computer
Elements panel_Keyboard shortcuts0:50
Elements panel quiz

Web fundamentals / Performance matters2:22
What is website performance and why is it important
Critical Rendering Path6:24
Find out what is critical rendering path and how does it work!
Critical Rendering Path Optimization6:34
Learn how to optimize the Critical Rendering Path
Network panel11:26
Learn to record and analyze network performance
Performance panel10:33
Learn to record and analyze runtime performance
Memory panel5:48
Learn to use the Memory panel to find memory leaks, memory bloat and frequent garbage collections
Garbage Collector4:57
What is garbage collector and how to use Chrome Developer Tools to analyze it
Application panel7:24
Manage manifests, service workers and service worker cashes and inspect storage, databases, cashes and frames
Security panel2:06
Use the Security panel to find out and debug security issues
HTTP/HTTP2/HTTPS5:00
Find out the difference between HTTP, HTTPS and HTTP2 protocols. Make your website secure and fast!
Audits panel5:12
Run an audit to find and solve performance issues
Audit and Performance quiz
Bonus lecture: Additional tools5:22
Discover even more useful tools
Bonus lecture: Increase your website speed: Image Optimization7:43
Several tips you need to know about images that will help you increase your website speed!

Requirements

basic knowledge of html, css and/or javascript (for debugging)

Description

Google Chrome is currently one of the most popular web browsers used by web developers today, but most people only know about the most basic features. Chrome Developer Tools provide deeper access to the web applications and knowledge of additional features can increase productivity and your work speed.

During the course you will learn such things as..

Inspect and Edit HTML and CSS

Debug JavaScript

Set Breakpoints

Console Logs and other Commands

Use Snippets

Add Workspaces and Persist Changes to Disk

View and Remove Browser Storage

Examine Network and Resources

Analyze Memory and Security Problems

Optimize Critical Rendering Path

Discover useful tools

Test and Optimize Performance

Perform Audits

Optimize Website's Speed

This course consists of 3 main sections: editing, debugging, testing and optimizing performance. We'll walk through each of 9 panels of Chrome's developer tools and learn all the great, useful things they can do.

After finishing this course you'll be able to use your new knowledge in developing faster and better apps!

Who this course is for:

web-developers
web-designers
software developers
project/product managers

Chrome Developer Tools Course

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 9min

Elements panel5 lectures • 19min

Debugging5 lectures • 29min

Audit and Performance13 lectures • 1hr 21min

Requirements

Description

Who this course is for: