A Closer Look at Mozilla Firefox Developer Edition

  •  9 Comments

Just in time for Mozilla’s 10th anniversary of Firefox, comes a series of new projects such as Polaris, Interest Dashboard and the one that’s been talked about for quite some time – Firefox Developer Edition.

Although there are a lot of developer tool add-ons that can be integrated in the existing Mozilla Firefox browser, this new version of Firefox is design specifically for web developers.

This means most of the tools that you will see in this version of Firefox are web development related tools which come with a series of built-in applications for different development purposes to speed up the developer’s workflow.

With Firefox Developer Edition, you don’t need to install tools or plug-ins to debug apps for desktop or mobile devices. Everything is already set up so that you can focus on development.

What’s Inside?

The Theme

If you’ve used previous versions of Mozilla Firefox, you’ll be disappointed if you were expecting a brand new design. Once you have launched Mozilla Firefox Developer Edition, you’ll notice a new dark theme with square tabs instead of curved ones which are similar to the old version. That’s being said, this version gives you quicker access to developer tools

Default Tools

When you launch Mozilla Firefox Developer Edition for the first time, you’ll notice that there are six available tools (aside from the settings menu) by default:

  1. Web Developer Tools – Contains developer tools
  2. Bookmark/Show your Bookmark – Allows you to add, edit, delete or show bookmarks
  3. Download Manager – Contains all download information
  4. Firefox Developer Edition Start Page – Displays the start-up page of Mozilla Firefox with Google as the default search engine
  5. Start a conversation – Simple messenger for Mozilla Firefox account
  6. Open WebIDE – Offers a built-in editor for working with Firefox OS apps in simulators or Firefox OS devices as well as Firefox for android

Settings/Open Menu

Firefox Developer Edition

The settings menu offers basic functions which are also available in the previous versions of Firefox. The following are setting options you can see from the menu:

  • Cut – Allows users to cut text
  • Copy – Allows users to copy text
  • Paste – Allows users to paste text
  • New Window – Allows users to open a new window
  • New Private Window – Allows users to open a new private/secured window
  • Save Page – Allows users to save the webpage in HTML format
  • Print – Allows users to print web pages
  • History – Contains browsing information
  • Full Screen – Allows users to put the browser in full-screen mode
  • Find – Allows users to search by keyword on a web page
  • Options – Allows users to create a different profile out of the box without affecting an existing profile on ordinary Firefox
  • Add-ons – Contains all add-ons information
  • Sync – Allows users to store Firefox data to Mozilla servers
  • Customize – Allows users to switch from the standard Firefox theme, and has additional tools and features such as open file, sidebars, share this page, subscribe, character encoding, email link, apps, forget and sync

Web Developer Tools

Firefox Developer Edition consists of all common tools for web development process.

Responsive Design View

Responsive Design View is a new feature that lets you resize your screen to check the look of your site on different viewports. See the video below to see how it works.

Page Inspector

This feature helps you see HTML and CSS that was used on web pages to easily customize the structure or format of a page. See tutorial video below.

Web Console

One great thing about JavaScript is that it allows you to interact with the browser. This feature of Firefox Developer Edition allows you to see logged information associated with the web page you are working on and interact with the browser. Check out the video below to see how it works.

JavaScript Debugger

This feature of Firefox Developer Edition will help you check JavaScript code and carefully inspect, test or customize the state of code for easy debugging. See video below.

Network Monitor

Another great feature of the new Mozilla browser is functionality to see network request information in-browser. This feature will definitely help you track down the details of each request. Check out the video below on how it works.

Style Editor

The stylesheet of a site has a great role on overall design. That’s why this feature of Firefox Developer Edition is helpful in viewing and editing CSS. You can add a new stylesheet and apply it to web pages. See instructional video below.

Web Audio Editor

If you are developing HTML5 games using web audio, this feature will help you in visualizing or customizing audio nodes within the web AudioContext. Check out the video below to see how it works.

New Features

Firefox Developer Edition has two powerful new features: Valence and WebIDE. These features will definitely help you speed up development process as well as help to easily debug code.

Valence

This is the Firefox Tools Adapter which is an available add-on tool previously on the older versions. This allows you create and debug apps on different platforms and devices by connecting to Firefox dev tools. This feature supports multiple browsers across mobile OS. For more information, check out the video below.

WebIDE

