After some searching on the Internet, I found some statistics on browser usage. Of course, these figures are relative and average. Here's what the Liveinternet statistics show:

• Google Chrome — 24,2%;
• Firefox - 19.6%;
• Opera - 12.3%;
• Internet Explorer - 10.2%;
• Safari - 4.5%

From the collected data it is clear (by the way, this statistic for 2013) it is clear that it has gained great popularity among users Google browser Chrome. Yes, Chrome really deserves attention: speed, support modern technologies, stability, expandability. But my choice did not fall on him. Why?

What browser am I using?

I really like the browsers Google Chrome, Opera, Safari. There is something special in each of them. But my choice is . Why, what's special about it? First of all, before asking this question, think about what category of users do you belong to? I'm a web developer, and my choice is obvious.

But this is not the only reason. There are many more nuances that helped me make a choice in favor of the fox. I noticed that when working with sites, namely in the control panel ( visual editor and all that) I was only able to work correctly in Firefox. In the rest, including Google Chrome, incomprehensible errors were constantly observed. It’s hard for me to explain this now, but I think some webmasters have already encountered this and understand me perfectly.

Another undoubted advantage in favor of Firefox is the huge number of extensions. There are so many of them that you don’t even know what to choose. I put together a package of extensions that I needed, without which I can’t imagine my work. I will talk about them in the next article.

Firefox Disadvantages

Naturally, Mozilla Firefox There are disadvantages and there are many of them. Here are the main ones that I can highlight:

• high consumption of computer resources (especially when many tabs are open). Often a weak computer simply cannot handle it and freezes stupidly;
• frequent crashes.

Due to its slowness and retardation, many are forced to abandon this Firefox combine. And another crash of the plugin will not be particularly pleasing. I don’t argue that it is, that is. But for web development I use it. I also recommend it to others.

Everything stated above is my purely personal opinion. I know webmasters who only use Google Chrome and get the job done just fine. In general, the choice is yours, but have I already made mine?

What browser do you use?

No matter what you've heard about Google Chrome, when it comes to web design and development, Firefox is still the best IDE-friendly browser you can find.

Heck, Firefox even has a special version of the browser made just for web developers. That's how much Mozilla cares about web designers and developers.

Firefox also has a huge collection of extensions that make the browser more powerful for maximum effect. Here are some of best extensions Firefox that you can use to make your web development life easier.

Install, test and use most of these extensions. After all, they are all free to use!

• What it does: Inspects web pages

Firebug is an extension that web designers and developers simply cannot live without. This extension is like an enhanced version of the integrated developer console that comes with Firefox. Firebug makes it much easier for you to inspect elements on web pages and show you how things work across different sites.

• Suitable for: web developers
• What it does: client for Firefox

FireFTP is an FTP/SFTP client for Firefox that allows you to securely upload and transfer files between your computer and the server directly from your browser. With this add-on, you'll never have to jump between your browser and FTP client applications again.

• Suitable for: web developers and designers
• What it does: analyze and check web pages

This is an all-in-one extension that adds a number of useful tools. Some of the tools included in this addon are table display and editing CSS styles, disabling styles, debugging tools, etc.

• What it does: Color analysis tool

ColorZilla is a great tool that front-end web designers will find quite useful. This addon has an eyedropper for quickly choosing colors on a web page, a CSS gradient generator, a color analyzer, color palettes and much more.

• Suitable for: web developers
• What it does: Modify websites with custom code

Loved by over a million Firefox users, Greasemonkey is an extension that will give you endless fun. This add-on allows you to customize popular websites by editing them using your own JavaScript code. You can also enjoy scripts already created by other developers.

• Best for: Interface designers
• What it does: Adjusts the offset of web elements

Simple but useful plugin, which allows you to inspect web elements and visually see how many pixels are off in the elements, creating a composition with transparent layers. Using this composition you can set up your actual web page to match the overlay to achieve best result without any guesswork.

For example, if one of the images on your web page overlaps another object, you can use Pixel Perfect to determine how many pixels you need to adjust to get that image in the right place.

• Suitable for: web designers
• What it does: Loads everything from a web page

This plugin lives up to its name by allowing you to download everything from a web page. With one click, you can download all the images, links and other data contained in a web page using this extension. The addon also has a built-in download accelerator that optimizes download speed by four times.

