March 5, 2010 at 17:0112 useful Firefox add-ons for web developers
In this article, I decided to collect add-ons that are popular and useful for Web developers with a brief description.
Of course, most developers are aware of their existence, but I am aiming for the rest. And also for those who use alternative browsers. Perhaps this will push them to switch to Firelis. Well, in general, I just want to collect everything in one place.
Probably everyone knows about this addon. Much has been written about him. He rightfully takes the first place in this list.
With it, you can edit, debug and view CSS, HTML and JavaScript in real time on any page on the network. The addon also allows you to analyze requests and test the performance of Java scripts. In general, must have.
Add-on Web Developer adds to Firefox a convenient and customizable socket with many different features.
The list includes: disabling and viewing Java scripts, disabling and viewing cookies, disabling CSS tables, viewing styles, viewing detailed information for forms, disabling image output, searching for broken images, editing HTML code, viewing hidden elements, checking the code for validity and many many others.
Naturally, did you see the Eyedropper tool in image editors? So, this is the same, but for Firefox. And even more. The plugin is embedded in the browser status bar. Click on the dropper icon and hover over the desired page element and find out its color. Color can be viewed both in RGB format and in HEX. The plugin also has a color wheel, page enlargement and a couple of other functions.
HTML Validator winks at you from the browser status bar icon. It shows the number of HTML errors on the loaded page. You can open the HTML code in the plugin and see what causes the errors.
Yes, by the way, the addon by the link in the header does not work under Mac and Linux. However, on the developers website there are versions for these OSs.
Well, where is a developer without an FTP client? This plugin adds the ability to use the client directly in the browser. The client opens in a separate window. Functions are not limited to only basic ones - there are directory comparisons and their synchronization during navigation, SFTP, SSL protection, search and filters, remote control, drag and drop, file hash checking and much more.
Often there is a need to measure some element on the page. With MeasureIt, you can simply select an element and immediately find out what its height and width are. ColorZilla also offers similar functionality, however, if you only need to measure, it is better to use MeasureIt.
In connection with the latest trends in the rejection of the layout and support of IE by many developers, the plugin may seem useless. But, nevertheless, not everyone wants to lose a piece of the audience, and possibly potential customers / partners, because they retain IE support for their sites. These add-ons come in handy for these developers - it launches Internet Explorer directly in Firefox. Now you can check the layout of your site without opening another “browser”. And yes, the plugin only works under Windows with IE installed.
I think that the plugin does not need long descriptions and presentation. Greasemonkey is an extension that allows you to add custom JavaScript written to the format of this extension to any page. Since February 2009, it has been natively working in Google Chrome. Has in the bosom hundreds of scripts that can be found on userscripts.org . For a habr, for example, there is such a useful user script.
Viewing the source code of the site using standard Firefox tools is rather inconvenient - the code is poorly organized. With the View Source Chart add-on, it will be much easier to do this - the page code is divided into blocks highlighted in different colors. Therefore, you visually see the boundaries of tags and the DOM structure, which is easier to understand.
A good utility for cleaning the page from unnecessary elements, for example for printing. Also, it is convenient to use to analyze the structure of the page. Hovering over a page element, you will see its id, a label (if any), a class, and the style assigned to it. Using some buttons on the keyboard, such as R, you can remove an item from a page or V in order to see the source code.
And a couple of useful plugins ...
The addon, as you understand, creates macros for the same simple actions. For example - filling out forms and remembering passwords, automatically uploading and downloading images, files or entire pages (with or without pictures), functional, load and regression testing of Web applications and much more. More information on the addon page.
This add-on is an extension of the standard Firefox functionality for managing proxy settings. With it, you can switch proxies on the fly, quickly enable and disable proxies, and use proxy templates.
That's all for today. I hope this selection will help you to simplify the work and achieve the desired results. :)
Originally posted in
Of course, most developers are aware of their existence, but I am aiming for the rest. And also for those who use alternative browsers. Perhaps this will push them to switch to Firelis. Well, in general, I just want to collect everything in one place.
1. Let's start, of course, with a great plugin called FireBug
Probably everyone knows about this addon. Much has been written about him. He rightfully takes the first place in this list.
With it, you can edit, debug and view CSS, HTML and JavaScript in real time on any page on the network. The addon also allows you to analyze requests and test the performance of Java scripts. In general, must have.
2. Second on the list is the Web Developer addon
Add-on Web Developer adds to Firefox a convenient and customizable socket with many different features.
The list includes: disabling and viewing Java scripts, disabling and viewing cookies, disabling CSS tables, viewing styles, viewing detailed information for forms, disabling image output, searching for broken images, editing HTML code, viewing hidden elements, checking the code for validity and many many others.
3. ColorZilla
Naturally, did you see the Eyedropper tool in image editors? So, this is the same, but for Firefox. And even more. The plugin is embedded in the browser status bar. Click on the dropper icon and hover over the desired page element and find out its color. Color can be viewed both in RGB format and in HEX. The plugin also has a color wheel, page enlargement and a couple of other functions.
4. HTML Validator
HTML Validator winks at you from the browser status bar icon. It shows the number of HTML errors on the loaded page. You can open the HTML code in the plugin and see what causes the errors.
Yes, by the way, the addon by the link in the header does not work under Mac and Linux. However, on the developers website there are versions for these OSs.
5. At 5th place, the FireFTP FTP client
Well, where is a developer without an FTP client? This plugin adds the ability to use the client directly in the browser. The client opens in a separate window. Functions are not limited to only basic ones - there are directory comparisons and their synchronization during navigation, SFTP, SSL protection, search and filters, remote control, drag and drop, file hash checking and much more.
6. MeasureIt
Often there is a need to measure some element on the page. With MeasureIt, you can simply select an element and immediately find out what its height and width are. ColorZilla also offers similar functionality, however, if you only need to measure, it is better to use MeasureIt.
7. Internet Explorer emulator Coral IE Tab
In connection with the latest trends in the rejection of the layout and support of IE by many developers, the plugin may seem useless. But, nevertheless, not everyone wants to lose a piece of the audience, and possibly potential customers / partners, because they retain IE support for their sites. These add-ons come in handy for these developers - it launches Internet Explorer directly in Firefox. Now you can check the layout of your site without opening another “browser”. And yes, the plugin only works under Windows with IE installed.
8. Near the end of the list, but no less important Greasemonkey
I think that the plugin does not need long descriptions and presentation. Greasemonkey is an extension that allows you to add custom JavaScript written to the format of this extension to any page. Since February 2009, it has been natively working in Google Chrome. Has in the bosom hundreds of scripts that can be found on userscripts.org . For a habr, for example, there is such a useful user script.
9. View Source Chart
Viewing the source code of the site using standard Firefox tools is rather inconvenient - the code is poorly organized. With the View Source Chart add-on, it will be much easier to do this - the page code is divided into blocks highlighted in different colors. Therefore, you visually see the boundaries of tags and the DOM structure, which is easier to understand.
10. Not a very popular, but useful tool Aardvark
A good utility for cleaning the page from unnecessary elements, for example for printing. Also, it is convenient to use to analyze the structure of the page. Hovering over a page element, you will see its id, a label (if any), a class, and the style assigned to it. Using some buttons on the keyboard, such as R, you can remove an item from a page or V in order to see the source code.
And a couple of useful plugins ...
11. Add-on to simplify the same type of iMacros
The addon, as you understand, creates macros for the same simple actions. For example - filling out forms and remembering passwords, automatically uploading and downloading images, files or entire pages (with or without pictures), functional, load and regression testing of Web applications and much more. More information on the addon page.
12. Last today is FoxyProxy
This add-on is an extension of the standard Firefox functionality for managing proxy settings. With it, you can switch proxies on the fly, quickly enable and disable proxies, and use proxy templates.
That's all for today. I hope this selection will help you to simplify the work and achieve the desired results. :)
Originally posted in