If your not familiar with testing and debugging with Firefox then read this article: Using Mozilla in testing and debugging web sites.
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.
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.
Various web developer tools for Internet Explorer.
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 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
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 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.
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.
View HTML tags on a page without viewing the source code.
Allows the current page or a selected link to be opened in Internet Explorer.
Open pages in Internet Explorer in tabs of Mozilla Firefox.
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.
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.
Check all links on a web page. After checking, each link gets a color wich explains the status of a link.
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.