• Best for: Interface designers
• What it does: Check web pages in Internet Explorer

Believe it or not, there are people who still use the old ones Internet versions Explorer to access the Internet. Creating sites that work well in these older browsers is one of the problems that web designers still struggle with. This plugin makes it easy to customize web designs for older Internet browsers Explorer, creating new tab in IE.

• Suitable for: web designers and developers
• What it does: Shows you about the technology used on the website

Wondering what technologies were used to create your favorite websites? Then this add-on will be useful to you. BuiltWith is an extension that allows you to scan websites to find what technologies are used on the page. A great tool for all aspiring web designers to learn from ready-made websites.

• Suitable for: web developers
• What it does: Turns Java on or off

This add-on allows you to easily enable or disable Java in your browser. It can also disable Javascript, Cookies, animated images, Flash and more on the web page. This is a useful plugin not only for developers, but also for ordinary users to improve browser security and reduce bandwidth.

• Best for: Interface designers
• What it does: Measures elements in pixels

The function of this add-on is simple, it allows you to draw a virtual ruler on top of a web page or an element on a page to measure the width, height or pixel alignment of the element on the web page. MeasureIt is useful for most front-end developers to create wireframes.

• Suitable for: web designers
• What it does: switches the language in the browser

This is a useful tool that instantly translates your Firefox into another language. Everything in your browser, including user interface, spell check dictionary and website content will be translated into the language of your choice. A great feature that you can use when developing multilingual websites.

• Best for: Interface designers
• What it does: generate dummy text

Creating dummy text for your new website mockups and prototypes is a boring task that is unlikely to entertain even a single designer. This extension makes the process less boring by allowing you to generate Lorem Ipsum dummy text directly from Firefox.

• Suitable for: web developers
• What it does: edits and creates cookies

This add-on not only manages your site's cookies, but also allows you to easily edit and create new files. Some of the plugin's features include inline browsing cookies, the ability to change the domain, the ability to edit multiple cookies at once and much more.

• Best for: Interface designers
• What it does: Selects colors on a web page

An easy-to-use tool that allows you to pick the colors of any pixel on a web page and easily copy the RGB or Hex color code for use in your own projects. The beauty and visual interface of this tool make it much easier for beginners to learn about colors on web pages.

• Suitable for: web designers and developers
• What it does: Gives information about the software used by the website

Similar to the BuiltWith add-on, Wappalyzer is another useful extension, which allows you to find out which software used on the website. For example, you can find out what type of CMS the site uses, what operating system the website server supports, and much more.

• Suitable for: web developers
• What it does: Changes the browser user agent

Want to know what your website will look like on different platforms and operating systems? Then this is a tool that will definitely come in handy for you. User-Agent Switcher allows you to switch between different platforms such as Android, Mac, Windows and select operating systems to change your browser's user agent.

• Suitable for: web designers and developers
• What it does: Shows an example of using the browser's memory tab

This is a handy add-on that will help you determine how much of your computer's resources are being used by each open tab in Firefox. You can use this tool to find out how many resources your site is using and optimize your site for maximum performance.

• Suitable for: web and graphic designers
• What it does: Opens images in Photoshop

This add-on does what its name says, simply opens with one click the images you find on a web page with using Photoshop. No need to upload an image or launch Photoshop, the extension will do everything you need.

• Best for: Interface designers
• What it does: Improves HTML tables

Graphs, statistics, comparisons, tables - this add-on can do it all. You can use this tool to create user-friendly and beautiful HTML tables and diagrams.

• Suitable for: web developers
• What it does: SSH client for Firefox

Typically, you need to install an application to run the SSH terminal. These applications differ in one thing operating system from another. FireSSH, however, works on all platforms as long as you have Firefox. The extension allows you to launch an SSH terminal directly from the browser.

• Best for: Interface designers
• What it does: Automatically refresh web pages

One of the annoying things that web designers face when developing websites is having to manually update the web page after every small change to the code is made. Auto Refresh is an extension that fixes this problem by allowing you to automatically refresh one or more tabs in Firefox at intervals you define.

• Best for: Interface designers
• What it does: Resizes Firefox windows for specific screen resolutions

