Firefox extensions for web development for all occasions. Debugging responsive layouts
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 appear in Firefox, check out the MDN page (look at the link though, I'll wait).
Introduction to Responsive Design
The general 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 higher densities (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.
Generally, responsive design allows you 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: in present moment 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 click right click on the page, select Inspect Element and click on the Console tab.
Apart from the 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 way 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 (this is usually done 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.
Resume
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.
Firefox 10, which was released on January 31 (the day the beta version of Firefox 11 was released), finally collected all the accumulated developer tools and supplemented them with Page and Style Inspectors (page inspector and style inspector).
In some ways, these tools are similar to the Firebug tool, however, this does not prevent them from maintaining the uniqueness that is characteristic of Mozilla tools. Instead of copying the tools of Firebug or WebKit, Mozilla decided to keep only the most necessary functions. This was done to make the Mozilla user's experience easier and easier.
It turned out new approach successful or will developers give preference to Firebug? Let's explore.
You can call Page Inspector by right-clicking on a web page and selecting “Inspect” (for me, inspect an element). (Just recently Firebug changed its line context menu to “Inspect element with Firebug” so that it can be distinguished from other built-in developer tools). A purple row will appear at the bottom of the screen containing a list of the parent and children of the selected item.
Parental and child elements can be selected by clicking on them with the mouse button. To see adjacent elements, right-click on the element. There are three buttons: “Inspect”, “HTML” and “Style”. As you can see, this arrangement is much simpler than that sea of shortcuts and buttons that are in Firebug.
By clicking on HTML button, we will see a panel that shows the hierarchy HTML tags, which make up your page. In this panel, you can collapse and expand tags, as well as edit their attributes. When you click on the “Inspect” button, you begin to hover over the elements and thus can select those elements that you want to inspect. When viewed, the element you select is highlighted by Firefox, while the rest of the page is dimmed.
To call the Style Inspector, click on the Style button. Style Inspector shows CSS rules, which are applied to the selected element. In the Style Inspector, you can switch from “Rules” to “Properties”. The “Properties” section shows the calculated CSS values properties of the selected element, along with links to the Mozilla documentation for each property.
In fact, we have covered everything that Page and Style Inspector's do. Missing is the Web console and JavaScript editor presented in earlier Firefox versions, they became separate tools. There is also no network activity monitor, no “edit as HTML” property, no performance-testing tools, you cannot add new tags to the page, and you cannot change the state of an element. There is also no layout panel for viewing the width, padding, and margin dimensions of an element.
Despite these limitations, I continue to use Page and Style Inspector's. I like them user-friendly interface, excellent appearance and thoughtful arrangement of panels. Working with them gives me pleasure and with their help they can solve almost all the problems that I have.
Because of their simplicity, the inspector's interfaces remain relevant even when I reduce the size of the window to test the sensitivity of the design. When the inspector's cannot help me, I return to using Firebug or to the Web Developer Toolbar (web developer toolbar)
Mozilla's tools don't need to replicate the entire set of properties of their competitors' tools because the specialized properties of those tools already exist in Firefox applications. This is what makes Firefox Developer Tools unique.
Firefox 11 version
You can expect new solutions and features in future releases of Firefox. Developer Tools in Firefox 11 can show a page as 3D tag stacks. With each new tag insertion, the stack gets higher. This property is surprisingly useful because you can tell at a glance whether an element is inside an erroneous parent element. Being able to see how tags stack on top of each other will free new developers from many of the hassles associated with block-level elements.
Firefox 11 will also have a style editor. With this editor you can create new style sheets. This editor differs from text editors in that changes are applied instantly as soon as you finish typing.
It's nice to see that CSS editing can be done directly through the browser, rather than having to resort to programs like Espresso. New features expected to be released this year include "a tool to help with application performance issues."
Despite everything said about Firefox 11, comparing firefox11's dev tools with Firebug (or WebKit's dev tools) is like comparing iOS with Android. Thus, the firefox 11 toolkit has a simple, intuitive interface, it implements interesting innovative ideas, but the number of functions tailored for a professional is extremely small.
For example, firebug has all the functions you can think of, it can be configured as soon as you want, and there is no need to talk about simplicity and intuitiveness. However, unlike iOS and Android data tools can be used simultaneously. It's important to remember that Mozilla continues to support Firebug and has announced that it has a long life ahead of it.
Which tool is right for you? It depends on what features you need and don't need, and how you approach your search additional extensions for the instrument of your choice. No matter how you feel about developer tools, this is an area where it's hard to accuse Firefox of copying WebKit.
For lately Mozilla has had several significant events. 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 Internet Explorer with 95% market share. Secondly, in the 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 existing channel development of Firefox Aurora, and it will include innovations 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. New browser uses a separate user profile, which allows you to run it simultaneously with regular Firefox.
Fresh design
The updated interface speeds up access to developer tools and uses the new dark theme registration But you can also switch to classic or install any third party topic and expansion. The changes also affected appearance settings windows.
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.
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, emphasis and the root cause of the appearance of 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 applications OS directly in your browser or on your 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 with various devices(e.g. Chrome for 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 only experience 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 that. Even on their landing page it says “It’s everything you’re used to, only better.” But I absolutely agree with this statement.
- Translation
Historically, Firefox has been widely popular among web developers due to its extensibility through the connection of various plugins and add-ons written by third party developers. The idea of isolating functionality into extensions made it possible to solve a lot of various problems directly in the browser, without resorting to external tools.
Of course, in this list you will definitely find already familiar extensions, but a huge layer useful extensions always stays away. So get ready to install a couple more extensions! :)
Built-in development tools in Firefox
Before starting the list, it would be wrong not to mention the tools already built into Firefox. Here we are talking about the same development tools in Firefox Aurora 10 and the functionality that can be found in any modern browser today.When developing the interface of these tools, many approaches and solutions were tried. The result is a pretty nice interface that anyone can try out if they install Firefox Aurora (hmm, haven't you installed it yet?)
Well, under the cut you will find a huge list of extensions that will definitely be useful for any web developer.
Firebug
This extension is zero in the list of extensions. Firebug has set the standard in development tools across all browsers. Typically used for live CSS editing and HTML, JavaScript debugging and page loading optimization. Some of the extensions mentioned below are based on Firebug, so we'll come back to that extension later.Just in case, I remind you that Firebug is quite demanding on memory, so do not forget to disable it (or simply not enable it) on those sites that you do not work with.