HTML/CSS/JS analysis/debugging tools

The Google Chrome Developer Tools are a nifty set of tools built into the Chrome web browser that let you do all sorts of cool stuff with web-page code.

The Dev Tools are based on a set of tools called the Web Inspector, which is part of the open-source WebKit project, which is the basis for both Chrome and Safari. So Safari also includes a version of Web Inspector, which you can get to using the Develop menu (if you've enabled that menu in the Advanced section of Safari Preferences).

And there are other developer tools available for other browsers.

But in this entry I'm specifically linking to info about Chrome's Dev Tools.

The documentation (which I haven't been involved in writing) shows what's available in each tools panel, and provides instructional videos with more details.

But those docs and videos haven't yet been updated to cover the latest features and tools. For those, see the video of the Dev Tools session from I/O last week. Autocomplete CSS color names on the fly! Keep a revision history of your tweaks! Script debugging! Network analysis! (The page-load timeline view is particularly nifty.) And lots more.

I try not to be all cheerleady about stuff my company makes. But the Chrome Dev Tools are really cool and really useful, and if I were doing more web-page development these days, I'd be using them all the time.

Join the Conversation