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.
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.
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.
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.
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:
- 15 Must-Know Chrome DevTools Tips and Tricks
- Introduction to Chrome Developer Tools(Multi-Part)
- Getting Started With Chrome Developer Tools
- Chrome Dev Tools: Markup and Style
- Chrome Developer Tools: Best Resources For Advanced Features
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.
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.
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.
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 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.
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: