SuperDev Web Design & Development Tools

Billing itself a “Swiss Army Toolbox for Web Designers and Developers,” SuperDev is indeed an impressive and conveniently helpful collection of little tools Web designers and developers will find use for, and as a free Chrome extension, always just a click away at the ready on your browser’s toolbar.

You’ll notice that some duplicate the functionality of other tools already featured here in the Toolbox. If you’ve got SuperDev installed, you’ll then no longer need to have those other extensions installed.

Basically, go to any publicly accessible webpage, and use this collection of SuperDev tools to get info from the webpage, and even do things to it:

  • Text Editor (edit the website’s text)
  • Page Ruler
  • Color Picker
  • Color Palette
  • Page Guideline (for checking alignment)
  • Page Highlight (to add color highlights to page elements)
  • Move Element
  • Delete Element
  • Export Element (export an element’s HTML and CSS)
  • Clear All Cache

The SuperDev tool I’ve been playing with the most is something I don’t happen to already have a duplicate for here, the Text Editor. It lets you easily change any text showing on your screen. The changes are only on your local machine, and temporary—refresh your browser, bye bye changes as your browser reloads and displays the actual content being sent over.

So, you may be wondering, what’s the big deal? You can always do a screen capture, and “edit” the existing content by pasting some “text” (they’re graphics, really) over the original, like on those many joke images we’ve all seen making the rounds. No, it’s definitely not the same thing as those usually very crude graphic patch jobs, which rarely if ever match the original’s font and exact style specifications, and are really easy to spot as manipulated. SuperDev’s Text Editor, however, does changes at the code level; the browser ends up rendering the page as usual, but with your text in place of the original.

Why that matters is best demonstrated by the sample screen captures below. I did just a very simple, small change. The sharp-eyed among you will notice that I changed the main headline on the front page of the CNN website. That’s it. As far as the browser’s concerned, what I entered is the actual headline, and rendered the webpage as usual. You’ll also notice the headline I entered is shorter, now shown as just two lines, not the original’s three.

CNN Frontpage Real
CNN Frontpage Real
CNN Frontpage Edited
CNN Frontpage Edited

The bogus headline is shown using the exact font, style and placement, as designed by CNN. To the browser, it is the actual headline after all. Even better: other elements of the webpage affected by it also think it’s the actual headline, and behave accordingly. The now 2-line headline takes up less space than the original, and the other content elements have automatically wrapped around obediently as directed by the code, in effect giving us an authentic browser render of the CNN front page, but with custom text. Try doing all that with some crappy graphic patch job on a static screen capture.

So, if you’ve ever wondered what your content will look like using any existing Web design you see out there, here you go!

Share the love