15+ Awesome Firefox Extensions to Improve the FireBug

1. CodeBurner

CodeBurner

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension's core functionality is centered around a new Reference panel, which has a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

2. Firecookie

Firecookie

Firecookie is a an extension for Firebug that makes possible to view and manage cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug, so web developer has the functionality accessible within familiar Firebug's UI.

3. NetExport

NetExport

NetExport is a Firebug 1.5 extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive 1.1 (HAR) format (based on JSON).
Once the extension is installed there is a new Export button available in the Net panel toolbar.

4. Firediff

Firediff

5. Firefocus

Firefocus UI

6. FormBug

FormBug extends Firebug to make developing form intensive sites easier. If you're dealing with forms with dozens of inputs, or have kept the Web Developer extension installed because of its "populate forms" feature, or just want to be able to quickly check the state of form data on a page, FormBug is for you.

7. Firefinder

FireFinder

8. Firequark

Firequark

9. Pixel Perfect

Pixel Perfect

11. FireSass

FireSass

12. Arboreal

Arboreal ― A Firebug extension for DOM tree visualization

13. YSlow

YSlow

14. SenSEO

SenSEO

15. CSS Usage

CSS Usage

Find something Missing?

Is your useful FireBug Extensions not on the list? Share it with us in the comments, along with your experience and why you like it over other Add-ons.

Typetester – Compare Fonts for the Screen

Marko Dugonjić's typetester gives you instant previews of how a text of your choice would look on-screen set in a certain font and size. It offers full control of the font styling, including the background colour, with the choice of displaying either fonts from your own system or standard system fonts for Windows, Mac or both.

Browsers supported

• Mozilla Firefox Win/Mac/Linux 1.0+
• Mozilla Camino 0.8+**
• Opera Win/Mac 8.0+**
• Safari 2.0+
• Omniweb 5.1.1.**
• Internet Explorer Win 5.5/6.0/7.0**

JavaScript

• In order to use the application, please turn JavaScript on.

Cookies

• If you’d like to see settings from your last visit next time you come around, just enable cookies.

Firefox extensions

Due to variety of extensions for Firefox available, some extensions could break some Typetester’s functions. Please do report troubles. If possible, provide a list of installed extensions.

• Even though the application should work on any system which allows installation of the listed browsers, it's advisable not to run it on a system with processor 1Ghz or lower.
• Some advanced functionality (like color-picker or client system font-list) might be missing in some browsers. However, all settings can adjusted respectively.

Photoshop Keyboard Shortcut Stickers

Adobe Photoshop CS3 is a huge program full of buttons and options that can be used for many different purposes. Keyboard shortcuts can improve your efficiency, and in some cases, they can even invoke commands that might not otherwise be available (e.g., zooming while a dialog box is open, or inserting a Select forward layer command into an action). Knowing keyboard shortcuts help you work more efficient and work faster!
Below are many of Photoshop’s keyboard shortcuts resources. Some of them are the little known, hidden keystrokes! There is a PDF, printable versions, or just scroll down to find the shortcut you need. Feel free to LINK to this page! Enjoy....

Adobe Photoshop CS3 Tools palette with keyboard shortcuts

The Adobe Photoshop CS3 Tools palette layout has 60 separate tools. If you leave your mouse cursor over the tool Adobe Photoshop CS3 will indicate the name of the tool and the keyboard shortcut to use the tool. You can use associated keyboard shortcut to quickly select a tool without having to always use the Tools palette to select the tool you wish to use. For example, pressing B on the keyboard will activate the Brush Tool in the Tools palette. Where more than one tool shares the same keyboard shortcut, you can cycle through these other tools by holding down the Shift key as you press the keyboard shortcut.

Adobe Photoshop CS3 Tools palette with keyboard shortcuts

Keyboard Shortcuts for Photoshop's Layers Palette.

Keyboard Shortcuts for Photoshop's Layers Palette

