Developer Tools. Mozilla Firefox. Problems with adaptive layout (a bug that almost caused a quarrel for the company)

From the author: without a doubt in the last five years Google Chrome has become the dominant force in the browser wars for desktop and (obviously) mobile users. Developers, on the other hand, are more technically savvy and more security-conscious, which is why they prefer Firefox. All OS distributions with a focus on security contain Firefox, not a browser based on Chromium, although the latter also has an open source source and completely free.

Fortunately for us, adherence to web standards means that the browsers that developers use are, for the most part, compatible with the browsers that most people use. ordinary users. And this is very important, since everything developed for Firefox will work in Chrome in 99% of cases. IE is no longer a priority for most developers. It is outdated and used to load other browsers. Nobody takes Edge seriously now either.

Firefox isn't just loved for its security and privacy. Firefox has always been, for the most part, a community-driven project (though with Wikipedia, "community" has become a little too arrogant). The heart of the community development model is quality improvement user experience. To put it another way, community-driven projects often put the needs of users first. Corporate projects prioritize corporate needs. For developers, this means that there are many free tools available online to make their work easier. For the most part these tools are much lighter than most paid options.

THIMBLE

Thimble is designed primarily for learning HTML. It has full HTML and CSS editor, making it an extremely useful tool for finding quick solutions and copying the final HTML to upload the file to the server. It works better editor code in CPanel, because it doesn't do anything extra and doesn't recognize every apostrophe in the text as a line separator.

JavaScript. Fast start

The interface is divided into two panels. By default, the panel with the code is located on the left, the panel preview- on right. Three viewing modes are available:

mobile view;

full screen view.

In the third view mode, the code panel is temporarily hidden until you return to standard mode viewing, which is easy to do at the touch of a button. Automatic review enabled by default and shows the result of typing code. If it's distracting, you can turn it off. Automatic viewing can even show CSS styles in real time. If you create a block with content and then add styles to it, you can very easily experiment with different types.

Unlike others online editors it's easier to connect here external files. You can even create entire trees of folders for storage. All this makes Thimble my favorite tool for quick creation pages or updates on the site while traveling.

The disadvantage is obvious - the tool requires a network connection (unless, of course, you were able to clone the Thimble platform on local server). The second drawback is that you cannot publish your commercial projects on it, since the platform is not designed for professionals.

Instead, you can copy the HTML code and paste it into the code editor in CPanel or text file, and then save it on your server. The file tree will be completely preserved.

As with most Mozilla projects, Thimble's documentation is quite sparse, especially in terms of what you can and can't do. The developers expect you to read the terms of use, which is a pretty dubious assumption, even if every web manager using online solutions for development, must do this.

The rules of use have very an important part where it says you give Mozilla free license for everything you publish on their platform, and also give your consent to reuse and editing your product by other people. Obviously, after this you will not want to publish your professional projects on this platform.

X-RAY GOGGLES

Children have always wanted to get X-ray glasses, but alas, such technologies (at least those that actually work) are too expensive for ordinary children. Mozilla's X-Ray Goggles won't show you what a school nurse wears under her outerwear or what a Scottish gardener has under his kilt, but with this tool you can see how a web page works and can edit the code to make it work. -to another. This is much cooler than any kind of perversion, right?

The primary purpose of the tool from a professional point of view is sand modeling for testing changes in existing designs without the need to make immediate changes. Everything is very simple, to install, just drag the X-Ray Goggles button to the bookmarks bar. To activate, press the button, to exit, press ESC.

WEBMAKER

Not the most useful tool for most developers since it is designed only for Android. Webmaker offers almost nothing that cannot be found in in social networks. Mozilla abandoned a fairly useful online video editor (Popcorn) and replaced it with this tool. Webmaker is suitable for beginners as it uses a mobile-first design approach that has become a must for modern websites.

However, experts will be confused by the limitations associated with development only for mobile infrastructure. This tool is mainly aimed at attracting teenagers to the Mozilla brand, and also aims to help teachers look cool (teaching them to speak the language of mobile web development).

