ScreenGrab & Devboi for Firefox

It’s been a few months since I’ve had a good look at some of the newer Firefox extensions, but there are two that have really grabbed my fancy lately.

ScreenGrab

ScreenGrab screenshotThe first is ScreenGrab. Like many, I looked at this one and immediately thought ‘What the?… what can it do, that I can’t now?’.

The very worthwhile answer to that question is simple — it has the ability to capture all the parts of a long, scrolling page and then automatically glues it all together into one, long, shiny new PNG. If you’ve ever wasted minutes of your life doing this by hand you’ll recognize this as a very neat trick.

In fact, I can’t think of another application, client-based or otherwise that is able perform this seemingly simple task — this pony has but one trick, but it’s a good one.

DevBoi

The second nifty new string to the Firefox bow is Zhluk.com’s DevBoi.

Devboi is a Web developer reference sidebar for Firefox, at this stage cover HTML 4.01, CSSS2.1, DOM and XUL. I’d expect more will added over time. Although no single aspect of it is remarkable, the whole package is well thought-out and immediately useful.

The CSS reference uses ‘♥’, ‘½’, and ‘x’ to let you check browser support for any property at a glance, and links each one to PPK’s Quirksmode reference which details known inconsistencies, bugs and workarounds for that property.

The HTML reference shows a complete tag listing marking deprecated tags and other useful information, as well as linking to the W3C explanatory page for each tag. XHTML might be a useful update for the next version.

Devboi also includes a comprehensive DOM reference, a XUL reference and there’s even a Ruby and Rails reference in development — if you’re that way inclined.

All up, far too much to screen cap here, so I’ve thrown together a little demo to walk you through it. It showcases some of Devboi’s finer points along with my clunky control of Macromedia’s very impressive Captivate.

If you’re still unsure, Martin Cohen also provides a nice working online preview here for your test-driving pleasure.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com Mark Harbottle

    They should have named it “PageGrab”.

  • anon
  • Mike Empuria

    Very, very nice…

  • ewiethoff

    HyperSnap from Hyperionics has been doing ScreenGrab’s scrolling page grab trick on Windows boxes for years.

  • http://www.errewf.it RaS!

    Finally an useful tool!

  • Stefan Walter

    For the screenshot functionality there are also nice standalone apps (Freeware), e.g. for Windows there is URL2BMP (although other formats than BMP are supported) and for OS X there is Paparazzi.

  • Dr Livingston

    Went to look at the screen grabbing extension, but the page I got just offered an upgrade of Firefox :(

    If I had wanted to upgrade I can do so via the current Firefox installation, so wtf happened?

    Anyone else get the upgrade page I ponder…

  • http://www.divbyzero.org Div By Zero

    ScreenGrab is really nice, we’re working with it and are very satisfied … it has speed up our work alot !

  • lajkonik86

    I personally use Snagit to get those scrolling pages :)

  • to dr livingston:

    if you get a firefox upgrade page then that probably means that your version of firefox is not new enough.

    the firefox website will not allow the install of extensions on versions for which a newer version with security fixes exists.

    so unless you have the latest version (which currently is 1.0.7) you will need to upgrade first before you can install any extensions.

  • http://www.sitepoint.com AlexW

    Went to look at the screen grabbing extension, but the page I got just offered an upgrade of Firefox :(

    If I had wanted to upgrade I can do so via the current Firefox installation, so wtf happened?

    Anyone else get the upgrade page I ponder…

    Must say, I had to download the screengrab XPI to my desktop on then use ‘File/Open File’ to get it to install. Not sure why, but it worked.

  • velocd

    Dang, neither extensions work on Firefox 1.5 Beta.

    I don’t care much for ScreenGrab, but Devboi looks mighty useful.

  • http://www.brandbuilder.dk romme

    Wonderful! ScreenGrab is just the feature I’ve been looking for!

  • Pingback: Panasonic Youth

  • chovy

    Excellent, I can now incorporate screengrab into my QA reports.

  • jay

    its very helpful for me.. :)