Keeping up with Chrome Developer Tools

In today’s world, as the web evolves so do the tools. Keeping up with what’s happening is important in our industry. However, keeping up with everyday development tools is as important, if not more so. The Developer Tools in Chrome have been in rapid development for the last couple of years, and I certainly have not been using them to their fullest potential. Hopefully the resources below will bring you up to speed.


Wait, Chrome Dev Tools could do THAT?

Your browser is one of the most and best instrumented development platforms — you may just not realize it yet. In this episode we’ll take a whirlwind tour of how to analyze network performance, rendering and layout pipeline, as well as detecting memory leaks in your Javascript code, and using audits and extensions to build faster and better apps!


Secrets of the Chrome Developer Tools

The Developer Tools built into Google Chrome provide powerful ways to understand, debug, and profile web applications. Most developers are familiar with its basic inspection and debugging tools, but some of its most valuable features, like the timeline and memory analysis tools, are lesser known. This talk will provide an overview of the Chrome dev tools and an in-depth demonstration of some of the lesser-known features.


Do more with Chrome Developer Tools

The Chrome Developer Tools team recently launched new features and made several UI changes to improve your development and debugging workflow. Features include device emulation and loads more.


Search or navigate to files, methods or line numbers. Shortcuts for text search and beyond

The ability to quickly find or navigate to specific files, methods or line numbers in any web app can be important in your day to day workflow in the Chrome DevTools. Addy Osmani explores some useful tips to help with these when working in the Sources panel.


Skinning the Chrome Developer Tools Revisited

Back in 2011, Darcy Clarke wrote a kick-ass post about how to skin the Chrome Developer Tools with your own custom stylesheet. The basic idea was to locate Chrome’s user stylesheet directory then drop-in your own Custom.css file. This post shares a whole bunch of themes written over the past year.


Live Edit CSS, Save to Disk

Here’s how it works: (1) make changes to styles as you do (2) you can click through to the Sources pane and live-edit styles there, just like a text editor. (3) Right click and save to disk. choose where to save the file (4) Make some more changes (5) Just hit ctrl-s (or cmd-s) to immediately save back to disk in the same location.


The Breakpoint with Paul Irish and Addy Osmani—Episode 2

Addy Osmani and Paul Irish show the brand new SASS, feature inspection and console features in the Chrome Developer Tools. If you want your to stay on the bleeding edge of tooling, you won’t want to miss it.


Modern Web Development – The Webkit Inspector

Google and the Chrome team have been pumping a ton of resources into the WebKit Inspector. The changes have enabled a whole new class of complex and ambitious applications that would have otherwise collapsed on their own weight. This is great news, of course, but as I talk to more and more web developers about their process and tooling, it became clear to me that many of them haven’t caught up with the changes or aren’t making effective use of the tooling available. This blog post attempts to remedy that, not only by walking you through the inspector’s feature set, but also highlighting certain techniques for bug hunting and feature development that I’ve found to be indispensable.


Never having to leave DevTools

Actually, truth be told, it’s not the entire workflow (I can’t create new files for instance) – but where I’m up to is: navigating my entire project, making changes and seeing the live impact of that change, testing new ideas and most importantly – actually saving those changes to disk without leaving DevTools.


Further Resources


Updated: 1/2/2013 – Added Never having to leave DevTools

1 Comment

  1. Great roundup – I’ve been meaning to take a deeper look at the features of chrome dev tools for a while now, bookmarking this!

This post currently has one response. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *