Firefox DevTools Experiment - Pixel Inspector

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:

  • Open the panel with a keyboard shortcut or by clicking a button in DevTools.
  • Move your mouse around the page to the location you want to inspect. Click on the pixel to lock it in place.
  • Use the zoom slider to increase the size of each individual pixel.
  • Press the ‘Copy’ button to copy the color to your clipboard, or use the format dropdown to change the color format.

See the screencast and screenshot below to check it out. Would this be a useful feature to add to DevTools?



pixel inspector

How does it work?

Pixel Inspector makes use of the drawWindow canvas method (which is only available with “chrome only”, meaning a script running with elevated privileges that has access to browser internals). There is an additional flag, named context.mozImageSmoothingEnabled = false; that allows the image to get the pixelated effect we want. Most of the code can be seen in this file: https://github.com/harthur/devtools/blob/magnifier/browser/devtools/magnifier/magnifier.js.

Comments

  1. Thomas S. Says:
    September 2nd, 2013 at 9:30 am

    That sounded familiar, and yup, your pal Paul published something similar a while ago: https://addons.mozilla.org/en-US/firefox/addon/magnifier/
    Did you build on what worked and what didn’t?

  2. Brian Says:
    September 2nd, 2013 at 12:44 pm

    Thomas, yes we were able to reuse some of the code from the magnifier addon! Here is the relevant file from the addon: https://github.com/scrapmac/Magnifier/blob/master/bootstrap.js. This adds a few extra things (like displaying the zoomed region on the page and removing any image smoothing on the canvas), and also doesn’t have a couple of features (like zoom modes).

  3. lousiremi Says:
    September 3rd, 2013 at 9:39 am

    Ho do I install that thing?

  4. Brian Says:
    September 3rd, 2013 at 1:47 pm

    Unfortunately you can’t, yet. There is an extension that has similar functionality called magnifier that you can check out. I will post an update here with progress as this gets further along.

Comments are closed. Please contact me instead.