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.
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.
@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).
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.
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!
Elio QoshiElio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.
