Brian Grinstead

I have been playing with the Chrome Developer Tools lately. Here is a cool feature I didn’t know about.

There are many times I have ran some code like this:

$("body").bind("click mousedown", function(e) {
    console.log(e);
});

Inspect an element (see screenshot). Now that it has been inspected, there is a $0 variable available in the console.

Instead of that extra bind, you can just type this into the console:

monitorEvents($0, 'mouse')

You can also use ‘key’ instead of ‘mouse’ if you are tracking key events. There are actually a number of second parameters, via the Firebug command line API. Note: not all of these seem to be supported by Chrome dev tools. Here they are:

composition contextmenu drag focus form key load mouse mutation paint scroll text ui xul

I always thought it would be awesome to have a colorpicker in browser developer tools. Who wants to guess at hex colors or open up a separate program just to get a color code? Apparently I’m not the only one who thinks a colorpicker inside the developer toolbar would be nice.

So, I did some reading on how to contribute to developer tools and integrated my spectrum colorpicker into the color swatch button.

Check out the demo in this video:

Of course, I don’t want to get rid of the swatch button (it usually rotates through color formats if you click it which can be useful), so the UI could use some work. Still, this functionality makes picking colors a lot easier, I think.