Every few months I get in the mood for intense learning and saw-sharpening. Inspired in part by Cal Newport’s Textbook Technique, I’m writing and summarizing things I learn to make them easy to reference later.

I decided to start by getting to know the Chrome Developer Tools better. I always like to find a broad overview when I study something, and I found a great video by Ben Orenstein of Thoughtbot. It’s a 22 minute video that goes over all the major features and common usage patterns of the Chrome developer tools. It’s $15 but Ben was kind enough to let me watch it for free in exchange for a review.

As far as tutorial videos go, this is exactly the style I prefer. He started with a summary of what he would cover, kept the sections to no longer than a few minutes, and each section includes a description and an example. He covered all the basic usage, and threw in some cool advance tricks too. And for things he mentions but doesn’t go into depth about, he shows where to find more documentation.

I’ll share the three favorite new things I learned. First, clicking on a color in the right-hand CSS pane of the Elements tab gives you a color picker – no more RGB hunting! Second, the right hand pane of the Elements tab includes an Event Listeners section, so you can see which Javascript events an element responds to. Matching elements to Javascript code is one pain-in-the-rear problem that I’ll be happy to avoid. And third, the Page Speed add-on gives you a score, prioritized recommendations, and links to documentation for all the parts of your page that affect speed.

At $15 for a 22 minute video, it’s more expensive per minute than other programming screencasts like WatchMeCode.net, Peepcode, Destroy All Software, and more, but it’s tight, broad, and well done, making it still a great value. Frankly, I think high quality screencasts are waaaaaay underpriced and this is a step in the right direction. If producers could sell a 1hr screencast for $50 instead of $12, there would be more competition and more, better material. So I support Ben’s price.

I’d especially recommend it if you’re new to web programming or to Chrome – more experienced developers will already know a lot of the material. It also has me interested in the other screencasts that ThoughtBot has released – maybe tmux is next. I use screen all day, every day but people are always saying how tmux is better.

Thanks Ben and please, more Thoughtbot training videos!

More links on Chrome Developer Tools:

• Modern Web Development – Part 1 – The Webkit Inspector
• Things I Didn’t Know About the Webkit Inspector
• Hacker News discussion on the above article