Loupe

Paul Rouget wanted a tool for closely examining the UI design he was
working on. So he made it. It’s called Loupe. It puts a little
magnifying glass in your location bar:

When you click it, you get this:

You can look at a design up-close, see if the gap between two boxes is 3 pixels or 4, that sort of thing. You can grab colors, too.

I want to talk about how this tool was made. The whole thing is a single JavaScript file. Paul built it using Scratchpad. The first prototype took about 2 hours to make. Then Paul shared it using Gist.

WARNING: The following pref is off by default for security reasons. Setting it gives Scratchpad code full control over Firefox—your passwords, history, everything. Also, even if someone claiming to be me says it’s OK, please don’t copy and run code you see on the Web. That said, if you did want to check out Loupe, you would go to about:config, set devtools.chrome.enabled to true, select Tools → Web Developer → Scratchpad, select Environment → Browser, and then run Paul’s code. It’s not like I can stop you.

To me this is really exciting. Scratchpad is low-tech in the best way.

3 Responses to Loupe

  1. Daniel Veditz

    Even without the devtools.chrome.enabled pref running random JavaScript in your browser is dangerous — could be the next Facebook or Twitter worm (if run on those sites) for example. If you don’t know what you’re doing, don’t do it!

  2. Pingback: Firefox Developer Tools London Meetup « dave’s log

  3. I have converted this code snippet into a restartless add-on [1]. I have completed some of the TODOs also.
    [1] https://addons.mozilla.org/en-US/firefox/addon/magnifier/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>