Must Have Tool For Developers: The Ardvark Firefox Extension

Posted on 21 October 2007

Web developers and designers, rejoice. Welcome to your new favorite Firefox extension. The Aardvark extension offers, among other things, a new variation of the “View Source” command. It generates Javascript rather than HTML code. The Javascript code will then build the elements using “w3c DOM” techniques…a far, far better way to do things than, say, using inner HTML.
HOW IT WORKS:

After installing the Firefox Extension and restarting, with a quick right click you “Start Ardvark” and you’re off. As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You’ll also see a little yellow caption showing the HTML element type and its class or id if they exist - great for figuring out any wordpress CSS style coding.

THINGS YOU CAN DO WITH ARDVARK:

• See (only) what what you want - Clean up unwanted banners and surrounding ads prior to printing a page.
• Learn How Great Design is Done by Reverse Engineering a Page - See how the page is created, block by block. This is by far my favorite feature - especially when I find a really cool piece of java/dhtml that I’ve never seen before and want to know how it’s coded. You can get an exact snap of what the code looks like.
• View the source code of one or more elements

Don’t take my word for it - go and run the demo. If you’re a developer/designer, I promise, it’ll be love at first click.