Welcome to this Chrome Developer Tools online course.
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 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
Know the difference between Chrome Stable, Beta and Canary, and tell which one to use for testing
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
A hands-on example on how to determine which CSS file hosts a particular rule we want to change
How to determine which file is responsible for any given property, and understand the box model
Every DOM element can have listeners assigned to it. Learn what a listener is, and how to determine what it does.
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
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.
The Console and the Elements Inspector are deeply linked. Learn the ways they collaborate to let you understand the page better.
console.log() was introduced in the previous lesson. Let's see how powerful it is with more advanced usage.
Ways to clear the console, both manually and programmatically.
Count and enumerate with 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()
The console can print things differently. Learn how to print stack traces for errors, and simpler information in other cases
Using this simple trick can sometimes give a lot of help in determining differences between two scenarios.
Learn to navigate your project structure. Find the code you're looking for.
Learn how live editing works, and how can you speed up testing using it.
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.
General and appearance settings, customize the Inspectors
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.
Learn how to setup Source Maps on a SCSS file. The same applies to all the supported CSS Preprocessors.
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 console.assert() to run tests inside your code, that will show up in the Console
How to group the Console logging messages for a more structured debugging
Measure possible performance problems, and performance gains, by printing time intervals to the console.
Conclusion of the course, and what to expect in terms of future updates
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