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.
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
Event Listener Popup
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.
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).
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
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
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)
- 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.
What do you think of the new additions? Are you looking forward to trying them? Let us know in the comments!
Elio 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.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers