Brian Grinstead

We (Nicole, Aaron, and I) have had a lot of fun doing Node Knockout the past few years. Last year (in 2012), our team got first place in the 'Completeness' category for our app asciigram, which converted a webcam stream into ASCII art.

Heather and I spent some of our @FirefoxDevTools team meetup working together on an experiment we named the Pixel Inspector. The idea is to focus on an individual region of the page with an eyedropper to pick colors and a zoom feature to debug tricky alignment issues. You can get separate programs that do some of this, such as Digital Color Meter, or addons like ColorZilla, but it would be great to have something built into the developer tools to do this. Here is how it works:

Links I've collected while working with and contributing to various browser developer tools, all in one place. If you are wanting to contribute to any of these tools, get in contact with the teams that build them, or just want to browse the code (they are all open source), here are some links to help you get started.

I have been working on a small collection of snippets that are handy to reuse inside of browser devtools. These can be used in any devtools. You can jump straight to the devtools snippets project page and readme if you want to see some screenshots and details about each individual snippet.

I have often found it tricky to get a 'just-right' console.log wrapper in JavaScript. I would prefer to just type log, but writing a wrapper function is a little trickier than at first glance. A variation of this used to exist in the HTML5 Boilerplate plugin.js but is now missing.

I'm still trying to figure out how to get a list of all the colors in use on a page from within devtools, but I've been hacking together a little demo with a custom Web Inspector frontend that loads a color palette on the side.

jsbin has made having to remember some of these links less important. However, with jQuery UI 1.9 coming out, there are some CDN links that aren't working. Here is the updated boilerplate I use to quickly test out a jQuery UI project. If all goes well, you should have a dialog that you can drag around and resize.

Sometimes I just want to see all (or many) of the variables inside of the function, and it can be a bit of work to copy all of the variables into the console.log() call when you know that you are just going to delete the line afterwards anyway.

I have published my TinyColor package to the npm repository - https://npmjs.org/package/tinycolor2. Unfortunately it is called tinycolor2 since tinycolor was already taken.