It's a sign you know your way around Photoshop when you've mastered the keyboard shortcuts for the Layers palette. Here is a quick reminder: Combine the bracket keys [ or ] with Option/ALT to select the layer above or below; Use Command/Control to move your selected layer up and down.

Trevor Morris Photograhics's Adobe Photoshop CS3 and CS4 Keyboard Shortcuts Cheat Sheet, Presets

• Adobe Photoshop CS3 Keyboard Shortcuts Cheat Sheet: All keyboard shortcuts organized into four pages, by menu, as well as alphabetically by key. PC | Mac (July 6, 2007)
  

  Adobe Photoshop CS3 Keyboard Shortcuts Cheatsheet

• Adobe Photoshop CS3 Keyboard Shortcuts Presets: This keyboard shortcuts (KYS) file includes dozens of extra shortcuts for commonly used commands (all documented in the above cheat sheet). Installation instructions are included in the ZIP file PC/Mac. (June 23, 2007)
• Adobe Photoshop CS4 Keyboard Shortcuts Cheat Sheet:
  

  Adobe Photoshop CS4 Keyboard Shortcuts Cheat Sheet

  All keyboard shortcuts organized into four pages, by menu, as well as alphabetically by key. PC | Mac (June 9, 2009)

• Adobe Photoshop CS4 Keyboard Shortcuts Presets: This set of keyboard shortcuts includes dozens of extra shortcuts for commonly used commands (all documented in the above cheat sheet). Installation instructions are included in the ZIP and self-installing MXP files. PC/Mac (October 31, 2008)

Adobe Photoshop Lightroom Cheat Sheets

Adobe Photoshop Lightroom Cheat Sheets

Making shortcut cheat sheets for Lightroom is a little harder than it was for Aperture simply because of the different views available for the application (develop, print, etc.). Each view modifies the menus and shortcuts somewhat, so what I've tried to do is reduce replication of the shortcuts and have provided some specific groupings for any items that seem to change per view. Download here

Complete Adobe Photoshop Shortcut on KeyXL

I've found a full set collection of Adobe Photoshop Keyboard Shortcut at KeyXL.

Create your own Photoshop keyboard shortcut

In Photoshop, shortcuts are customizable by using the Keyboard Shortcuts command. Choose Edit > Keyboard Shortcuts.

Reference Resources

• Trevor Morris Photograhics's Adobe Photoshop keyboard shortcut cheat sheets for CS4, CS3, CS2, CS, 7, 6, 5 for both PC an Mac.
• Adobe Photoshop keyboard shortcut on KeyXL

• Displays the number of shares and on hover the total number of clicks for those shares (displays Facebook logo when 0 shares)
• Large or small button
• Track the shares from the button using your awe.sm API Key or fbshare.me links
• Add Google Analytics parameters to fbshare.me links

Safari plugins

However, web development using Safari may still seems a bit troublesome compare to Mozilla Firefox. Previously, the addition of new features for Safari by developers 3rd almost impossible because your browser does not support plugins. Now it has come true.

Note: Many plugins work through something called SIMBL (Simple InputManager Bundle Loader), which is basically a little tool that helps developers manage and run their code as plugins for the different applications on OS X. It's free.

In some earlier posts, you already know about the essential extension/add-ons/plugins for web developers on Internet Explorer and for web designers on Firefox. In this article, you will know more about Safari extensions useful for web developers.

Safari Tidy

No mention about Safari Tidy is probably a major shortcoming, this is an extension available in most popular browsers

Safari Tidy

The Safari Tidy plugin is a small plugin that lets you validate the webpages you browse for (x)html compliance. The actual validation is done by Tidy and the W3C validator.

SafariStand

A plugin that adds various useful functionality, such as bookmark/history searching, thumbnail tab sidebar, view related cookies/css/images for a site.
SafariStand adds an ‘action menu’ button to your toolbar options. Its not there by default – you have to customise the toolbar to add it. This is used with Safari Tidy side by side.

SafariStand

"Show Page Info" option which displays this date again, but more like Firefox’s page info window.

Web Inspector

