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.

Google Chrome is a web browser developed by Google that uses the WebKit layout engine and application framework. It was first released as a beta version for Microsoft Windows on 2 September 2008, and the public stable release was on 11 December 2008. The name is derived from the graphical user interface frame, or "chrome", of web browsers. As of August 2010, Chrome was the third most widely used browser, with 7.54% of worldwide usage share of web browsers, according to Net Applications.

The Essential Google Chrome Extensions for Web Designers

We’ve taken some of most useful Chrome Extensions which may help for your works.

1. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.
This version was conceived to put the Firebug Lite in a new level, by allowing code reuse from Firebug's original source.

2. Web Developer for Chrome

Web Developer for Chrome

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.
It has loads of options for examining and understanding web page layouts, including showing block element stacking orders, displaying CSS style information about certain elements, browser cache controlling, and much more.

3. Speed Tracer (by Google)

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low-level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

4. Resolution Test

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size.

5. Pendule

Pendule - Web developer tools for Chrome

Pendule extends the built-in Developer tools in Google Chrome. The extension gives its users plenty of features such as one-touch markup validation using W3C’s automated web services, hiding images on a web page, viewing scripts included in a web page, and more.

6. IE Tab (for Windows)

IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).

7. Eye Dropper

Eye Dropper

Eye Dropper is a Google Chrome extension that gives you the ability to determine a color on any web page. What’s more is that it presents a color wheel and color swathes (found in most graphics software) so that you can experiment, tweak and pick colors.

8. SEO Site Tools

SEO Site Tools

A well-formed web page with great markup ultimately leads to awesome search engine results. However, if you would like to evaluate your website in terms of known search engine optimization factures, try out the SEO Site Tools, a Chrome extension that gives you a plethora of useful tools and features for evaluating SEO. It can pull tons of on-page and off-page metrics, social media information, and more.

9. CSS Scan

CSS Scan

Inspired by the Firefox Extension CSSViewer, this Chrome extension allows you to easily scan an element's basic CSS properties without having to delve into the inspector window.
The extension adds a button to the toolbar. Clicking this button will enable the extension; you can then continue using the page, with the difference that a quick overview of CSS properties for the element your mouse cursor is hovering is displayed. To disable the CSS scanner, simply click the icon again.
Elements being scanned are highlighted with a red outline so the user can easily see the structure of the page. Most CSS properties are supported; however, feel free to leave a comment if you feel like there's any missing.
NOTE: For some reason the extension does not work on this page (or any other in the chrome extension gallery)! It seems to work fine on any other page.

10. Webpage Screenshot

Website Screenshot

This is the first Chrome extension that takes the screen shot of full webpage (not only the visible page on-screen) no matter how long the page is and saves it in a JPG file format. This is a useful extension if you want to display available ad slots on your website or want to show all the sections of your website that are on one page.
This is a local extension which means it does not send any data to any server and is completely private. It has options to upload and share the screenshot image and resizing it to specific size.

11. Chrome Editor

Chrome Editor

If you make changes in the html code of your website quite often, this extension will be a great help for you. Chrome Editor lets you make changes in your website’s html code inside browser so that you do not have to flip between a code editor and a browser. You can save the code locally in your computer for reference or email the code to a friend.
The extension comes with W3C validation service and auto saves the code as you type. There is a list of shortcuts to save your time while coding.

12. MeasureIt!

MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

13. MultiSwitch

MultiSwitch

Whenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitch. You are now able to customize the title of your environment. In this latest version the ip:port bug is also fixed.

Find Somethings Missing?

Have you ever use one of the Google Chrome Extensions above here? Do you know of an extension any other? Share experiences here with us to know the same people.

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.

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.