Another issue that may be confusing is that it is yet another app that takes up space and resources on the device. Android has a habit of quickly filling up memory, and most users don't close apps after quitting because Google hasn't bothered to make the interface for closing anything intuitive or simple. As a result, most Android smartphones start to slow down after a couple of months, and people simply change them or constantly complain about the lack of free space.

EDITOR

Editor is the granddaddy of Mozilla's Developer Panel and was originally called Composer. Presumably the name was changed so as not to be confused with KompoZer, a descendant of Composer. Before KompoZer there was Nvu, and you won't want to use either since they both don't support HTML5. You can try BlueGriffon, KompoZer's half-brother. It supports HTML5. However, you will only get a CSS editor if you pay for the plugin. All of these tools are still usable, with the possible exception of Nvu. Editor/Composer is still available in Mozilla browser SeaMonkey.

SCRATCHPAD

A tool for writing and testing JS code. The console only allows you to execute one line of script at a time, which greatly limits your options. At the same time, you can enter as many lines as you like into scratchpad. Activated at any time Firefox tab by pressing Shift + F4.

A text editor window will open with simple interface. You can open existing scripts, edit them and save them. You can also create new scripts. The editor has built-in auto-completion of entered commands. There is also documentation on the command syntax. You can run the entire script or parts of it using selection.

JavaScript. Fast start

Explore JavaScript basics on practical example on creating a web application

RESPONSIVE DESIGN MODE