This add-on allows you to resize your Firefox window at specific resolutions to see how your website looks on different screens. You will need to install the Firefox Add-On Bar for this extension to work properly.

• Suitable for: web designers and developers
• What it does: finds information about the fonts of the page and its elements

Font Finder - handy tool, which allows you to examine elements of a website to find out important information about the fonts used on the page, such as font family name, font color, line spacing, decoration, and more.

• Best for: Interface designers
• What it does: checks web pages in different browsers

The function of this add-on is simple. It allows you to instantly open any web page you are viewing in Firefox using another browser with just one click. There is no need to copy URLs, open each browser one by one and paste the URLs to open the website.

• Suitable for: web designers and developers
• What it does: clears browser cache

This add-on instantly clears Firefox's browser cache (RAM and DISK) to reduce your computer's resource usage. The extension allows you to clear the cache by simply clicking on a button or pressing the F9 key on your keyboard. If you want to quickly view changes made to a web page, this add-on will be very useful.

iMacros is an extension that helps in testing web pages. Instead of having to perform the same actions on the page themselves, the developer only needs to record the required sequence of actions in iMacros and launch the extension when necessary.

The extension is able to work with sites implemented using Java, Flash, Flex, Ajax and Silverlight technologies.

2. Font Playground

An extension for those who like to “play with fonts” - allows you to experiment with the entire range of fonts from the library Google Fonts without making changes to the page code. You can change not only the font itself, but also its size, writing style, and so on.

3. Project Naptha

An extension for Google Chrome, which allows you to select and copy text even from pictures, will be useful, according to Cretive Bloq, to ​​anyone who has had to deal with embedded text at least once in their work.

4. What Font

An extension that allows you to instantly determine which font is used on a particular page, without performing almost any additional actions - by hovering the mouse cursor over the inscription.

5. YSlow

YSlow is a tool that not only checks the loading speed of a particular web page, but also tells the developer what is slowing it down. To do this, the extension checks the site for compliance with 23 of 34 performance rules formulated by the Yahoo team.

6. Web Developer

A whole set of useful tools for managing website elements - for example, for analyzing web resources and layouts, testing code and instantly changing parameters and appearance pages.

7. Web Developer checklist

Extension for automatic check, whether the site satisfies the basic principles of SEO, whether it is sufficiently productive and user-friendly. The test results are presented in the form of a kind of checklist - you can see more detailed information and recommendations for each of the unfulfilled items, as well as instantly correct errors.

8. DevTools Autosave

Allows you to automatically save any changes made to the page code using Chrome DevTools. As the author of the material notes, the tool helps developers save money large number time.

9. Instant Wireframe

An extension with which you can “turn” any page into block diagram material layout - wireframe. Allows developers and web designers to familiarize themselves with the layout of any page on the Internet without leaving the browser.

10. Ripple Emulator

Ripple Emulator is an emulator extension for Google Chrome that allows you to test websites on various mobile platforms with different screen resolutions. Can be used in combination with other extensions for testing and debugging resources.

11. Streak

Streak is an extension that allows you to turn mailbox to Gmail in the CRM system. You can track the status of transactions and negotiations that are ongoing in email with counterparties, use Streak to process requests from product users and track corrections of submitted errors, and so on.

12. Search Stackoverflow

Extension for quick search of the popular resource for developers Stack Overflow.

13. PHP Ninja Manual

Allows you to instantly access PHP 5.5 documentation from your browser.

14. PerfectPixel

PerfectPixel is an extension for Google Chrome. It allows you to “overlay” a translucent grid on a web page and check specified distances against it. You can overlay other images - such as the original layout - to ensure that the resulting page matches it exactly:

15. Code Cola

A tool for viewing the source code of pages and editing CSS code.

You can change the shadows, box circumferences, and so on by dragging the slider. After making changes, you can copy the resulting code and replace it in the site code.

16. Chrome Sniffer

A browser extension that detects which JavaScript libraries, framework or CMS are used on a resource.

17. User-Agent Switcher

User-Agent Switcher is an extension that allows you to “mask” the Google Chrome browser as Internet Explorer, Opera or any other browser.

18.IE Tab

Built-in Internet Explorer emulator for Chrome.

19. PicMonkey

