Development

Mozilla releases a "Developer browser"

Mozilla surprised many people—and mystified a few—when it teased the upcoming release of what it called "the first browser dedicated to developers" in the first week of November. The browser in question was revealed on November 10. The Firefox Developer Edition, as it is known, is a modified build of Firefox that integrates a suite of existing web development, testing, and debugging tools. Some of these tools are available separately as Firefox extensions, but others are new, and the overall experience offers benefits for HTML app developers as well as for site maintainers.

Although the fact was glossed over in the announcement, Firefox Developer Edition (DE) is a replacement for the Firefox "Aurora" channel, which was the unstable, pre-release channel of Firefox—better tested than nightly builds, but less stable than the Beta channel. Binary builds of Firefox DE are available for download in 32-bit and 64-bit versions, for the usual assortment of operating systems and localizations.

The first thing one notices about Firefox DE is that sports a different visual theme: dark colors, a modified Firefox logo, and flat user-interface elements on the buttons and tabs. In addition, the main toolbar is pre-populated with buttons for accessing the various development tools. But it is the tools themselves, of course, that make the new browser interesting.

App development

The first tool is WebIDE, which is a development environment for packaged web apps. Web IDE was initially developed for use with Firefox OS apps: it includes a Firefox OS emulator in which one can run an HTML5 app, plus tools for editing and debugging the app, monitoring events, inspecting errors, and so on.

As a standalone tool, WebIDE is certainly a handy addition to everyone building web apps for Firefox OS. Mozilla even provides emulators for multiple Firefox OS builds that can be installed from within WebIDE with a single click. But, of course, that platform is not yet a particularly large market (although good tools can only help advance the cause). This is where the second major tool comes in, though.

Valence is an extension for running and debugging HTML apps using other browser engines instead of Firefox's Gecko—and, thus, platforms other than Firefox OS. The main targets are Android and iOS. Valence can run a web app in Chrome on Android device that is attached to the PC by USB. It can also run a web app in Apple's Safari on an iOS device by going through a local proxying program developed by Google. And, despite the focus on mobile platforms, Valence can also launch apps in the desktop version of Chrome.

To make use of the Android and desktop Chrome features, users must install Chrome (version 37 or later) and have USB debugging enabled on their Android device. Linux users must, for the time being, install the iOS proxy separately as well. The iOS proxy comes packaged with the current Mac version of Firefox DE, and the documentation suggests that it may come pre-packaged with future Linux releases, too.

Valence was actually launched (under the name "Firefox Tools Adapter") in September. It cannot, however, be downloaded from the normal Firefox Add-ons site, although standalone builds can be installed manually in Firefox nightly releases.

Together, WebIDE and Valence make a handy duo for anyone debugging packaged web apps for mobile devices—as well as for anyone simply interested in dissecting an existing web app. Using one of the Firefox OS emulators is certainly the fastest way to get started. Otherwise, one needs a valid web-app package somewhere on the local system to load up in WebIDE—and there are not many out there to choose from. Mozilla's App Marketplace includes packaged web apps for desktop systems as well, although one has to search for them. Alternatively, one can start a new, blank app project from within WebIDE, although there will naturally be less to explore.

Other tools

But mobile app development is not the only use for Firefox DE. An assortment of other tools are also installed that are useful for working with any web project: Responsive Design View, Page Inspector, Web Console, JavaScript Debugger, Network Monitor, a CSS Style Editor, Web Audio Editor.

Of these tools, the Page Inspector, Web Console, Style Editor, and JavaScript Debugger have been around for quite a while, and are probably even familiar to non-developers who have tried to figure out why a particular page is breaking for no discernible reason. They allow the user to inspect a page's Document Object Model (DOM), tweak its CSS rules and JavaScript, and even execute JavaScript statements at the command line.

The newer additions simply expand this poke-around-and-tweak functionality to additional areas. Responsive Design View is a tool for rapidly testing how a design responds to different window sizes, orientations, and touch events. It is meant to test the "responsive design" features of a page which are expected to adapt and re-flow content to fit handhelds, widescreen formats, and other device types using the same code.

Network Monitor is more straightforward; it simply logs all network requests and responses made in a browsing session. Users can see the status code, size, transfer time, and latency of each request and, hopefully, debug traffic problems.