The Web Inspector is the most powerful and versatile part of the developer tool suite, it allows you to view the page source, live DOM hierarchy, script debugging, profiling and more!

Web Inspector

The Web Inspector can be opened by right clicking anywhere on a web page and choosing Inspect Element. Once open, it highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.

SafariSource

SafariSource is a SIMBL plugin that adds syntax coloring to Safari’s source view. It's easy to install and makes View Source much more pleasant to use.

SafariSource

SafariSource also adds a preference pane to Safari's preferences where you can control the colors and stylings for the syntax highlighting. You can also adjust the base font/size here and even disable SafariSource.

GreaseKit

You know the Firefox extension Greasemonkey is useful, of course you also want a plugins that feature similar to the Safari, and GreaseKit has met the conditions.

GreaseKit

GreaseKit is a SIMBL plugin, that adds user scripting to Safari, Mailplane, Diet Pibb.app and all WebKit applications.

Drosera

Drosera is a JavaScript debugger for WebKit that is used with any application that uses WebKit. Like the Web Inspector, over 90% of it is written in HTML, CSS and JavaScript. It can compare to the famous Firebug extension in Firefox.

Drosera

Drosera, named after the largest genera of bug eating plants, lets you attach and debug JavaScript for any WebKit application—not just Safari.

XML View Plugin

XML View Plugin is a Safari plugin that displays XML data. See this blog post for more information.

XML View Plugin

You can customize the “Formatted and Styled” view in the plug-in’s Preferences dialog. In this view, the plugin converts the XML document into an HTML page, and you can change the appearance and behavior of that page with CSS and JavaScript in the usual web developer way.
In this article I did not mention WebDevAdditions because it is no longer in development and it will not be compatible with newer versions of Safari
When it comes to testing and debugging sites, it seems that Firefox can’t be beaten. The choice of Safari or Firefox browser in the web development on Mac environment was easier with the Safari's plugins listed above.

Microsoft Internet Explorer

In a previous article I talk about The Essential Firefox Add-ons for Web Designers, this article continues to mention for the content on the browser of Microsoft Internet Explorer.

Internet Explorer Developer Toolbar

Firefox has Firebug and webdeveloper to fire out all the bug in Mozilla, IE has developer toolbar! This toolbar created by Microsoft and gives most of the ability of both Firebug and webdeveloper but not all of it.

Internet Explorer Developer Toolbar

Internet Explorer Developer Toolbar (sometimes shortened to IE Developer Toolbar or even IE DevBar), is an add-on for Internet Explorer 6 and Internet Explorer 7 that aims to aid in design and debugging of web pages. It allows validating of CSS and HTML, previewing page layout at various resolutions, and offers a ruler (measuring in pixels) to aid in positioning the elements. It allows viewing the source of the entire page, color coded for ease of navigation, or selected elements of it, as well as view the DOM source and the CSS selectors that are applied to the element. It also enables viewing the properties and styles of each element and trace styles of elements to its declaration.

Fiddler2

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set break points, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Fiddler2

Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

Web Developer Helper

Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window.
Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to installed on the machine.

Web Development Helper

Once installed, the tool is activated using the Tools | Web Development Helper command. You can also customize your browser's toolbar to add a button for this command to facilitate frequent use. Clicking on the menu command or browser button brings up the tool's console window and set of commands.

Web Accessibility Toolbar

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Web Accessibility Toolbar

The toolbar has many functions that identify and display specific aspects of a web pages' code and/or content, either by inserting information into the current page or displaying information about the page in a new window These are designed to help identify the use, misuse or absence of particular HTML markup and presentational properties (CSS) that can affect the accessibility of the page.

DebugBar

DebugBar is an Internet Explorer plug-in that brings you new powerful features. View DOM Tree and modify tags attributes and css attributes on the fly to test your page. View HTTP/S request to check cookies, GET and POST parameters, view server info. View JavaScript functions for easier debugging, see JavaScript and AJAX code.

DebugBar

Validate HTML code to correct and optimize your code and html size of your page. See page cookies, get pixel color on a page, make a page screenshot...

