Browser for web developers. Which browser should you choose? Useful additions for web developers

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 capabilities.

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 you can download the latest version of Firefox Developer 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 feature is very useful during layout, that is, when we place elements on the page.

To show this line you need to do the following:

On the keyboard, press the key combination SHIFT+F2.
In the console that appears at the bottom of the page, enter the word "rulers".
And then press ENTER.
To turn off 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 is screenshots using CSS selectors.

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

Again, press the key combination SHIFT+F2 on the keyboard, that is, turn on the console.
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 any 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 style files, you need to open Firefox Developer, go to the “Styles” block and in the right column opposite the required style file, click on the icon with an eye 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 spend a lot of time searching through the source code. Firefox Developer provides 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

A truly 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

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

V Video

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 the best Firefox extensions 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

It's an all-in-one extension that adds a number of useful tools to your Firefox. Some of the tools included in this addon are displaying and editing CSS style sheets, 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

A simple but useful plugin that 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 for the 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 older versions of Internet 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 your web design for older Internet Explorer browsers by creating a new tab page 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 regular 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 the user interface, spellcheck 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 built-in cookie browsing, the ability to change domains, the ability to edit multiple cookies at once, and 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 that allows you to find out what software is being used on a 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 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 from one operating system to 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 is a handy tool that allows you to explore website elements to find out important information about the fonts used on the page, such as font family name, font color, line spacing, decor, 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.

Mozilla has had several significant events recently. First of all, it's Firefox's anniversary. Ten years ago, a group of hackers calling themselves Mozillian released the first version of Firelis, a browser that broke the monopoly of Internet Explorer with 95% of the market share. Secondly, in a long-term competition for performance with Chrome, the SpiderMonkey engine outperformed V8 in Google's own tests. And thirdly, this is, of course, the release of Firefox Developer Edition.

Firefox Developer Edition will replace the existing Firefox Aurora development channel and will include new features from Firefox Nightly. The six-week browser development cycle will also remain: Nightly - Developer Edition - Beta - Release. Thus, the developer will have 12 weeks before the innovation is released. The new browser uses a separate user profile, which allows it to be launched simultaneously with regular Firefox.

Fresh design

The updated interface makes access to developer tools faster and uses a new dark theme by default. But you can also switch to classic or install any third-party theme and extension. Changes also affected the appearance of the settings window.

Forget button

Security issues have not gone unnoticed: a “Forget” button has appeared on the browser dashboard; when clicked, information about cookies, history, open tabs and windows for the last five minutes, two hours or a day is deleted.

Firefox Hello

Many people have probably already heard about WebRTC, and perhaps even experimented with it. So, with the support of Telefonica, calls and video calls using this technology have been added to the new geeky Firefox. And this “browser Skype” is called Firefox Hello.

About the most important thing

Well, we have smoothly reached the most important thing - tools for web developers, the emphasis and root cause of the appearance of this browser. In general, the community responded more than positively, many said that at one time they switched from Firefox to Chrome only because of DevTools, and now it’s time to go back. But there were also statements that nothing new had appeared, but that they simply took everything that was there and designed it differently. I want to state that this is an absolute lie. The Firefox team has significantly improved existing ones and provided completely new tools for developers.

More advanced JavaScript debugging.
The web inspector has been improved, it now has a window with the fonts used, and it has finally started displaying before and after pseudo-elements in the DOM.
Tools for working with responsive design have been transformed.
A style editor with premium autocomplete lets you edit CSS files right in the browser.
More informative console and network monitoring.
Scratchpad for executing JavaScript on the fly.
Switch between online and offline modes.
Very convenient color picker.

WebIDE - integrated development environment

WebIDE was introduced as a beta feature (not available by default) in Firefox 33 and is now officially included in the Developer Edition. With WebIDE, which replaces the application manager, you can develop, deploy, and debug Firefox OS applications directly in the browser or on a Firefox OS device. Autofill feature, help screen feature, thorough check are some of the new features. You can also pause the application and inspect elements with the built-in debugger.

Valence - cross-browser development and debugging

This extension was originally called Firefox Tools Adapter. Valence is designed to test projects from different devices (for example, Chrome on Android, Safari on iOS) and modify web content, simulating the Firefox interface.

Web Audio Editor

Allows you to interact with the Web Audio API in real time.

conclusions

In principle, I have listed all the main innovations. I don’t know about you, but I have only positive emotions from working with Firefox Developer Edition. Perhaps I have a biased good attitude towards the manufacturer themselves for their openness, altruism and desire to make the web better...

Has Mozilla done anything radically new and innovative? No, and no one argues with this. Even on their landing page it says “It’s everything you’re used to, only better.” But I absolutely agree with this statement.

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” - it allows you to experiment with the entire range of fonts from the Google Fonts library 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 of the page.

7. Web Developer checklist

An extension to automatically check whether a site satisfies the basic principles of SEO, whether it is sufficiently productive and user-friendly. The results of the check 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 a lot of time.

9. Instant Wireframe

An extension with which you can “turn” any page into a structural diagram of the 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 your Gmail inbox into a CRM system. You can track the status of deals and negotiations conducted via email with counterparties, use Streak to process requests from product users and track corrections of submitted errors, and so on.

12. Search Stackoverflow

An extension for quick search of the popular developer resource 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 with development, but with 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.