How do I install the Firefox Developer Edition?

Firefox Developer Edition

The Firefox Developer Edition is a modified version of Firefox, specifically designed for web developers. It uses a separate profile than the regular version of Firefox. Meaning you can have both Firefox or F-beta, installed next to the developer edition. Note that your F.D.E. will be a completely UN-customized browser. To unify settings, you can use Firefox sync.

Here's one of many perks when using F.D.E:

"By using the Developer Edition, you gain access to tools and platform features at least 12 weeks before they reach the main Firefox release channel." - Developer Edition - Mozilla | MDN#The_latest_Firefox_features

Installation

There are currently three ways to do this, manually, PPA or via Ubuntu Make.

Manually

Download from Mozilla Firefox Developer Edition webpage. Extract it with file-roller and move the folder to its final location. A good practice is to install it in /opt/ or /usr/local/.

Once you moved the files to their final location (say /opt/firefox_dev/), you can create the following file ~/.local/share/applications/firefox_dev.desktop to get a launcher with an icon distinct from normal Firefox.

[Desktop Entry]
Name=Firefox Developer 
GenericName=Firefox Developer Edition
Exec=/opt/firefox_dev/firefox %u
Terminal=false
Icon=/opt/firefox_dev/browser/chrome/icons/default/default128.png
Type=Application
Categories=Application;Network;X-Developer;
Comment=Firefox Developer Edition Web Browser.
StartupWMClass=Firefox Developer Edition

Please note, that the parameter StartupWMClass is added to prevent duplicate icons in the launcher, as explained here.

To mark the launcher as trusted, make it executable:

chmod +x ~/.local/share/applications/firefox_dev.desktop

To launch it, navigate to ~/.local/share/applications/ using your "Files" application (ensure you turn on hidden folders), then double-click firefox_dev.desktop. Alternatively, search for Firefox Developer, and simply run the firefox binary, and voilà.

Note that, when you install manually, the F.D.E. does not have the unity global menu by default.

PPA

Firefox for developers currently resides in Firefox Aurora builds : “Ubuntu Mozilla Daily Build Team” team. It should be noted that:

"Firefox Developer Edition replaces the Aurora channel in the Firefox Release Process. Like Aurora, features will land in the Developer Edition every six weeks, after they have stabilized in Nightly builds." - Developer Edition - Mozilla | MDN #The_latest_Firefox_features

Also:

"Version 35.0a2, first offered to Firefox Developer Edition users on November 10, 2014" - Firefox — Aurora Notes (35.0a2) — Mozilla#main-content

Install the Firefox Developer Edition, formerly know as Aurora, like so:

sudo add-apt-repository ppa:ubuntu-mozilla-daily/firefox-aurora
sudo apt-get update
sudo apt-get install firefox

The Mozilla PPA only holds packages for the supported Ubuntu releases, not EOL(End Of Life) releases.

Note that installing with the aforementioned ppa, will result in your current Firefox installation being replaced!

Ubuntu Make

This method has been provided by Jorge Castro. I am adding this here, because it's also an excellent way to install the Firefox Developer Edition(and many others dev tools).

sudo add-apt-repository ppa:lyzardking/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make

After you have installed ubuntu-make, tell it to install the web tool firefox-dev.

umake web firefox-dev

Uninstall

If you wish to keep the Current default Firefox, because The FDE has no new features you like, or for whatever reason, here are a few ways to uninstall it.

PPA

You can remove the ppa, and its packages, using ppa-purge.

Install it like so:

sudo apt-get install ppa-purge

The following will remove the PPA, and its packages:

sudo ppa-purge ppa:ubuntu-mozilla-daily/firefox-aurora

Manually

remove the binaries with the rm command(rename the path to the location you actually extracted FDE). Or with your file-manager:

sudo rm -r /opt/firefox_dev/

Also remove the firefox_dev.desktop

sudo rm ~/.local/share/applications/firefox_dev.desktop

After that you have successfully removed the Firefox Developer Edition.

Ubuntu Make

the following command will remove Firefox Developer Edition:

umake web firefox-dev -r

You can also remove umake and its PPA (ppa-purge needed, see installation instructions above):

sudo ppa-purge ppa:lyzardking/ubuntu-make

Screenshot

enter image description here Firefox Developer Edition on Ubuntu 14.04.1

Change Theme

At the time of writing, there are three themes available for F.D.E. Here is how to enable them.

Type in the url bar:

about:config

When in the search filter type in theme. Then double click on devtools.theme. After that, type in light, and the theme will be applied.

Multiple FDE themes

Screenshot with multiple themes available for F.D.E.

Features

Some - but not all - features touted by Mozilla:

  • WebIDE:

    • allows you to develop, deploy and debug Web apps directly in your browser, or on a Firefox OS device. It lets you create a new Firefox OS app (which is just a web app) from a template, or open up the code of an existing app. From there you can edit the app’s files. It’s one click to run the app in a simulator and one more to debug it with the developer tools.

    • Web IDE - YouTube

  • Valence:

    • (previously called Firefox Tools Adapter) lets you develop and debug your app across multiple browsers and devices by connecting the Firefox dev tools to other major browser engines. Valence also extends the awesome tools we’ve built to debug Firefox OS and Firefox for Android to the other major mobile browsers including Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console and Style Editor.

    • Valence - YouTube

  • Responsive Design Mode:

    • see how your website or Web app will look on different screen sizes without changing the size of your browser window.

  • Page Inspector:

    • examine the HTML and CSS of any Web page and easily modify the structure and layout of a page.

  • Web Console:

    • see logged information associated with a Web page and use Web Console and interact with a Web page using JavaScript.

  • JavaScript Debugger:

    • step through JavaScript code and examine or modify its state to help track down bugs.

  • Network Monitor:

    • see all the network requests your browser makes, how long each request takes and details of each request.

  • Style Editor:

    • view and edit CSS styles associated with a Web page, create new ones and apply existing CSS stylesheets to any page.

  • Web Audio Editor:

    • inspect and interact with Web Audio API in real time to ensure that all audio nodes are connected in the way you expect.

Reference:

  • Mozilla Introduces the First Browser Built For Developers: Firefox Developer Edition ✩ Mozilla Hacks – the Web developer blog

  • Firefox — Aurora Notes (35.0a2) — Mozilla(Firefox Developer Edition Notes)

    • Version 35.0a2, first offered to Firefox Developer Edition users on November 10, 2014

  • Firefox Developer Edition — Mozilla

  • Firefox Aurora builds : “Ubuntu Mozilla Daily Build Team” team

  • Developer Edition - Mozilla | MDN


The Firefox Developer Edition is available as part of Ubuntu Make:

sudo add-apt-repository ppa:lyzardking/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make

After that just run the Firefox installer as your user (don't use sudo in this case):

umake web firefox-dev

It will prompt you where to install Firefox, and then download it automatically and install it.

If you are using ubuntu (unity), in the launcher, a new icon Firefox Developer Edition has been pinned. Click on it to launch your freshly installed Firefox Developer Edition.

Firefox Developer Edition will prompt itself for auto-updates (will not use apt).


sudo apt-get install gnome-panel 
sudo mv /from_where_it_is to /opt/firefox_dev/
sudo chown -R $(whoami):$(whoami) /opt/firefox_dev/
gnome-desktop-item-edit ~/.local/share/applications --create-new

than just search it in unity

Tags:

Firefox

Recent Posts