Browser for web developer. Which browser to choose? Disable Javascript for the current session
Mozilla has had a few milestones in recent years. First, it's Firefox's anniversary. Ten years ago, a group of hackers calling themselves Mozillian released the first version of firelis, the browser that broke the monopoly Internet Explorer with 95% market share. Second, in a long-running performance competition with Chrome, SpiderMonkey's engine outperformed V8 in Google's own benchmarks. And thirdly, this is, of course, the release of Firefox Developer Edition.
Firefox Developer Edition will replace existing channel development of Firefox Aurora, and innovations from Firefox Nightly will fall into it. The six-week browser development cycle will also remain: Nightly - Developer Edition - Beta - Release. Thus, the developer will have 12 weeks before the innovation gets into the release. New browser uses a separate user profile, which allows it to run simultaneously with regular Firefox.
fresh design
The updated interface makes it faster to access developer tools and defaults to the new dark theme design. But you can also switch to classic or install any third party theme and extension. The changes also affected appearance settings windows.
Forget button
Security issues were not left unattended: dashboard The browser now has a “Forget” button, which, when clicked, deletes information about cookies, history, open tabs and windows for the last five minutes, two hours or a day.
Firefox hello
Many have probably already heard about WebRTC, and perhaps even experimented with it. So, with the support of Telefonica, calls and video calls on this technology have been added to the new geeky Firefox. And this "browser Skype" Firefox Hello is called.
About the most important
Well, we smoothly got to the most important thing - tools for web developers, emphasis and the root cause of the appearance this browser. In general, the community reacted 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 appeared, but they simply took everything that was and designed it differently. I want to state that this is an absolute lie. The Firefox team has greatly improved the existing ones and provided brand new tools for developers.
- More advanced JavaScript debugging.
- The Web Inspector has been improved to include a window with the fonts used, and it finally starts displaying the before and after pseudo-elements in the DOM.
- The tools for working with responsive design have changed.
- The style editor with first-class auto-complete allows you to 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 comfortable color picker.
WebIDE - Integrated Development Environment
The WebIDE was introduced as a beta feature (not available by default) in Firefox 33 and is now officially included in the Developer Edition. With the Application Manager replacement WebIDE, you can develop, deploy, and debug Firefox OS applications right in your browser or on a Firefox OS device. Autocomplete function, help screen function, thorough check are some of the novelties. 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 the Firefox Tools Adapter. Valence is designed to test projects with various devices(e.g. Chrome for Android, Safari for iOS) and modify web content by 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 good prejudice against the manufacturer itself for their openness, altruism and desire to make the web a better place...
Has Mozilla done something radically new and innovative? No, and no one argues with that. Even their landing page says “It’s everything you’re used to, only better.” But with this statement I absolutely agree.
If you are an active browser user Google Chrome, then it's time to pump it to its fullest with the tools of a real developer. Here is a list of popular plugins that will simplify the work and diversify the ordinary Internet surfing.
stylebot
If you want to remake your favorite web pages in your own way, then better plugin can not found.
Image Downloader
Application for downloading your favorite pictures from any site.
DomFlags
Create a menu of links to quickly navigate through your code.
CSS Shack
A very handy utility in which you can work with text, images, typeset pages, and then simply export the file to CSS and use it to create your page.
Marmoset
An extremely useless app for taking beautiful screenshots of your code. Beauty refers to the ability to change the background color and rotate in 3D.
iMacros for Chrome
If you need to set up testing a web page by cyclically performing certain actions, then this application is exactly what you need.
Font Playground
Not the most intricate application, but extremely convenient. Allows you to quickly evaluate the font change, both in a separate block and on the entire page.
Firebug Lite
Perhaps you know about a similar powerful add-on for Firefox, which serves as a debugger and DOM inspector for JavaScript, HTML, CSS. A little less functional version is also available on Chrome.
Window Resizer
Allows you to quickly see how the page will look on a screen of arbitrary size.
Ripple Emulator
A similar utility that demonstrates the display of a page on a specific gadget.
Project Naptha
The application will be useful not only to the developer, but also to a simple user. Allows you to copy text from an image, edit it and even translate it.
What Font
To find out which font is in front of you, just install the What Font application in your browser.
ColorZilla
And this app will let you know the color number.
Yslow
This utility will not only show the page loading speed, but also tell you what exactly reduces this speed.
web developer
What web developer can live without the Web Developer app? Adds standard developer tool buttons to the main window.
Page Ruler
Roulette for web pages will tell you the dimensions of an element.
DevTools Autosave
As the name implies, this application automatically saves your coding work.
Instant Wireframe
With this utility, you can view the structural diagram of the page (wireframe) on any resource.
Search Stackoverflow
A quick search through the popular Q&A service for programmers and developers.
perfect pixel
An application for working with layers on the web, in particular, you can make them translucent.
Chrome Daltonize
If you suddenly decide to make a website designed, among other things, for people with a color perception problem, then by all means use this utility.
Check My Links
What browser extensions and applications do you use at work?
No matter what you've heard about Google Chrome, when it comes to web design and development, Firefox is still the best browser with a friendly development environment that you can find.
Heck, Firefox even has a special version of the browser built 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 which 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 similar to 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: Firefox client
FireFTP is an FTP/SFTP client for Firefox that allows you to securely upload and transfer files between your computer and a server directly from your browser. With this add-on, you'll never have to jump back and forth between your browser and FTP client applications again.
- Best for: web developers and designers
- What it does: Web page analysis and validation
This is a kind of 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 tables css styles, disable styles, debug 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 quick select colors on a web page, generator css gradient, color analyzer, color palettes and 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 with 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 yet useful plugin that allows you to inspect web elements and visually see how many pixels are disabled in elements by compositing with transparent layers. Using this composition, you can customize your real 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 need to be adjusted 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 anything from a web page. With one click, you can download all the images, links and other data contained in a web page using given extension. The addon also has a built-in download accelerator that optimizes the 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 get online. Making websites work well in these old browsers is one of the problems web designers still struggle with. This plugin makes it easy to customize web design for older Internet browsers Explorer, creating new tab in IE.
- Best 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 is for you. BuiltWith is an extension that allows you to crawl websites to find what technologies are being used on a page. A great tool for all beginner web designers to learn from finished 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 a 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 an element on a web page. MeasureIt will be useful to most interface developers for creating layouts.
- 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, spell check dictionary, and website content, will be translated into your chosen language. A great feature that you can use when developing multilingual websites.
- Best for: interface designers
- What it does: generates dummy text
Creating dummy text for your new website layouts and prototypes is a boring task that is unlikely to keep even one designer entertained. This extension will make the process less boring by allowing you to create dummy "Lorem Ipsum" text right 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 makes it easy to edit and create new cookies. Some of the plugin's features include inline cookie viewing, the ability to change domain, 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 select the colors of any pixel on a web page and easily copy the RGB or Hex color code to use in your own projects. The beauty and visual interface of this tool makes it much easier for beginners to learn colors on web pages.
- Best for: web designers and developers
- What it does: Provides information about the software used by the website
Similar to the BuiltWith add-on, Wappalyzer is another useful extension that lets you know which software used on the website. For example, you can find out what type of CMS a site uses, what operating system the website server supports, and more.
- Suitable for: web developers
- What it does: Changes the user agent of the browser
Want to know how your site will look on different platforms and operating systems? Then this is the 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.
- Best for: web designers and developers
- What it does: Shows an example of using a browser memory tab
This is a handy addition 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 much resources your site is using and optimize your site for maximum performance.
- Best for: Web and Graphic Designers
- What it does: Opens images in Photoshop
This add-on does what its name says, it simply opens the images you find on a web page using Photoshop with a single click. No need to upload an image or launch Photoshop, the extension will do whatever it takes.
- 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 handy and beautiful HTML tables and charts.
- Suitable for: web developers
- What it does: SSH client for Firefox
Typically, you need to install an application to run an SSH terminal. These applications are different 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 your browser.
- Best for: interface designers
- What it does: Automatically updates web pages
One of the annoying things that web designers face when developing websites is having to manually update a web page after every little change to the code. Auto Refresh is an extension that fixes this issue by allowing you to automatically refresh one or more tabs in Firefox at intervals you define.
- Best for: interface designers
- What it does: Resize Firefox windows for specific screen resolutions
This add-on allows you to resize the Firefox window at certain 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.
- Best 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 the elements of a website to find out important information about the fonts used on the page, such as the name of the font family, font color, line spacing, decor, and more.
- Best for: interface designers
- What it does: checks web pages in various browsers
The function of this add-on is simple. It allows you to instantly open any webpage you are viewing in Firefox with another browser with just one click. There is no need to copy URLs, open each browser one by one and paste URLs to open a website.
- Best for: web designers and developers
- What it does: clears the browser cache
This add-on instantly clears the cache Firefox browser(RAM and DISK) to reduce the use of computer resources. The extension allows you to clear the cache by simply clicking on a button or by pressing the F9 key on your keyboard. If you want to quickly review the changes made to a web page, this add-on will prove to be very useful.
iMacros is an extension that helps in testing web pages. Instead of doing the same actions on the page on their own, the developer only needs to write the required sequence of actions in iMacros and run 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 whole range of fonts from google libraries 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 that allows you to select and copy text even from pictures will be useful, according to Cretive Bloq, to everyone who has ever 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 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 slows it down. To do this, the extension checks the site for compliance with 23 of the 34 performance rules formulated by the Yahoo team.
6. Web developer
A whole set of useful tools for managing site elements - for example, for analyzing web resources and layouts, testing code, and instantly changing the parameters and appearance of a page.
7. Web Developer checklist
An extension to automatically check if the site meets 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 outstanding items, as well as instantly correct errors.
8. DevTools Autosave
Lets in automatic mode save any changes made to the page code using the Chrome DevTools tools. As the author of the material notes, the tool helps developers save a large number of time.
9. Instant Wireframe
An extension with which you can "turn" any page into a structural diagram of the layout of the material - wireframe. Allows developers and web designers to familiarize themselves with the layout of any page on the web 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 conjunction with other extensions to test and debug resources.
11. Streak
Streak is an extension that allows you to turn mailbox on Gmail to the CRM system. You can track the status of transactions and negotiations that are ongoing in e-mail with counterparties, use Streak to process product user requests and track fixes for submitted bugs, and so on.
12. Search Stackoverflow
Extension for quick search on the popular resource for developers Stack Overflow.
13. PHP Ninja Manual
Allows instant access to PHP 5.5 documentation from a browser.
14.Perfect Pixel
PerfectPixel is an extension for Google Chrome. It allows you to “overlay” a translucent grid on a web page and check the given distances against it. You can also overlay other images - for example, the original layout - to make sure 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 shadows, box circles, 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 determines which JavaScript libraries, framework or CMS are used on the resource.
17.User-Agent Switcher
User-Agent Switcher is an extension that allows you to "mask" Google browser Chrome under Internet Explorer, Opera or any other browser.
18.IE Tab
Built-in Internet Explorer emulator for Chrome.
19 Pic Monkey
A simple and free online image editor. Allows you to "capture" images or take screenshots of the browser - and immediately edit them using the extension for Chrome.
20 Chrome Daltonize
An extension that helps to adapt web services for those users who are color blind - showing the developer how the site is seen 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 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 only in development, but in finding inspiration and good photos. Displays one Flickr image per new tab in Google Chrome. When you click on it, the user goes to the author's page, where he can get acquainted with his other works.
24 Google Art Project
A browser extension similar to the previous plugin on this list - only instead of photos from Flickr in a new tab, the user sees recognized works of art - for example, paintings by Van Gogh or Manet.
25. Data Saver
The official extension from Google for traffic compression, which includes traffic savings in the Google Chrome browser.
The Firefox browser, as a browser for web development, has many great tools that make it easier for you to work on the site. The 10 most used features that web developers use, we'll take a look at in this article and take a look at the Firefox Developer tools. Believe me, this browser even without installed add-ons has a lot of possibilities.
If you are using 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 site.
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 a horizontal and vertical ruler right on the page. This feature is very useful in 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, retype the word "rulers".
2 Taking screenshots with CSS selectors
Firefox Developer actually allows you to take screenshots of the entire page, or just the visible part. But what's more interesting is taking screenshots using CSS selectors.
To take a screenshot using CSS selectors, do the following:
- Again, on the keyboard, press the key combination SHIFT + F2, 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 Determining the 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 in the formation of the page structure, since all layers are clearly and clearly shown here.
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. With 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's good practice to test your site with Javascript disabled. That is, by this action we imitate disabled Javascript for your visitor and see the site as it is observed by a person whose Javascript is not enabled.
That is, we disable Javascript during the current session and boldly test it.
7 Disable CSS dynamically
Also test your site for readability with CSS disabled. To see what your page looks like 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 it becomes necessary to determine the font on the page, but at the same time you don’t want to search for a long time in source code. Firefox Developer gives you a great opportunity to see visually what fonts are used on the page and even find out where they are connected from.
9 Verification of adaptability
A real opportunity for this moment. Because all websites strive to be responsive and with the help of third party services checking 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 the keyboard: CTRL + SHIFT + M.
10 Execute Javascript on the page
Quick launch of Javascript code on a page can be easily done with using Firefox developer. There is such a function "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 videos
