Top 3 Mozilla Firefox Extensions For Web Development

When it comes to browsers, Mozilla Firefox has become more than a big help in terms of assisting on analysis, particularly in web development.

Mozilla Firefox, or more conveniently known as simply “FF”, is a web browser which relies on the extension system and allow users to modify the settings according to their requirements or needs.


Some add-ons are simply made for use of ordinary users such as Forcastfox for monitoring the weather; MySpace toolbar for easy MySpace access; and the Adblock Plus to block any unnecessary and annoying advertisements. These add-ons are made so as to make things a lot easier for their users.



Apart from those extensions, there are also others that are very beneficial when it comes to internet marketing, and especially for web development.

There are some which are made to provide help in the analysis of web pages, others to provide information like codes and syntax used.

There are only a handful of these firefox add-ons and extensions that have proven its usefulness in web development. Let me give you my top three choices.

#1: Firebug

This pugin is one of the many that really caught my attention. This is because of what it said on their site, “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”, and it pretty much does what it says, “edit, debug, and even delete” codes or script “Live” in a website.

The cool thing about this tool is that it lets its user play with the HTML, CSS, or JavaScript codes present in a website. Either change the headers, change the color of the font or background color, or just play and experiment with it. But after sometime, I noticed that there are a lot more uses for this kind of tool other than those designed for web developers. One of which is learning about the site -- of what HTML, CSS, JavaScript the webmaster used to develop it.

Here are some the features that Firebug offers to fine-tune skills in developing a successful website.

*

Built For the Web Developer's Preferences – Web developers can open Firebug in a separate window or as a bar at the bottom of the browser. Firebug also gives web developers fine-grained control over which websites they want to enable it for.
*

Inspects and Edits HTML - Firebug makes it simple to find HTML elements buried deep in the page. Once the web developers found what they’re looking for, Firebug gives them a wealth of information, and lets them edit the HTML live.
*

CSS Editing - Firebug's CSS tabs tells everything about the styles in the web pages. If the web developers didn’t like how it appears, they can easily make changes and see them take effect instantly.
*

CSS Metrics – There comes instances when the CSS boxes aren't lining up correctly and web developers may not know why it gets broken. Firebug can provide measurements and illustrations on all the offsets, margins, borders, padding, and sizes.
*

Monitors Network Activity – To monitor the status of a webpage, especially on how fast it loads, Firebug provides information needed to learn on how to keep the websites on the top shape..
*

Debugs JavaScript - Firebug includes a powerful JavaScript debugger that lets web developers pause execution at any time. If their code is a little sluggish, simply use the JavaScript profiler to measure performance and find bottlenecks fast.
*

Finds Errors - Firebug lets web developers know immediately if there are something wrong on their sites and gives detailed and useful information about errors in JavaScript, CSS, and XML.
*

Explores DOM - Firebug helps find DOM objects quickly and then edit them on the fly.
*

Executes JavaScript - Firebug gives a command line for JavaScript complete with very modern amenities.
*

Logs for JavaScript - Firebug shows a set of powerful logging functions to provide answers fast.

The Firebug can easily be opened by clicking on the tools menu or on the icon seated on the lower-right most corner of the browser. Visit an online Web design Philippines site to learn more about how these tools can help web developers in the development of the websites.

#2 Web Developer

Web Developer is somewhat like Firebug. It also gives information about the styles and the codes used on a page. Web Developer can also offer a way for developers to make experimentssuch as editing CSS, disabling it, viewing the CSS codes, and many more.

Web Developer adds a menu and toolbar to the browser with various tools. It is designed for Firefox, Flock and Seamonkey, and will run on any support platforms including Windows, Mac OS X and Linux.

The only difference between the two is its interface. Firebug specializes in providing a freedom to change, inspect, and monitor pages whereas Web Developer provides an easy way to navigate between tools and functions by use of a tool bar.

The tools and functions seen on the Web Developer are as follows:

*

Disable tool - provides options to disable cache, Java, JavaScript, Meta Redirects, Pop-up Blocker and many more.
*

Cookies tool - disables cookies, clears session cookies, deletes domain cookies, deletes path cookies, adds a cookie, and more.
*

CSS tool – views and edits CSS, disables styles, views style information, and more.
*

Forms tool - displays form details, enables or disables form fields, views form information and many more.
*

Images tool – disables images, displays alt attributes (for SEO purposes), displays image sizes and dimensions, locates broken images, and more.
*

Information tool - provides different kinds of information about the page such as abbreviations, table depth (if there is any), title attributes, document outline, JavaScript and many more.
*

Miscellaneous – clears private data (which is also present in Firefox), edits HTML, shows hidden elements, and many more.
*

Outlining tool – outlines Frames, Headings, Links, Tables (if there is any), and more.
*

Resizing tool – displays the window size, and resizes windows.
*

And tools that validate CSS, feed, HTML, links, by use of W3C (World Wide Web Consortium).

Aside from these, there are also others that proved to be useful in viewing source codes and detecting CSS errors

Check out how a website is developed by visiting an online Web design Philippines site.

#3 ColorZilla

Another tool for web developers is the simple yet helpful ColorZilla. This particular extension is among the simplest I’ve encountered, but it did prove its usefulness especially in figuring out the color to be applied on the website.

ColorZilla is quite easy to use. All one has to do is click on the eyedropper icon, then select the color they would want to copy. The attributes of that color can be seen beside the eyedropper icon.

As stated on their website, ColorZilla can provide a color reading from any point of the browser, quickly adjust this color and paste it into another program. Web developers can also zoom in and out of the page and measure distances between any two points on the page. The built-in palette browser can allow the users to choose colors from pre-defined sets and save the most used in custom palettes. DOM spying features can give various information about DOM elements quickly and easily.

Visit a Web design Philippines site to learn more about how to maximize the website's potential market success.

By: Wendy Ang