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,001 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,001 students enrolled
Created by Flavio Copes
Last updated 4/2015
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
11 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • A (very) basic knowledge of JavaScript and HTML.
  • Have a copy of Google Chrome installed
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!

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
Expand All 31 Lectures Collapse All 31 Lectures 39:39
+
Introduction
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
00:31

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
01:40

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
02:01

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

Caching
00:49
+
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
01:20

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
01:23

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

Using console.log formatting
00:49

Ways to clear the console, both manually and programmatically.

Clear the console with console.clear()
00:22

Count and enumerate with console.count()

Counts and lengths: console.count()
00:33

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
01:05

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.info(), console.warn(), console.error()
00:38

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

Preserve log upon navigation
00:53
+
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
01:31

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

Live Edit
00:37

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
01:04
+
More advanced debugging setups
4 Lectures 07:17

General and appearance settings, customize the Inspectors

Description of the DevTools settings
03:23

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
01:36

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

CSS Preprocessors Source Maps
01:27

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
00:51
+
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()
00:37

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

Group a series of log messages: console.group()
00:36

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

Measuring intervals with console.time() and console.timeEnd()
00:46

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

Print stack traces with console.trace()
00:38
+
Conclusion
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!
00:24
About the Instructor
Flavio Copes
3.6 Average rating
41 Reviews
2,001 Students
1 Course
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 e-commerce platform for Joomla and runs on thousands of websites