Another great feature is the WebIDE. With this tool you can create, edit or debug apps using the built-in browser editor or on a Firefox OS device. This feature allows you to access files, make changes and run them in a simulator available inside this tool. See video below.

Additional Features

Aside from these two new features inside Firefox Developer Edition, there are also another two new features that will surely help you to have a safe browsing experience.

DuckDuckGo

DuckDuckGo

This is the standard search option, along with other search engines. It was included on this version as a Mozilla’s complement to its private browsing pitch to users by not tracking the user’s search queries as well IP addresses.

Forget

Forget

Another helpful private browsing mode feature is the forget button. It lets the user control recent history and cookies within the last 5 minutes, 2 hours or 24 hours of browsing activity. As of the moment, there are no custom options to change the duration of time you prefer for the browser to forget browsing information.

Mozilla Firefox Developer Edition vs. Google Chrome Developer Tools

Now that Mozilla has released a web developer dedicated browser, there will be some argument on which is the best developer tool to use. Although Chrome DevTools has been on the web since 2009, it serves its purpose well. It’s safe to say that Chrome DevTools is still the best to use and is faster and more stable than Firefox Developer Edition.

In some cases, Mozilla has done a great job building a browser dedicated to the web development community. While a lot of developers might say that it doesn’t have all what they need yet, the advantage is still on Firefox since it is a open-source product. Being an independent proprietary browser, there’s a lot of space for improvement.

Wrapping Up

Mozilla Firefox Developer Edition is a great experimental tool for web developers who are trying to improve workflow. If you’ve used Firefox’s Aurora, a pre-Beta build of Firefox, note that it became the Firefox Developer Edition in the release.

There might be more improvement in the future, but this is a good start for a better web development experience. You can download the new version directly on Firefox’s official website.

Have you used this new version yet? If so how do you feel about it? Share your experiences and thoughts in the comment section!

Newsletter

9 Comments
  1. Kimberly Nov 17, 9:53 am

    Thanks for a great post. Although Mozilla Firefox Developer Edition is a great tool for developers still it doesn’t yet reach on that level of Chrome DevTools. Hoping for more new features in the future updates/release.

    Reply
    0
  2. JDC Nov 17, 11:23 am

    Great article. What I love with this new version of Mozilla is that it will not track my search queries. The Valence feature will help a lot in developer’s workflow however for functionality wise Chrome is still the best right now. :)

    Reply
    0
  3. Stefan Nov 17, 1:35 pm

    The new Firefox Developer Edition is great! But.. it is not stable yet and has a lot of bugs. Every day there is a new update, they really work on fixing it and make it working fine, but as I said I tried several times to work in in, but because lot of bugs I returned always to Chrome.
    I hope soon there will be a stable version.

    Reply
    0
  4. noveland Nov 17, 6:46 pm

    This is actually a good start for Firefox. A lot of developers are looking for a better browser which contains “ALL” of their needs. Though I’ll go for Chrome for now until then hoping for more updates on this version of Firefox. Thanks for the information

    Reply
    0
  5. Otis Chua Nov 18, 6:55 am

    I am currently using the latest Mozilla and I can say that its truly improved and developed. But for me, for now nothing beats the fast tool of Chrome.. Keep up Mozilla Firefox, I’ll look forward for their new updates.

    Reply
    0
  6. Mick Kennys Nov 18, 8:16 pm

    Not using Mozilla for long period of time, but now it seems that I have to take a closer look on it one more time.

    TY for the info :)

    Reply
    0
  7. Mick Nov 19, 2:58 am

    I’m loving Firefox Developer Edition.
    I’ve been a long-time user of firebug but it has been getting a bit long in the tooth in terms of pre-processors. I’ve tried to make the switch to Chrome for development but I found it far too frustrating, especially when testing and modifying CSS. FF Dev has been perfect for me so far.

    Once Firebug makes the switch to their integrated v3 I think my tool-set will be complete.

    Reply
    0
  8. web4me Nov 19, 3:13 pm

    Glad to read.. nice job Sam, I am not using Mozilla but after check out and read out, i realize that i should use Mozilla. Is any language does effect on processing speed on the search engine? Please notify me ASAP.

    Reply
    0
  9. Lobo Nov 27, 8:22 pm

    As nice as it is I’m surprised they they still didn’t fix major bug in network monitor. It show for uncompressed resources (like images and flash) sth around 130% of their actual size. Why nobody knows and bug is there for years now.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!