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.
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.
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 (requires RIP extension) |
| 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 |
| G | Global | Make a javascript global variable that points to this element, named "elem1", "elem2", etc. |
| X | XPath | Show the XPath of the element | H | Help | Show (or hide) the list of keystrokes |
Site designed by 
Aardvark was created by Rob Brown (rjbrown@gmail.com) and now belongs to vark.com. All Rights Reserved.
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
Bookmarklet version:
To run Aardvark as a bookmarklet in Firefox, IE, or Safari, just bookmark the following link:
Aardvark
To do this in Firefox, right click and select "Bookmark this link." In IE, right click and select "Add to Favorites". In Safari, drag the link to the bookmarks bar.
Bookmarklets have many advantages for developers. See the bookmarklet page for more info.