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.9 (36 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.
1,923 students enrolled
Free
Start Learning Now
  • Lectures 31
  • Length 40 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course Description

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!

What are the requirements?

  • A (very) basic knowledge of JavaScript and HTML.
  • Have a copy of Google Chrome installed

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
00:56

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

Article

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

01:23

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

Section 2: The Elements Inspector
Article

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

01:25

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

01:57

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

Article

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

01:32

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

01:21

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

Section 3: The Network Inspector
02:16

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

00:49

How to disable caching for testing

Section 4: Basic Console usage
Article

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.

01:23

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

Article

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

Article

Ways to clear the console, both manually and programmatically.

Article

Count and enumerate with console.count()

Article

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

Article

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

00:53

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

Section 5: Working with the Sources Panel
Article

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

00:37

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

01:04

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.

Section 6: More advanced debugging setups
Article

General and appearance settings, customize the Inspectors

01:36

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.

01:27

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

00:51

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

Section 7: Advanced console logging features
00:37

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

Article

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

00:46

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

00:38

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

Section 8: Conclusion
Article

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Flavio Copes, Computer Engineer

Flavio Copes is an Italian Computer Engineer with over 18 years of experience in Web Technologies and has been building websites and web applications since 1997. 33 years old, wrote programs in dozens of languages.

His open source software, JooCommerce, is an awesome FREE e-commerce platform for Joomla and runs on thousands of websites

Ready to start learning?
Start Learning Now