anandgraves.com

If your not familiar with testing and debugging with Firefox then read this article: Using Mozilla in testing and debugging web sites.

• FireBug
• Web Developer
• Internet Explorer Developer Toolbar
• FireFTP
• View Source Chart
• Aardvark
• Greasemonkey
• Codetch
• X-Ray
• IEView
• IE Tab
• Selenium IDE
• Tamper Data
• Link Checker
• Color Zilla

FireBug

FireBug takes debugging to the next level. It features a debugger, error console, command line and a variety of fun inspectors like logging (no need to use a javascript alert and logg all Ajax request traffic) and live editing (parts of the DOM can be edited). View a screencast and an article demonstrating how to use FireBug. Visit the homepage of FireBug for documentation.

Web Developer

Contains many powerful and various web developer and design tools. A few tools are Edit HTML (realtime editing a web page), Edit CSS (realtime editing style sheets), Outlining (outlining custom elements), Display Ruler (measuring pixels on a web page / also check MeasureIt) and Element Information (comprehensive information when hovering on elements). View the documentation page for all the features.

Internet Explorer Developer Toolbar

Various web developer tools for Internet Explorer.

FireFTP

A FTP client which provides easy access to FTP servers. FireFTP opens in a new tab in Firefox and resumes broken
downloads.

View Source Chart

View Source Chart clearly defines nested containers. It is an intuitive and easy way to identify structure and hierarchy. It even
shows the complete source code of a javascript generated page. You can also achieve this with Firebug:

• Open up the javascript generated page
• Enable Firebug
• Click on the HTML tab
• Click on Inspect and click the part that you would like to see the source code of

Aardvark

When Aardvark is active, move your mouse over the current page and you will see a red rectangle framing each element under the mouse cursor. Now you can adjust the framed element interactively in a number of ways with keystrokes. For example you can remove, isolate, undo, view the source and more. The extension is also available as a bookmarklet in Internet Explorer and Safari. View and try a demo on the website.

Greasemonkey

Greasemonkey is a Firefox extension which allows you to customize the a web page displays using JavaScript. It lets you easily
take control of any aspect of a web page’s design or interaction. View a list of Greasemonkey examples and a repository at userscripts.org wich contains over 900,000 Greasemonkey scripts. It you want to write your own Greasemonkey scripts, read the online book Dive Into
Greasemonkey.

Codetch

A WYSIWYG editor with features like advanced search and replace, sidebar file list, launch previews of your document in
other browsers, open multiple files with tabbed editing.

X-Ray

View HTML tags on a page without viewing the source code.

IEView

Allows the current page or a selected link to be opened in Internet Explorer.

IE Tab

Open pages in Internet Explorer in tabs of Mozilla Firefox.

Selenium IDE

Selenium is a test tool for web applications which runs directly in a browser. Selenium IDE is a Firefox extension and allows you to record, edit, and debug tests. Selenium IDE is a complete IDE (Integrated Development Environment) and contains the entire Selenium Core. To get started here is a good introduction article followed by a tutorial which also includes a screencast.

Tamper Data

A handy tool for debugging and security testing of web applications. Tamper Data  is based upon LiveHTTPHeaders and lets you amongst other things view and modify HTTP/HTTPS headers and post parameters. In addition Tamper Data uses a more user friendly data presentation than LiveHTTPHeaders.

Link Checker

Check all links on a web page. After checking, each link gets a color wich explains the status of a link.

ColorZilla

Get a color reading from any point in your browser and easily copy the RGB or HEX values. With this extension you won’t have to start Photoshop to read colors from a picture or website (after a print screen). You can easily adjust the selected colors with the advanced color picker wich looks like the color picker from Photoshop.