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?
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.