Breakpoints in JavaScript. Inspecting HTML and CSS and updating them live. Profiling performance… That’s right, this week’s post is all about the developer tools in IE8.

[What’s that? Really? Are you sure? I see, thank you. Goodbye. No no, that won’t be necessary.]

Folks I’ve just been informed that no one else is fond of IE8 quite like I am, so this week’s post will instead be about Chrome’s DevTools. Specifically, I use Chrome Canary and so should you. Not just because it’s a reference to the cute little birds that willingly sacrificed their lives so that we could have fresh coal.

So here is a list of DevTools tips that I hope you didn’t know at least one of. And if that one you didn’t know is actually useful, well quite frankly I’ll be over the moon.

(I have animated gifs in this post which are useful for the first loop then intensely annoying thereafter. If you’re on a big computer I suggest opening the dev tools and deleting the DOM node that holds the image. If you’re on a small computer simply cover the offending part of the screen with a playing card or scarf.)

Let the games … … begin.

Edit: this edit is good enough to go right at the top of the list. A comment from some smarty pants in the comments has learned me that

copy (someVariable)

will put the value of that variable on the clipboard. I’m going to use the hell out of that.

Now on with the show…

1. Animation inspection

Animations are lovely. They delight the user and, more importantly, they delight me. The animation stuff in DevTools lets you slow down all animations on the page to 25% or 10% (thus seeing the world like a rabbit does), or even scrub across a particular animation.