The Web Audio Editor is, like the name suggests, a tool for debugging media that is handled through the W3C's Web Audio API. The Web Audio API, notably, is not part of multimedia plugins like Flash; it is a JavaScript API for playing and transforming audio content, and the manipulations (such as mixing sources or applying filter effects) are complex enough that debugging can be required.

There are also plenty of smaller tools built into Firefox DE as well, such as an eyedropper tool for sampling colors, a JavaScript scratchpad for running and testing JavaScript snippets (without affecting the current page), and even a built-in text chat client. The tools are easy to access—most of them are found in the menu with the wrench icon; WebIDE is a separate menu, while Valence is used within WebIDE. Likewise, the built-in help for the tools and the online documentation are easy to find and thorough.

Thus far, the response from app developers and site maintainers seems to be quite positive, with just a few quibbles. For one, several noted that installing the Developer Edition would overwrite a user's existing Firefox Aurora profile—which can, understandably, come as an unwelcome surprise.

In reality, though, that is not quite what happens. Running the Firefox DE for the first time creates a fresh profile for the user, but it also marks that profile as the default. For users running regular Firefox builds, this does not cause a conflict (because the DE profile directory is named differently) but, because Firefox DE replaces Aurora, the new profile might appear to replace any existing Aurora profile. There is a preference setting to correct for this issue, though: users must check the "Allow Firefox Developer Edition and Firefox to run at the same time" box.

Some users have also reported problems when installing other add-ons in the Developer Edition. The usual caveats about installing extensions probably apply, but Mozilla confuses matters slightly by offering a "Get More Tools" link in Firefox DE's Tools menu. The link takes users to a Mozilla-curated add-on collection of various web-development extensions—the first of which is Firebug, one of the add-ons found to be problematic.

All in all, Firefox DE offers a solid development experience. No doubt it benefits from several years of history with many of the included development tools, but this is still an offering that web developers need, so it is nice to see Mozilla making the effort. There are even unstable builds available of a Firefox DE for Android, suggesting that Mozilla is still hard at work. Firefox DE is, at this point, more fully fleshed out than the corresponding Chrome developer tools, although seeing increased competition from the Chrome camp seems like a safe bet.

Comments (1 posted)

Quotes of the week

    -----BEGIN PGP MESSAGE-----
    Version: GnuPG v1

    jA0EAwMCkXJkPBb32zJgyShJsdQhr1vklwPIrtLKP4BE8cS7yv3aVcNWvwwb1n46
    mw89z3XmaGLq
    =79kG
    -----END PGP MESSAGE-----

Comments (44 posted)

notmuch 0.19 available

Version 0.19 of the notmuch email client has been released. This update "improves the reliability of `notmuch dump` and the error handling for `notmuch insert`. The new `notmuch address` command is intended to make searching for email addresses more convenient. At the library level the revised handling of missing messages fixes at least one bug in threading. The release also includes several interface improvements to the emacs interface, most notably the ability to bind keyboard shortcuts to saved searches."

Full Story (comments: none)

LedgerSMB 1.4.7 released

LedgerSMB 1.4.7 has been released. New are the ability to store templates that are formatted differently for different languages, a client-side validation function on contact forms, and fixes to display issues in the Income Statement.

Full Story (comments: none)

Development newsletters from the past week

• What's cooking in git.git (November 13)
• GNU Toolchain Update (November 17)
• LLVM Weekly (November 17)
• OCaml Weekly News (November 18)
• OpenStack Community Weekly Newsletter (November 14)
• Perl Weekly (November 17)
• PostgreSQL Weekly News (November 17)
• Python Weekly (November 13)
• Ruby Weekly (November 13)
• This Week in Rust (November 17)
• Tor Weekly News (November 19)
• Wikimedia Tech News (November 17)

Comments (none posted)

VP8 and H.264 to both become mandatory for WebRTC

At his blog, Andreas Gal notes that the IETF's WebRTC Working Group has finally reached a decision about the inclusion of mandatory-to-implement video codecs: both the royalty-free VP8 and the royalty-bearing H.264 will be mandatory—at least for most devices.

Comments (2 posted)