Nearly every browser has an integrated suite of developer tools that can help debug and develop websites, but Firefox has been lacking in that area by default. Firefox didn’t need an integrated suite of web development and debugging tools since it was quite extensible, and had a powerful add-on for all who needed development tools, FireBug. FireBug is still available, and popular, and continues to be developed for each new Firefox release. But if you were always excited to learn about how the web works, now Firefox will put the tools straight in your hands.
So why does Firefox need its own set of developer tools? The intention of Firefox developers is to have a better alternative to traditional developer tools such as FireBug, Opera Dragonfly, and other similar developer tools available in other browsers. While these tools are quite powerful and useful, they can be heavy and try to offer all features, from editing the styles, to editing the HTML, the console, etc. all in the same interface under different tabs.
The way Mozilla developers are approaching the integration of developer tools in the browser is to have each aspect of web development as its own separate tool, focussed on one job. Instead of a new FireBug-like panel that tries to do it all, Firefox’s new developer features divide the task among multiple components. After all HTML, CSS and JavaScript are distinct languages with very different syntax. A tool optimized for one will not work well with the other, and Firefox developers are thus trying to make a separate tool to edit each type of content. So if you are a designer and want to just play with the CSS of the page without bothering with the other stuff, now you can do that.
Some of these components have been in development for a long time, and have already landed in previous versions of Firefox, while some are still to come. Firefox 10, 11 and beyond will bring a number of exciting tools, but before we talk about them, lets look at the features already available.
This feature has been available since Firefox 4, and has received incremental improvements since then. The web console offers a way to inspect the opened web page via a command line interface, and to run small operations on the contents of the page. It also displays any debugging messages, errors, and other useful information such as network activity. Each log entry can be clicked to reveal more information.
Major updates to the console lie ahead.
Click next to learn more about the scratchpad
The console is not enough to test large amounts of code. To get rid of edit, save reload cycles, Firefox added a new Scratchpad feature which works as a prototyping tool for JavaScript.
It offers a simple text editing interface where one can enter JavaScript and execute it on the currently active page. One can then save these files to disc. One can load previously saves JavaScript files into Scratchpad as well. So it serves not only as a tool for running small scripts on existing pages, for proper hacking and developing web applications.
With a small preference change, Scratchpad can run code in the context of Firefox chrome. This gives the coder nearly unlimited control over Firefox itself, since nearly all its core functionalities are accessible and controllable via JavaScript. This can be particularly useful for Firefox Add-on creators.
To make testing code easier, the Scratchpad lets you select what part of the code to run. You can enter large amounts of code in Scratchpad, and test it in small batches by simply selecting the part of the code you wish to run, right-clicking and selecting Run (or pressing Ctrl R). This way you can enter different versions of the code in the same Scratchpad, and run them one by one to see which works best. You can also quickly run the same code against different web pages, just change the active browser tab, and run the code!
Additionally, you can chose to inspect the result of your code, which will open up the object inspector on the result object; or you can choose the “Display” command to display the result of the evaluation. Just enter “43.11 (11 -3)*8” and run the display command and it will append the result of that equation to the Scratchpad as a comment.
Scratchpad will soon add a syntax highlighter to make it even simpler to code with; and it will even append any errors messages as comments in the code.
Some of the best developer features lie ahead. Some such as the Page Inspector and Style Inspector, and syntax highlighting for the Scratchpad are coming soon, while others, such as the Style Editor and Tilt, are still a little way off. With Firefox’s rapid release cycle though, they can all be in your hands right now, in the Beta, Aurora or Nightly channels.
Turn to the next page to learn more about what’s coming next to Firefox.
All browser development tools and FireBug include a feature that lets you inspect a part of the page, and see not just the source of the original page, but what it looks like to the browser and how it has changed by JavaScript and the browser after being loaded.
Such a Page inspector has actually been available since Firefox 4 but was disabled since it was in a raw form. It is a separate tool on its own, with a unique UI. Inspecting a part of the page is as simple as right clicking it and selecting Inspect Element. This darkens the rest of the page while keeping the highlight on the selected element. At the bottom of the page you can see a breadcrumb bar that displays the hierarchy of elements that lead to the selected element. You can click any of them to change the focus. Or you can right click any element to see its siblings.
On the same bar with the breadcrumbs, you have a button for viewing the HTML code of the page, the Styles, or 3D. The Styles and 3D view we will come to later.
Clicking on the HTML button expands the bottom bar into a panel that lets you traverse the hierarchy of the HTML code on the page. You can change the highlighted element by clicking on any element in the HTML tree. Currently the functionalities of this HTML view are rather limited. It doesn’t let you edit the code, just some attributes, or even copy it. Those features will come too though.
When the above page inspector is open, you can click on the Style button to inspect the CSS code of the page and edit it. The Style Inspector panel contains a Rules view and a Properties view.
The rules view is the familiar CSS view that most inspection tools have. It displays all the styles applied to an element as they are entered in the stylesheet. It also displays which stylesheet a particular style is coming from and overridden styles are shown struck out. Individual styles can be toggled on or off with a checkbox, or edited inline. New properties can even be added for selectors.
The Properties view on the other hand seems to be unique to Firefox, and displays a list of individual CSS properties that make up an elements style regardless of where they come from. It will show only one entry for background-color even if the CSS background-color property has been applied multiple times. The value shown next to it is the final value applied. The element can be expanded though to reveal the different stylesheets that try to style the same element but are overridden. One of the best features though is that each CSS property here is linked to Mozilla’s documentation about that property in their MDN Wiki. This makes it easy for developers to find out what a particular property does if they are not immediately familiar with it; especially useful for beginning web developers.
Web design in 3D in Firefox, and the Style Editor on the next page.
Tilt is possibly one of the most unique web development tools available. In the same breadcrumb bar we that has the HTML and CSS inspection tools, there is a button for 3D. This is Tilt, or more accurately was Tilt when it was available as an add-on. Now that it is integrated it will just be 3D.
The 3D view does what it says, it take whichever page you are viewing, and renders it in 3D right within the browser, using WebGL!
3D isn’t just a gimmick here, but can actually be useful in evaluating the code of a website. The 3D representation of the page renders each child element as a layer over the parent plane, showing a 3D map of how “deep” your code is. Each level of nesting leads to an increase in “height” of the rendering, thus letting your find extreme cases of nesting easily.
All three, Style, HTML and 3D inspectors are available in the same bar, and can be turned on at the same time.
The Style editor is yet another useful addition to Firefox’s set of developer tools.
As its name suggests, it is an editor for stylesheets; CSS files. It is the equivalent of the Scratchpad HTML editor, but it is optimised for CSS.
Since stylesheets apply over each other, it shows a layered view of sorts of all the stylesheets included in the document including inline ones. Each individual stylesheet has a small “eye” icon to turn it off, just like you would turn off a layer in an image editor. This can be incredibly useful if you load up two different stylesheets that apply different themes to the site, and switch between them to see how they work.
Like Scratchpad, you can add a new stylesheet and edit it right there, or import one you already have on your hard drive. You can also save any of the attached stylesheets. You can add multiple stylesheets, you are not limited to one.
The best thing about the Style Editor though, is that any changes you apply to the current document are applied in real time without needing any page refreshes! Just start typing your code and see the changes apply to the page as soon as the code you have entered is valid. Syntax highlighting is present here as well, so you will know when the code you have entered it is valid; best of all it is working in front of you so you can be sure it is valid and correct.
Click next for the conslusion.
There are a number of other developer-centric features, and changes coming in the next few Firefox versions.
A personal favourite feature of mine would be the highlighting of errors when you view the source of any web page. If you view the source a page that has errors in syntax, they will be highlighted in red, and what’s more hovering over these lines will how a tooltip that describes the error. Another minor change to the source viewer is the addition of line numbers.
A major new feature coming to Firefox is the GCLI or Graphical Command Line Interface. It can already be experienced integrated in the web console of the current Firefox Nightlies.
Other features are in discussion and perhaps further from becoming reality, such as:
All these features combined make Firefox a powerful web development tool indeed. The approach Mozilla is taking, in separating the different contexts of web development into separate tools instead of one mega panel is a unique approach among browsers.
While WYSIWYG tools are popular among beginners, the first tool any web developer uses is the web browser, and if that can offer a compelling web development platform, they might not need to pick another. After all what better tool to create websites than the one which is going to display them.