HttpWatch

All web applications make extensive use of the HTTP protocol (or HTTPS for secure sites). Even simple web pages require the use of multiple HTTP requests to download HTML, graphics and JavaScript. The ability to view the HTTP interaction between the browser and web site is crucial to these areas of web development:

HttpWatch- An HTTP Viewer and HTTP Sniffer for IE and Firefox

HttpWatch is an HTTP viewer and debugger that integrates with IE and Firefox to provide seamless HTTP and HTTPS monitoring without leaving the browser window.

Firebug Lite

Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari?

Firebug Lite

The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox".

Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.

NitobiBug

It's a browser-based JavaScript object logger and inspection tool - similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.

NitobiBug

NitobiBug is useful for expert and novice user alike. It makes for faster and simpler debugging of JavaScript and DOM problems.
Have you ever use one of the Internet Explorer extensions above here? Do you know of an extension any other? Share experiences here with us to know the same people.

CSS Bar Graphs

CSS Bar Graphs

• ApplestoOranges CSS For Bar Graphs
  

  CSS For Bar Graphs

  This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, use the percentage width abilities of CSS to accurately portray a percentage bar graph.

• MaxDesign: Creating a graph using percentage background images
  

  Max Design - Creating a graph using percentage background images

• Super simple CSS bars
  

  Super simple CSS bars - Too-biased

  Simple progress bars in an html table to indicate the progress.

• Dynamic Pie Chart with CSS
  

  Dynamic Pie Chart with CSS

  This is an example of creating a semi-dynamic pie chart without the use server-side imaging libraries.

• Simple PHP and CSS Bar Graphs
  

  Simple PHP and CSS Bar Graphs

  Here’s an easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page.

• CSS Stacked Bar Graphs
  

  CSS Stacked Bar Graphs

  To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. I looked around for a sample of how others did stacked bar graphs and came up empty-handed. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs.

• Pure CSS/HTML Bullet Graph
  

  Pure CSS-HTML Bullet Graph

  If you search the web for methods of rendering a bullet graph

  (invented by author Stephen Few of Perceptual Edge), you can find JavaScript or Google Charts implementations. However, I've found those options don't work in a wide enough range of programming scenarios. In that case, you may find this pure css/html framework to useful, and flexible enough for data-driven sites. Tested in IE7, IE6, Chrome, and Firefox 3.0.5.

• Line Graph script
  

  Dynamic Drive- Line Graph script

  This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it!

CSS Star Rater

Evaluate the contents of a message is important, your comments help orient the reader to another, so if the integrated evaluation system in the article content will attract many more readers.

• CSS Star Rating Part Deux This star rating system does not have an initial state except for a zero star rating. This is not good enough. We need to be able to start with a specific rating, say 4 stars or 3 stars. Better yet would be a rating of 3.5 stars. As you know, when you average a rating from many users, you will most likely not get an exact integer number. Most likely you will come up with a rating such as 3.76 stars. How do you do this with CSS? That is the question I aim to answer.

• Movable Type AJAX Rating Plugin Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog. The "Pro" version of Ajax Rating lets you rate comments, track backs, categories, authors, tags, and just about anything else. Added features include threshold viewing for comments based on rating, listing "hot" items, and comment reporting.
• KomodoMedia Star RaterMany of you have seen comments and reviews on sites such as Netflix and Amazon. Most of these reviews, as in Amazon’s case or Movies, as in Neflix’s case come with a handy-dandy rating. I’ve even seen the star rating system used at msn.com. Many of these solutions may use JavaScript or just have an individual hover state for a single star. The question I pose is…. Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state.
• CSS Star Rating System
  

  CSS Star Rating System

• WP-PostRatings
  Adds an AJAX rating system for your WordPress blog's post/page.
• Textpattern AJAX Rating System
  an Ajax rating system for Textpattern based on Unobtrusive AJAX Star Rating Bar
• CSS The Star Matrix Pre-loaded
  
  You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars.

