Keeping up with Chrome Developer ToolsNovember 20, 2012 - Jake Bresnehan
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.
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.
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.
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.
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.
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.
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.
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.
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.
Updated: 1/2/2013 – Added Never having to leave DevTools