Open/Close Navigation

Chrome Developer Tools: Best Videos, Courses, and Add-ons

Building a workflow with Chrome Developer Tools requires patience and practice. But if you have a solid direction with helpful resources you can mitigate the time it takes to implement DevTools into your daily workflow.

This post offers everything you need to start learning and and applying DevTools to your web projects. All the resources in this guide are free unless stated otherwise. And new resources constantly pop up online so be sure to keep your eyes peeled.

Getting Started With DevTools

If you aren’t already familiar, Chrome DevTools are a group of tools packaged into a single console and shipped with all versions of Google Chrome. This console can be used to debug and check stats for websites and HTTP resources.

DevTools can be used for a variety of reasons with the most value to web developers. It works very similarly to the Firebug extension for Firefox which was incredibly popular during the mid-2000s.

chrome devtools panel ui

Devs who weren’t around or simply didn’t use Firebug may not understand the purpose of DevTools. It’s primarily for frontend development like debugging JavaScript or checking HTTP request times.

But it can be extrapolated for debugging NodeJS or testing CSS properties live in the browser.

There’s a lot you can do with DevTools, but you won’t be able to do anything unless you learn what’s possible. That’s the goal of this article: to offer resources for getting started and hopefully mastering Google’s Developer Tools.

Free Video Guides

The best place to start is online video guides. There are so many great videos but it’s tough to separate the wheat from the chaff.

My first suggestion would be this guide by Google covering 12 tricks for DevTools in under 5 minutes. This is an official Google video so production quality is on point. However it was published in 2011 so some of the suggestions may be slightly obvious or outdated.

Another free video is the Chrome Developer Tools in an Evening recorded by a number of developers from the Gainesville Front-end Dev Meetup. This 1.5 hour video explains all the basics of Chrome DevTools along with some advanced concepts.

chrome in an evening devtools video

For a free video this offers some of the best content you’re gonna get.

If you’re more of an advanced developer you’ll be happy to know I have a couple videos for you as well.

First is another Google-approved video uploaded to the Google Developers YouTube channel.

devtools can do that video

This 30-minute video is titled Chrome DevTools could do THAT? with an emphasis on tasks you never thought were possible. Most developers are pragmatic with their time, only learning things they need or want at any given moment.

It’s easy for developers to learn just the bare essentials and move on from there. Thankfully Google makes it super easy to follow along with this video and pick up more advanced skills in a flash.

Lastly I want to feature a brilliant presentation by Paul Irish given at Velocity Conference 2014.

This is another 30-minute video focusing on advanced performance tooling in Chrome DevTools. Paul Irish is a prominent figure in web development and this talk offers a lot more than you might expect.

paul irish devtools advanced performance

If you have the time for any of these videos I promise they’ll prove incredibly useful. Free content is the best way to learn and Chrome DevTools is already free with any copy of Google Chrome.

Some developers may also prefer written articles so here are a few guides/tutorials worth reading:

Online Courses

All of these courses are premium courses which means they cost money. These are also much more in-depth than YouTube videos.

But if you’re really struggling to understand Chrome DevTools these courses may be the way to go. Each course offers an outline of what you’ll learn and some even have preview videos.

Code School

The Code School course named Discover DevTools is a great product for the price. It offers some premium options but can be viewed for free with a Code School account.

There’s also a landing page for this course sponsored by Google. You’ll find seven chapters from DOM styling to memory profiling for open browser tabs.

codeschool devtools landing page

People use Chrome Dev Tools for different reasons and this discovery course outlines all of them. Plus it’s sponsored by Google so you know the content is credible.

TutsPlus Course

Envato’s TutsPlus premium market offers their own DevTools course taught by a skilled Envato course instructor. These videos cover many popular aspects from profiles, network data, emulation and responsive design.

The total course length is 90 minutes of video which can easily be completed in one day. This is great for a slightly more in-depth approach to DevTools.

Pluralsight

Pluralsight offers hundreds of courses on technical subjects and it’s also the parent company of Code School. Pluralsight instructors are held to a very high standard which you can expect to find in their Chrome Developer Tools course.

The full course totals a length of ~3 hours with in-depth examinations into each tab in the DevTools console. It also includes exercise files and a discussion area for questions & comments.

Best Free DevTools Add-ons

Chrome’s lengthy add-on library has proven useful to millions of people around the world. And not surprisingly there are many great DevTools add-ons you can add to Chrome for the great price of completely free.

Marionette Inspector

marionette chrome inspector

SnappySnippet

snappy snippet website

Gulp Devtools

gulp developer tools

jQuery Debugger

jquery debugger chrome

DevTools Terminal

devtools terminal extension

AngularJS Batarang

angularjs batarang extension

React Developer Tools

reactjs extension chrome

Moving Forward

Remember that web development is an ever-changing industry with a fascinating landscape. To stay ahead you need to keep practicing and truly love what you do.

Be willing to try new things. Experiment with DevTools on existing websites, or try adding extensions into your workflow. This isn’t a primary dev tool but it can be an ancillary tool for improving your code quality and workflow.

To find similar resources check out these related posts:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.