This article was aggregated from various sources that I have ever read, it is less than you, but please do not hesitate to bring it up right here, I will update ready to avail.

Adobe Kuler Website

Kuler (not sure if it rhymes with "color" or "cooler") lets you browse other users' themes or create your own using a drag-and-drop color wheel and/or numerical settings (RGB, CMYK, etc.). You can title, tag, save and publish your themes, and download them as Adobe Swatch Exchange files for use in Creative Suite 2 applications (like Photoshop).

Kuler is a flash based site that gives you a good idea what combination of colors you should be used, a good resource for inspiration seeker. Each color themes in kuler are submitted by users, rated by users themselves. Sort by popularity if you want quick result; use Search if you are looking for color themes in particular; keep clicking next and scout the color themes if you have the time but kuler have like, what, 7000 color themes?. If you are an Apple user, kuler has something extra for you – kuler Apple Dashboard widget.

Kuler Desktop Air Widget

Whether you are a design professional or a beginner, there will always be a situation, where it’s hard to find the right color theme for a project. This is where Kuler comes in. Kuler not only provides a huge number of color themes, it’s also build on an active community, which creates and publishes the color palettes we are talking about. Let's learn how to set up an Adobe ID, to log in to the Adobe Kuler website, to browse, save, create and publish your own color variations.

With Kuler API offering, developers can request RSS feeds for the highest rated, most popular, and most recent themes that have been posted to Kuler, and integrate them within their own web sites. However, the API does not allow for commercial use. You’ll remember that Kuler is a user-generated community for color themes, specifically to be used for website designs.

Kuler Photoshop Extension

You can try Kuler online at no charge by visit kuler.adobe.com.

Badges are one of the characteristics of Web 2.0. I have a collection of some online services allow you to create them without using any adding other software.

Badges Generator

Web 2.0 Badges

Web20Badges is a set of free and very cool web badges.
They are probably one of the most popular trend in Web 2.0 time. It's most over-used trendy little design technique in our days, they immediately attract visitor's attention. Web badges have various round or square corners and eye-catchy colours.

Fresh Badge

FreshBadge - Quickly freshen up your site/blog, sales page, or scrapbook with your own uniquely designed, and very web 2.0 "fresh badge"! This is perfect if you are looking for a free way to make a very high-quality logo for you website. you can create many variations until you get just the right combination of color, font, gloss, glare and shadow. You even have your choice of shapes: retro flower, sawtooth seal, rounded flower, or circle.

AJAX Loading

Ajaxload

AJAXLoad - Generating the ajax indicator at run time by selecting the indicator type,for color, and back color.

Load Info

LoadInfo options for it’s loading icon are background and foreground color and three predefined sizes which are 16×16, 24×24 and 48×48.

Web Script Lab

Web Script Lab’s Ajax Loading GIF Generator options for it’s loading icon are background and foreground color and three predefined speed which are normal, fast and slow.

Chimply

Chimply is in Beta stage but it has also a nice collection of categorized Ajax loading icons. Common settings include background and foreground colors and it’s width. Many advanced options will appear depending on what type of preloaded you are going to select.

Stripe Generator

Stripe Generator

Tired of pixel-by-pixel painting, trying to create seamless stripes textures? Stripe Generator that make stripes for tiled backgrounds on the fly. If anyone knows how hard and time-consuming it is to make tiled stripes, this website will knock your socks off.

Stripemania

Stripemania is a simple and free web 2.0 tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.
Feel free to play with it. You are allowed to use the created image for whatever you would like to.

The Essential Firefox Add-ons for Web Designers

Firefox browser has a fully customizable, it allows users to add features needed by the add-ons which can create by third parties developer. As a web developer this functionality is extremely useful to us.

By downloading the best add-ons that are available, you can transform Firefox into a tool that dramatically increases your productivity and saves you a countless amount of time.
I have picked-up some add-ons covering everything from DOM inspection to screenshots, making designing and developing with Firefox a breeze.

CSS Viewer

