Mastering the Google Chrome Developer Tools
3.6 (41 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,003 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering the Google Chrome Developer Tools to your Wishlist.

Add to Wishlist

Mastering the Google Chrome Developer Tools

The definitive guide to debugging web apps and web sites using the Chrome DevTools. Go from zero to advanced usage!
3.6 (41 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,003 students enrolled
Created by Flavio Copes
Last updated 4/2015
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 22 mins on-demand video
  • 13 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Feel at home in the Chrome Developer Tools, debug anything from simple Web Pages to the most complex JavaScript Web Application.
  • Go from zero experience in debug in the browser to be a master in the topic
View Curriculum
  • A (very) basic knowledge of JavaScript and HTML.
  • Have a copy of Google Chrome installed

Welcome to this Chrome Developer Tools online course.

The course is meant for students who have a (very) basic knowledge of JavaScript and HTML.

Whether you're a first timer to the DevTools, who doesn't know how to do anything on it, or an intermediate user with some basic knowledge about how to inspect the DOM or just use a little the Console, no worries! Even if you're a very advanced user, I have included many lessons that take care of any level of knowledge, and I can pretty much ensure you that you'll learn new things in this course.

The course is 60% video / screencasts, with slides and my screen filmed while I explain what I'm doing.

The course picks each separate area of the Chrome DevTools and explains it deeply along the course.

Take this course if you want to finally learn to use and go from zero to expert in the Chrome Developer Tools!

Who is the target audience?
  • The course is meant for students who have a (very) basic knowledge of JavaScript and HTML.
  • No prior programming knowledge is needed
Students Who Viewed This Course Also Viewed
Curriculum For This Course
3 Lectures 02:50

What are Chrome Developer Tools, what are they good for, why should you know about them and learn the inside out for your convenience. Spend less time debugging by knowing your debugger. For web pages, for web apps, for HTML5 mobile apps, for APIs

Preview 00:56

Know the difference between Chrome Stable, Beta and Canary, and tell which one to use for testing

Which version of Chrome should you use

We give you an overview of all the menus and panels you have access to when you first start the DevTools.

Preview 01:23
The Elements Inspector
6 Lectures 09:56

Here's an introduction to the Elements Inspector. Learn how to select any element on the page and show it in the Elements Inspector, and explore the Style Editor

Overview of the Elements Inspector

A hands-on example on how to determine which CSS file hosts a particular rule we want to change

Preview 01:25

How to determine which file is responsible for any given property, and understand the box model

Preview 01:57

Every DOM element can have listeners assigned to it. Learn what a listener is, and how to determine what it does.

Event listeners

Let's start editing the page content: change the copy on a page, change the HTML structure, modify the DOM by using Drag and Drop, change element attributes

Preview 01:32

Change colors of elements in the various ways offered by the DevTools

Preview 01:21
The Network Inspector
2 Lectures 03:05

Understand what you see on the screen when you open the Network Inspector, how to activate it and the top controls

Preview 02:16

How to disable caching for testing

Basic Console usage
8 Lectures 07:06

A first introduction to the Console, the place where errors and logging shows up, but also the place that lets you interact with the page, act on it or gain information.

Introduction to the console

The Console and the Elements Inspector are deeply linked. Learn the ways they collaborate to let you understand the page better.

Interact with the Elements Inspector from the console

console.log() was introduced in the previous lesson. Let's see how powerful it is with more advanced usage.

Using console.log formatting

Ways to clear the console, both manually and programmatically.

Clear the console with console.clear()

Count and enumerate with console.count()

Counts and lengths: console.count()

Let's see how to inspect elements that are data structures or tables in a meaningful way with console.dir() and console.table()

Logging more complex objects

The console can print things differently. Learn how to print stack traces for errors, and simpler information in other cases

Logging different error levels:, console.warn(), console.error()

Using this simple trick can sometimes give a lot of help in determining differences between two scenarios.

Preserve log upon navigation
Working with the Sources Panel
3 Lectures 03:12

Learn to navigate your project structure. Find the code you're looking for.

Introduction: look and search in content scripts

Learn how live editing works, and how can you speed up testing using it.

Live Edit

Each time you change a file, DevTools stores a copy of it, and it maintains a revision history ready to be seen. Nearly a full source control tool.

Revision history
More advanced debugging setups
4 Lectures 07:17

General and appearance settings, customize the Inspectors

Description of the DevTools settings

You'll learn what is Device Mode, a tool used to debug responsive websites and mobile applications. Simulate physical settings and various device configuration easily.

Simulate Mobile Debugging with Device Mode

Learn how to setup Source Maps on a SCSS file. The same applies to all the supported CSS Preprocessors.

CSS Preprocessors Source Maps

The best way to analyze your page for speed issues is through the use of the Audits panel. Let's see how to use it

Using the Audits panel
Advanced console logging features
4 Lectures 02:37

Using console.assert() to run tests inside your code, that will show up in the Console

Running tests in the console with console.assert()

How to group the Console logging messages for a more structured debugging

Group a series of log messages:

Measure possible performance problems, and performance gains, by printing time intervals to the console.

Measuring intervals with console.time() and console.timeEnd()

How to inspect and deeply analyze the stack trace by calling console.trace() inside a JavaScript function

Print stack traces with console.trace()
1 Lecture 00:24

Conclusion of the course, and what to expect in terms of future updates

Wrap up and Where to go from here!
About the Instructor
Flavio Copes
3.6 Average rating
41 Reviews
2,003 Students
1 Course
Computer Engineer

Flavio Copes is an Italian Computer Engineer