Aardvark Firefox Extension

The Aardvark Firefox extension is a tool for web developers/designers as well as casual users. To quickly see it in action on this page, run the demo.

Install Now

Aardvark now runs on Firefox 3, it will be hosted at addons.mozilla.org as soon as it gets reviewed, but for now, you can get it here. You may have to right click to download it, then drag the file onto your browser window.

Using Aardvark

Once you have installed Aardvark as an extension (as opposed to running the demo), start it by right-clicking on the page and choosing "Start Aardvark" from the menu. The extension will run until you leave, refresh, or stop it by pressing “Q” for quit.

As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. Pressing certain keys on the keyboard (see below) will do various things, as descibed in the Keystroke list below.

New and very cool! a super powerful tool for Javascript / DHTML developers:

A new variation of the "View Source" command 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 innerHTML.

Also sort of new: Aardvark runs as a bookmarklet, running in Internet Explorer and Safari as well as Firefox, and can be very easily extended. See the bookmarklet page for more info.

The Keystrokes

You can then press certain keys on the keyboard (as indicated below) to do various things, such as delete the selected element from the page, isolate the element, or move the selection rectangle outward to the containing element. If you forget them, no problem: just remember to press "h" for help.

W Wider Select a wider area. For instance, if you have selected a table cell, pressing W will select the table row

N Narrower Undo the last "Wider" command

Q Quit Quit Aardvark (that is, stop selecting elements), until you restart it from the menu

U Undo Undo the last "remove" or "isolate" command.

R Remove Delete the selected element

K Kill Delete the selected element permanently

I Isolate Delete everything surrounding the selected element

B Black on white Set the element (and all contained elements) to be black text on white background

C Colorize Sets the element's background to a random color

V View Source Shows the source code of the element (with indenting and color highlighting)

J Javascript Source Generates Javascript code for building the element with W3C DOM techniques. Seriously powerful.

D "De-widthify" Removes any fixed width values from the element (and any contained elements)

P Paste Insert the last removed element before the current selected element

H Help Show (or hide) the list of keystrokes

Site designed by

Things You Can Do With Aardvark

Clean up unwanted banners and surrounding "fluff," especially prior to printing a page See how the page is created, block by block View the source code of one or more elements

More cool stuff in the latest versions:

In version 2.2, View Source now works better...the indentation is "more correct", style attributes are color coded better, and it is easier to cut and paste from the results without it doing weird things.

But the main thing is the version of view source activated by keystroke J, which creates Javascript code to build the elements. If you are a Javascript developer, or thinking about becoming one, please check it out. To me it's more useful that everything else in Aardvark combined. Really.

As of version 2.1, Aardvark is now designed to also run as a "bookmarklet", which means IE and Safari get some Aardvark love. It is also now designed to be highly extensible....anyone who can write javascript can make it do just about anything they want, very easily and straightforwardly. All you need to do is make modifications to one small javascript file on your computer or web host...while the rest of the needed files are pulled down from karmatics.com. Web developers will be able to have it call functions in their own web applications on the selected elements, which can be extremely useful for developing and debugging. Simply go to the bookmarklet page for instructions on extending it.

Also as of version 2.1, Aardvark no longer has conflicts with McAfee SiteAdvisor, which caused it to not "quit" properly.

As of version 2.0, if you install the R.I.P., (Remove It Permanently) Firefox extension, you can use the Kill command to permanently remove items from a page. It is often easier to use Aardvark for this rather than the one built into R.I.P., thanks to Aardvark's dynamic preview and "Wider" command. (sorry, this does not work in bookmarklet mode)

You are viewing a mobilized version of this site...
View original page here