Web
Article

What’s New in Firefox 33

By Elio Qoshi

Almost six weeks after version 32, Mozilla’s Firefox is back again with a new update. You can grab the new update by either waiting for the auto-update, choosing About Firefox from the menu, or downloading the new installer manually from Firefox.com.

We’ve checked out the new features for end users and developers, who are all in for some treats in v33. Let’s have a look.

WebIDE

If you’ve played around with the Firefox developer tools or Firefox OS apps before, you’ve probably have had a look at WebIDE when it was still in Alpha stage or earlier (Nightly). WebIDE replaces the Firefox OS App Manager, including some additional deployment and debugging tools. It now features a code editor based on CodeMirror and the tern.js framework.

WebIDE

Applications can be deployed on a real Firefox OS device across USB or WiFi, or on a simulator. Even easier for developers, WebIDE now provides boilerplate code based on various templates. It currently has support for Firefox OS 1.3, 1.4, and 2.0.

As mentioned in the Mozilla Hacks blog post:

You can use a simple API which allows external editors to access all the advanced functionality of the tool – its runtime management, pushing applications to different devices and connecting Firefox Developer Tools. You can turn off our internal editor and leave WebIDE with a simple, clean interface for managing runtimes and validating applications. We want to make it easy for users of any code editor to sling their code around to various devices.

Firefox 33 is the first stable version which includes the option to turn on WebIDE, so if you haven’t checked it out yet, you definitely should now.

Note: You can enable WebIDE in Firefox 33 by changing a preference: Visit about:config, find the preference called devtools.webide.enabled and set it to true.

Event Listener Popup

Various new features have found their way into Firefox 33. One of them is the event listener popup. Any node with a JavaScript event listener attached to it will now have an ev icon next to it in the Inspector. Clicking the icon will open a list of all the event listeners attached to that element. The Debugger’s ‘pause’ icon also leads to the popup, where you can debug the element further yourself.

Event Listeners Popup

@media sidebar

A new sidebar has been added to the Style Editor. The @media sidebar displays a list of shortcuts to every @media rule in the stylesheet (or Sass source) currently being edited. This works well, especially when paired with the Responsive Design View (Opt+Cmd+M / Ctrl+Shift+M).

@media Sidebar

Edit keyframes

With the new version, any @keyframes rules associated with the currently selected element are now displayed in the Rules section of the Inspector, and are also editable. This is a great addition when inspecting and debugging CSS animations, as it makes the whole process much more efficient.

Edit Keyframes

Cubic bezier editor

Cubic Bezier Editor

Highly useful in the creation and editing of easing animations, a cubic bezier editor for CSS animations is available for all CSS tinkerers now. It can be accessed by the icon next to an animation timing function in a CSS rule.

Other changes in developer tools:

  • Add new rule
  • Transform highlighter
  • Persistent disable cache
  • New Commands
  • Editor preferences
  • Edit selectors
  • Black-boxed minified sources
  • Custom viewport dimensions

Site compatibility changes

As with so many releases, minor site compatibility changes are also included. You can find them in this handy guide on Mozilla Developer Network

.

End user features

  • OpenH264 support (sandboxed)
  • Slimmer and faster JavaScript strings
  • Improved reliability of the session restoration
  • Connect to HTTP proxy over HTTPS
  • New CSP (Content Security Policy) backend
  • Improved search experience through the location bar
  • Search suggestions on the Firefox Start Page (about:home)
  • Azerbaijani [az] locale added

Apart from some further WebRTC experimentation, an improved search experience and enhanced tiles, Firefox 33 has no major additional features which would interest the average Joe.

A hard-working fox

With its 10th anniversary approaching, Firefox is styling itself as a proper hub for web developers, with more and more open-source tools available, while still serving end users loyally.

The WebIDE and WebRTC features are especially exciting. If done right, they could give Firefox a much-needed push to set itself apart.

You can find the official release notes here and the new changes for developers here.

What do you think of the new additions? Are you looking forward to trying them? Let us know in the comments!

More:
  • http://nyasro.com/ Nyasro

    Thanks for this information. I am happy that FF added event listener popup and @media sidebar which helps to make website responsive and fix the related issues easily.

  • M S

    Seems impossible to get multi-row bookmarks now, beyond 2 rows.
    So i went back to 32.

    • Elio Qoshi

      Do you mean the bookmark toolbar?

    • mbokil

      There is no multi-row bookmark in Firefox. I have been using it since it was originally call Phoenix. Now there is an extension for that but that is not a built in feature and you have to install it. Version 33 is great. Nice and fast. The event popup for developers is very cool in the inspector.

      • M S i N Lund

        And?

        There are several ways to get multi-row bookmark in Firefox., by editing settings, installing addons, etc.

        None of those now seems to work.

        Flexibility like this is why i use it.
        I wouldn’t be caught dead using FF, as it is out of the box.

        • mbokil

          Contact the extension developer. Whenever someone contacts me I try to update my extensions. The extensions are updated by mostly volunteers so they can take a while to update if the changes to Firefox are extensive.

  • http://sarhov.com sarhov

    firefox do great job in last updates… keep it up

  • Marek

    I’m waiting for version x64, now I’m using waterfox

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.