Firefox Developer Edition Is Here and It Has Some Great Features

Firefox Developer Edition

Mozilla’s Firefox Developer Edition (herein FDE) is actually replacing the old “Aurora Channel” of Firefox. It’s a large step because Mozilla is essentially coming out loud and strong announcing their developer tools are here! And it’s true. And I’ve played with it. And it’s good.

I’ve only been looking at this software for a short time now and certainly can’t comment in-depth on it yet. Though, aside from letting you know of its release, I can also let you know there a few bits of awesomeness you can play with right now.

Note:  The software is an entirely separate install from your current Firefox installation. It’s nice to not muck around with profiles or worry about treading over your existing Firefox customizations.

What’s the Deal with FDE?

Live CSS Editing (with code completion). Oh yes—code completion! Do you know how many years I’ve spent memorizing every single CSS rule so I could live-edit “manually” having to get every-single-character correct.  For those that may have been using Web Developer Toolbar to edit your CSS files right in the browser, you can now do this in FDE, with a few additional perks. Said perks include:

  1. Clicking NEW and creating an additional stylesheet right in your browser
  2. Code completion (yes I’ll say it again)
  3. Editing CSS files and then being able to click “save” to save the file locally
  4. Separate panel in editing mode that show media queries

If you don’t like the default editor view being dark, hit F12 and click the gear icon at right that appears. You can change to the light interface there.

Responsive Design View. I suspect you all ready had some sort of add-on doing this for you, Web Developer Toolbar, or are using Chrome where the viewport dimensions can be shown right on the screen. What’s nice about FDE’s responsive design view are a few things:

  1. Pick from a drop-down of common preset values
  2. Type in any value you wish right in the dimension area. Yes, just click in the dimensions display area and enter whatever you want.
  3. Button for screenshots. Actually a fairly nice feature because if you thought your print-screen then crop-in-photoshop job was quick, the screenshot FDE button just puts a high quality PNG file in your downloads directly, showing only the viewport area of your responsive window selection. Click, done.
  4. Button to rotate view. As easy as it is to type in any number you want in the dimensions area, it’s even easier to click one button to rotate the view.
  5. Button for simulation touch events. I’ve only tested this on one site I’ve worked on and all I can say is, it worked. If you are more interested in learning about this “simulate touch” button feature you’s best go Googling because I have little insight on this feature right now.

Valence. This is really an initial attempt by FDE to debug and test your work in other browsers, but right in FDE. The Mozilla Developer Network page about Valence states:

Valence (formerly Firefox Tools Adapter) is an experimental add-on that enables the Firefox Developer Tools to debug a wider variety of browsers, not just the Gecko-based Firefox, Firefox for Android, and Firefox OS browsers.

The initial debugging targets are Chrome on Android and Safari on iOS.

I’m seeing disbelief in other forums that you are truly getting a native application response from Valence and that this is really just software emulation. Which isn’t a surprise at all. Right on their Valence page it warns “Valence is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.” Okay okay, I wasn’t going to trust a non-native platform anyway for production areas, but it has to start somewhere right?

Many other features exist in this FDE package: WebIDE, Web Audio Editor, Page Inspector, Web Console, Javascript Debugger and Network Monitor to name a few.

Go get your hands on the free software from Mozilla’s Firefox Developer Edition page.

Tags: , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (21)  (1)  (17)  (6)  (1)  (1)  (7)  (1)  (4)  (18)  (5)  (2)  (31)  (9)  (1)  (12)  (4)  (1)  (4)  (6)  (10)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (4)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (15)  (13)  (2)  (7)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (34)  (5)  (9)  (9)