12 useful Firefox add-ons for web developers
In this article, I decided to collect popular and useful add-ons 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 the transition to Ognelisa. Well, in general, I just want to collect everything in one place.
About this addon, probably, everyone knows. Much has been written about him. He is rightfully ranked first on this list.
With it, you can edit, debug, and view CSS, HTML, and JavaScript in real time on any page on the network. Addon also allows you to analyze requests and check the performance of Java-scripts. In general, must have.
The Web Developer add-on adds a convenient and customizable socket with many different functions to Firefox.
The list includes: disabling and viewing Java scripts, disabling and viewing cookies, disabling CSS tables, viewing styles, viewing detailed information for forms, disabling image display, searching for broken images, editing HTML code, viewing hidden elements, checking 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 status bar of the browser. Click on the dropper icon and hover over the desired page element and find out its color. The color can be viewed both in RGB format and in HEX. The plugin also has a wheel of colors, page magnification and a couple of other functions.
')
HTML Validator winks at you with an icon from the browser status bar. 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 add-on link in the title does not work under Mac and Linux. However, there are versions on the site of developers and for these OS.
Well, where is the 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 basic ones - there is a comparison of directories 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. Using MeasureIt, you can simply select an element and immediately find out what its height is and what is its width. Similar functionality offers ColorZilla, however, if you only need to measure, then it is better to use MeasureIt.
In connection with the latest tendencies of refusal from 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 with their sites. These developers will need an addon - it launches Internet Explorer right in Firefox. Now you can check the layout of your site without opening another “browser”. And yes, the plugin works only 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 to any page, written in the format of this extension. Since February 2009, works natively in Google Chrome. Has in the bosom hundreds of scripts that can be found on the site userscripts.org . For 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 Add Source View Chart add-on, it will become much easier to do - the page code is divided into blocks highlighted in different colors. Therefore, you can visually see the boundaries of the 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 the cursor over an element of the page, you will see its id, label (if any), the class and the style assigned to it. Using some buttons of the keyboard, for example R, you can delete an element from the page or V to see the source code.
And a couple more useful plugins ...
Addon, as you understand, creates macros for the same type of simple actions. For example, filling out forms and storing 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 add-on page.
This add-on is an extension of the standard Firefox functionality for managing proxy usage settings. With it, you can switch proxy servers on-the-fly, quickly enable and disable proxies, use templates for proxies.
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 the transition to Ognelisa. Well, in general, I just want to collect everything in one place.
1. Let's start, of course, with a great plugin called FireBug
About this addon, probably, everyone knows. Much has been written about him. He is rightfully ranked first on this list.
With it, you can edit, debug, and view CSS, HTML, and JavaScript in real time on any page on the network. Addon also allows you to analyze requests and check the performance of Java-scripts. In general, must have.
2. The second in the list is Web Developer addon.
The Web Developer add-on adds a convenient and customizable socket with many different functions to Firefox.
The list includes: disabling and viewing Java scripts, disabling and viewing cookies, disabling CSS tables, viewing styles, viewing detailed information for forms, disabling image display, searching for broken images, editing HTML code, viewing hidden elements, checking 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 status bar of the browser. Click on the dropper icon and hover over the desired page element and find out its color. The color can be viewed both in RGB format and in HEX. The plugin also has a wheel of colors, page magnification and a couple of other functions.
')
4. HTML Validator
HTML Validator winks at you with an icon from the browser status bar. 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 add-on link in the title does not work under Mac and Linux. However, there are versions on the site of developers and for these OS.
5. On 5 place FireFTP FTP client
Well, where is the 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 basic ones - there is a comparison of directories and their synchronization during navigation, SFTP, SSL protection, search and filters, remote control, drag and drop, file hash checking and much more.
6. Measurement Measure
Often there is a need to measure some element on the page. Using MeasureIt, you can simply select an element and immediately find out what its height is and what is its width. Similar functionality offers ColorZilla, however, if you only need to measure, then it is better to use MeasureIt.
7. Internet Explorer Coral IE Tab Emulator
In connection with the latest tendencies of refusal from 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 with their sites. These developers will need an addon - it launches Internet Explorer right in Firefox. Now you can check the layout of your site without opening another “browser”. And yes, the plugin works only under Windows, with IE installed.
8. Closer to the end of the list, but no less important is Greasemonkey
I think that the plugin does not need long descriptions and presentation. Greasemonkey is an extension that allows you to add custom JavaScript to any page, written in the format of this extension. Since February 2009, works natively in Google Chrome. Has in the bosom hundreds of scripts that can be found on the site userscripts.org . For 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 Add Source View Chart add-on, it will become much easier to do - the page code is divided into blocks highlighted in different colors. Therefore, you can visually see the boundaries of the tags and the DOM structure, which is easier to understand.
10. Not very popular, but useful Aardvark tool.
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 the cursor over an element of the page, you will see its id, label (if any), the class and the style assigned to it. Using some buttons of the keyboard, for example R, you can delete an element from the page or V to see the source code.
And a couple more useful plugins ...
11. Addon to simplify the same actions iMacros
Addon, as you understand, creates macros for the same type of simple actions. For example, filling out forms and storing 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 add-on page.
12. Last for today is FoxyProxy
This add-on is an extension of the standard Firefox functionality for managing proxy usage settings. With it, you can switch proxy servers on-the-fly, quickly enable and disable proxies, use templates for proxies.
That's all for today. I hope this selection will help you to simplify the work and achieve the desired results. :)
Originally posted in
Source: https://habr.com/ru/post/86387/
All Articles