This feature is built right into Firefox (it's also available in Chromium and Google Chrome). With its help, you can check page layouts at different resolutions on the same screen. The tool is not perfect (for all browsers), but it will work for most scenarios to test the same appearance of the site. Firefox's responsive mode is activated by simply pressing Ctrl + Shift + M. Return to normal mode can be pressed again.

You can change the layout using a series of buttons located above the layout. The first button on the left is similar to “close window”, you can use it to exit adaptive mode. Next is a drop-down list where you can select permission templates, set a new one, or (not recommended) remove an existing permission template from the list. To the right of the drop-down list is a button to switch between portrait and landscape mode. Next is a button for simulating screen touch events. The last button takes a screenshot.

Some versions of Firefox allow you to set the pixel ratio, but how well this works depends on the pixel ratio on your device. In addition to the built-in methods for viewing adaptive layouts there are others too. Now we'll show you.

WEB DEVELOPER TOOLS EXTENSION

This tool is not available by default in Mozilla, it is an extension for Firefox by Chris Pederick. The extension packs a huge range of tools to suit all your needs. With it you can:

turn something on and off;

control cookies;

change CSS pages;

change form fields on the page;

remove masks from fields like password;

pull out detailed information about images;

examine DOM elements;

emphasize elements;

change screen size;

view layouts in responsive mode better than in built-in methods;

and much more.

The simplest way describe this extension - Swiss knife among development tools. It's good at almost everything you need, but all the tools are hidden away until you need them. You can access them using the right mouse button in context menu, there is also a toolbar. The toolbar is much better.

FIREFOX DEVELOPER TOOLS

Much of Firebug's functionality is now available directly from the built-in developer panel, which also includes a console. The panel is similar and works like the panel in Chromium and Google Chrome. The interface is unintuitive, and while you master and understand all the functions, you will make a lot of mistakes.

Inexperienced users may not notice one of the functions - the JS command line at the bottom of the console, it is not marked in any way. She works better versions in Chromium/Chrome, but their implementation, which adds a blinking cursor directly to the console, is much more obvious.

MEASUREIT EXTENSION

It's easier to install Ian McIntosh's excellent Screen Ruler, but Kevin Freitas' Measureit extension has an advantage. It can measure width and height at the same time, and it is more accurate. Useful tool to measure something in a browser window. In some versions Firefox tool does not work, it may be due to a conflict with other extensions. Try disabling extensions before installing.

COLORZILLA EXTENSION AND EYEDROPPER

Every designer should have both or one of the tools, because with their help you can quickly find the color of any pixel in the browser. You can also use GColor - a Gnome tool that does the same thing, but it has the ability to get a color sample from any window, not just the browser. The advantage of ColorZilla and Eyedropper over GColor is that they show a magnified view of the pixel from which the color is derived.

The tool is activated by clicking on the eyedropper icon, after which the cursor changes to a pattern in the form of a cross (ColorZilla) or a large magnifying glass (Eyedropper). Hover your cursor over the window and find the pixel whose color you want to get. Left-click to copy the color to the clipboard (in hex format), after which the extension will automatically close.

These are just assistants, they won't do everything for you.

You are still a developer, you still need to fulfill your responsibilities. These tools, if used correctly, make things easier. They can help different ways, and for most people, some of them are completely useless, despite the best intentions on Mozilla's part. There are other tools online that are better than those described in this article, but these are usually the best tools to use. Sometimes it's good to know what to eat free tool from Mozilla, which can be used if the need arises.

Firefox contains many tools to help web developers do their jobs. Many people still use FireBug and don't realize that Firefox now has its own built-in tools. In this chapter, we are going to look at the tools that are most useful for developing applications for Firefox OS.

If you are interested in receiving additional information about these tools and what others good tools will appear in Firefox, look at the page on MDN (though look at the link, I'll wait).

Introduction to Responsive Design

A common web development workflow is to edit an HTML file and reload the page in the browser to see the changes. Unless you're using something like Grunt or Volo, then there's generally no need for a compilation step or similar. Firefox OS Simulator allows you to use the same process, except that the emulator is currently limited to a single resolution (480x320). This is less than ideal if you're also designing your app to run on tablets, phablets, giant TVs, or anything in between.

To test how your app will look at any screen resolution, you can use the Responsive Design tool to change the screen (and viewport). It can be enabled through the menu Tools -> Web Development -> Responsive Design, as shown in the figure below. When you activate this tool, the window will change so that you can resize the viewport by dragging the corners or through the selection list.

Using responsive design is especially useful when testing for media queries, as it allows you to change screen size and see how your site responds to layout changes in real time. Another great feature of Responsive Design is that you can save preset dimensions. If you know the dimensions you are focusing on, then you can quickly check different sizes without having to resize the current browser window.

At the time of writing, most Firefox OS phones on the market run at a resolution of 480x320 and a density of about 96 pixels per inch. However, you should expect this to change over time as new Firefox OS hardware becomes available. Displays will likely have more pixels and more high density(similar to Apple's retina displays).

For reliable operation of your application in the future, do not set any resolution or pixel density in the CSS. Instead, you should use media queries and responsive design principles when creating apps that adapt to any display size. To learn more about responsive design, I recommend the following books: Responsive Web Design and Mobile First.

Overall, responsive design allows us to test our web applications using a variety of various sizes screens without having to change the window Firefox browser. In my humble opinion, this is one of the most useful and available tools web developer, but he has one big limitation: V currently there's no way to test different pixel densities (in other words, see how your site would look on a retina or better display).

Developer Tools

Tools Firefox developer similar to FireBug and tools available in others modern browsers. With these tools, you can execute and debug JavaScript through the console and manipulate the DOM and CSS on the current page.

To call the console, you can open Tools -> Web Development -> Web Console or right-click on the page, select Inspect Element, and click the Console tab.

Except JavaScript console there are many other tools available, such as a style sheet editor, network monitor, JavaScript profiler, JavaScript debugger, page inspector and many more.

In the application created in the previous chapter, we used the console to check the progress of our application. It's pretty effective method debugging our applications, but some developers still use alert() for everything JavaScript code as a "debugging tool".

Using alert() is actually bad because if the developer forgets to remove alert() then users will pay for it. Using a console avoids this problem because all messages are displayed harmlessly (and silently!) in a place that the user would not normally have access to. Using the console also means you don't have to remove messages from your code unless you really want to. This can help in maintaining and debugging the code if something goes wrong (as is common with any software!).

Study and correct use developer tools included in Firefox (or any browser you use) are important step in the making good developer. That's why I encourage everyone to look at the links above and take a closer look at the various tools available in Firefox.

Another special tool that was not mentioned above is called a remote debugger. This tool allows you to connect to your phone under Android control or Firefox OS and use developer tools to debug code running on the device in real time.

Summary

This chapter is dedicated to brief overview developer tools included in Firefox. Using these tools makes the development process easier, especially when you use them in conjunction with the Firefox OS simulator. In the next chapter, we will learn more about the Application Manager and how to make the best use of it.