Simple and free online image editor. Allows you to “capture” images or take browser screenshots - and immediately edit them using a Chrome extension.

20. Chrome Daltonize

An extension that helps tailor web services for those users who suffer from color blindness - showing the developer how the site is viewed by those who suffer from this disease. Allows web designers and developers to create more accessible services.

21. Page Ruler

A simple tool that helps you determine the height, width and position of any element on the page.

22. Check My Links

An extension that checks a web page for broken or incorrect links.

23. Flickr Tab

An extension that helps not so much in development, but in finding inspiration and good photos. Shows one image from Flickr on each new tab in Google Chrome. When clicking on it, the user goes to the author’s page, where he can familiarize himself with his other works.

24. Google Art Project

A browser extension similar to the previous plugin in this list - only instead of photos from Flickr in the new tab, the user sees recognized works of art - for example, paintings by Van Gogh or Manet.

25. Data Saver

Official extension from Google for traffic compression, which enables traffic saving in the Google Chrome browser.

Firefox, as a browser for web development, has many great tools that make your work on your website easier. We will look at the 10 most commonly used features that web developers use in this article and look at the Firefox Developer tools. Believe me, this browser even without installed add-ons has a lot of possibilities.

If you use the Google Chrome browser, then be sure to check out the following selection of plugins:

Firefox Developer Features

If you suddenly do not have this browser, then download latest version Firefox Developer can be found here - Download Firefox from the official website.

Well, let's see what are these 10 Firefox browser tools that you can use as soon as you install it.

1 Show vertical and horizontal ruler

Firefox allows you to show horizontal and vertical rulers directly on the page. This opportunity very useful in layout, that is, when we arrange elements on the page.

To show this line you need to do the following:

1. On the keyboard, press the key combination SHIFT+F2.
2. In the console that appears at the bottom of the page, enter the word "rulers".
   And then press ENTER.
3. To disable rulers, re-enter the word "rulers".

2 Taking screenshots using CSS selectors

Firefox Developer actually allows you to take screenshots of the entire page or just the visible part. But what is more interesting opportunity, so these are screenshots using CSS selectors.

To take a screenshot using CSS selectors, do the following:

1. Again, press the key combination SHIFT+F2 on the keyboard, that is, turn on the console.
2. In the console that appears, enter the phrase " screenshot --selector YOUR_CSS_SELECTOR".
   And then press ENTER. Then you will see a window where you will need to select a folder to save the image.

3 Defining color on the page

Also in Firefox Developer there is the ability to determine the color on the page.

4 Layers per page in 3D

This tool allows you to see errors when forming the structure of the page, since here all the layers are clearly and clearly shown.

5 Browser styles

Browser styles are formed from the styles that the browser sets by default and the styles of a specific visitor, that is, styles with prefixes. Thanks to the ability to view browser styles, you can easily diagnose problems in your styles if they have been overridden for some reason.

6 Disable Javascript for the current session

It is good practice to test your site with Javascript disabled. That is, with this action we simulate disabled Javascript for your visitor and see the site as it is viewed by a person who does not have Javascript enabled.

That is, we disable Javascript during the current session and feel free to test it.

7 Dynamically disabling CSS

Also test your site for readability with CSS disabled. To see how your page looks with CSS disabled, you can disable it in Firefox Developer.

To disable any of the styles file, you need to open Firefox Developer, go to the "Styles" block and in the right column opposite required file styles, click on the eye icon so that it becomes crossed out.

8 Defining fonts on a page

Sometimes you need to determine the font on a page, but you don’t want to search for a long time source code. Firefox Developer gives you an excellent opportunity to see clearly what fonts are used on a page and even find out where they are connected from.

9 Adaptability check

Really relevant opportunity at the moment. Because all sites strive to be adaptive and checking using third-party services is not always convenient and takes a lot of time. Now you can use Firefox's built-in responsiveness checker.

To activate this function You need to press the key combination on your keyboard: CTRL+SHIFT+M.

10 Executing Javascript on a page

Quick start Javascript code and on the page you can easily do it with using Firefox Developer. There is such a function here" Simple Javascript editor". Here you can write any Javascript code and it will be executed as a regular script inside the page, that is, interact with all elements on it.

V Video

Review