CSS Viewer is a great little tool that provides you with all the CSS for an element by simply hovering over it. It shows details about the fonts, colours, backgrounds, sizing and positioning of each element and is a great tool to learn CSS with, I wish I came across this earlier, it would have helped me a lot.

CSS Viewer

Screengrab

Whenever I create a web template or want to add an item to my portfolio I need to take a screenshot of the page and in most cases this is just a case of pressing Print Screen, however when you want to take a screenshot of the whole page (below the fold) this can get very tricky.

Screengrab

There are tools like SnagIt that do this for you however these cost money. Introducing Screengrab, an add-on for Firefox that does this for free. Screengrab can save or copy to the clipboard; the whole page, the visible portion or a selection of the page.

FireShot is an extension has similar features, but the free version with fewer features than the commercial version.

Window Resizer

I use the 1280 x 800 resolution so when I create websites I need to check them in the more popular resolutions such as 1024×768. This tool comes in very handy for this task, it will resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200.

Window Resizer

I do not mention Web Develope Toolbar in here because it is a set of tools for web developer. You can try Firesizer which can allow you to resize the window to specific dimensions.

Font Finder

Font Finder is a handy little tool that shows you all the font properties of the selected text. It can show details concerning the selected text colour, font-family, spacing and decoration values.

Font Finder

MeasureIt

Ever need to know just how much space you have for a photo, or how wide a dynamically sized column is? This handy little guy lets you measure, in pixels, any area on the page. Super simple and super helpful.

MeasureIt

Colorzilla

Another very simple but very useful add-on that displays the RGB and HTML color codes directly beneath your cursor. With a click, Colorzilla will copy the HTML color code to your clipboard for use in your favorite editor.

ColorZilla

Gridfox

If you use grid layouts or want to learn how, Gridfox is for you. It displays a simple overlay on your page to help you align elements to both vertical and horizontal grid lines. You can easily set the column and row sizes and spacing, choose from left-aligned, right-aligned or centered layouts and set the opacity of the overlay.

GridFox

Image Zoom

Easy to use extension that works with Firefox and Thunderbird. If you have ever had an image that was too large to fit on your screen or too small to see the finer detail in your browser or email, then image zoom can help. Image zoom gives you complete control of the size of most images displayed in Mozilla based software. Both individual images or whole pages of images can be zoomed.

Image Zoom

Image Toolbar

Single-click access to common actions for images (e.g. saving, copying, printing). This extension is intended to provide a replacement for the equivalent toolbar in Internet Explorer.

Firefox Image Toolbar

Browser View

OperaView | Open in Safari | Open in Google Chrome | Coral IE Tab

BrowserView

Browser View are few Firefox extensions which enables you to use the embedded browser engine within tabs or new windows of Mozilla Firefox.

DOM Inspector

DOM Inspector

The DOM Inspector (also known as DOMi) is a developer tool used to inspect, browse, and edit the Document Object Model of documents - usually web pages or XUL windows. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.
When you first start the DOM Inspector, you are presented with a two-pane application window that looks a little like the main Mozilla browser. Like the browser, the DOM Inspector includes a URL bar, a sidebar-like left pane, and some of the same menus—including the Window and Tools menus that provide access to the main applications in the browser suite, such as Mail and Chatzilla, and other, smaller extensions and dialogs.

View Source Chart

Draws a color-coded chart of a Web page's source code. View Source Chart extension graphically displays HTML tag boundaries and defines tag nesting order, structure, and hierarchy. View Source Chart adds a simple but powerful user interface to source code. Source charting allows the user to quickly scan and recognize a document's tags without reading a single tag, see how deeply nested an element is just by looking to its left (no scrolling/finding/reading tags), and identify an element's containing tags without having to scroll, find and read each tag.

View Source Chart

Find something Missing?

Someones has been asked me about others Firefox extensions such as FireBug, Web Developer Toolbar ... but I think they are the tools may interfere with the components of the website so it will be mentioned in an article about the components of Firefox extensions for developers.
Is your favorite Add-on not on the list? Share it with us in the comments, along with your experience and why you like it over other Add-on.