Firefox Developers

Developer Tools for the Open Web

« PreviousNext »

Firefox 11 (Aurora) Developer Tools screencast

23 January 2012

I’ve created a screencast to show off the Style Editor and Page Inspector 3D view (Tilt). These features are in Aurora today and will be going into beta next week. I wrote a post for Mozilla Hacks about these tools last month.

Be sure to opt-in to HTML5 video on YouTube!

Posted in announcements | Trackback | del.icio.us | Top Of Page

    12 Responses to “Firefox 11 (Aurora) Developer Tools screencast”

  1. jamEs Says:

    Until you can edit and change code and styles on live sites the new FF dev tools will be useless to me. Just being able to inspect stuff isn’t enough and is what makes Firebug indispensible.

  2. Teoli Says:

    But you can edit the style live with the style inspector…
    You should try.

  3. jamEs Says:

    Okay, don’t I feel stupid since that’s what was just implemented, I thought it was just talking about Tilt. I checked these features it last week and it wasn’t allowing me to edit, hence my comment. It’s definitely getting close. One thing I can see that would be a great feature to add is the ability to change values with the up and down keys. I use that all the time in Firebug.

  4. kdangoor Says:

    Both the Style Inspector rules view and the new Style Editor allow you to make live changes to the styles. The Style Editor has the plus of being able to save the CSS files when you’re done. In fact, in this very demo I show off the ability to see live changes that you make in the Style Editor.

  5. Rafael Ehlers Says:

    Why not implement a basic FTP solution, so if we can save that CSS remotely, it’ll be just a matter of select from a dropdown list?

  6. kdangoor Says:

    It’s a matter of priorities, and also a matter of figuring out which things belong in add-ons and which in built-in features. For example, many people use SFTP rather than FTP for deployment. The Eclipse Orion server supports using HTTP PUT to save files that it serves up. Many other people deploy by committing to a git repository and pushing.

    The one clear cut thing we’re looking to support is that if you open a file with a file:// URL, you can save it without any prompting. I believe there’s a bug in bugzilla for that.

    Thanks for the feedback!

  7. pd Says:

    Don’t feel too silly. Saving to local disc is maybe of some use to some people however I personally do not see how it will make a difference for myself. All my web development is done with files on the server. My editor opens files from the server locally and when I Ctrl+S it saves it back to the server. Additionally there are git procedures involved. Saving to the local machine is nothing new either, a Firebug extension has been available to do that for a long time:

    The only new tool to have come out of the resources spent on making native dev tools is tilt which arguably could fall into the ever-growing listing of eye candy without a real world use.

    http://getfirebug.com/wiki/index.php/Firebug_Extensions#cssUpdater

    Re-writing the wheel (Firebug) is such a huge waste of effort especially when Firebug’s immortal zombie compartments are such a mongrel of a problem that is being given very little in the way of resources.

  8. Frank Says:

    You can save css directly on the server instead of desktop with Transmit, and it works in sftp. Transmit is a great tool for that stuff, i also use this feature to save images directly on the server with Photoshop. And i also save time :)

  9. Aldi Says:

    Here are some wishlist for the the Style Editor:
    – Text-wrap
    – Text-search
    – Auto-complete

    Cheers!

    Keep it up!

  10. Al Says:

    Why are you even creating dev tools?? Firebug does this job very well.

  11. kdangoor Says:

    Hi Al,

    I think there’s a lot of room left for experimentation, new features and new approaches.

    http://blog.mozilla.org/devtools/2011/05/25/the-relationship-between-firebug-and-mozilla-developer-tools/

    Kevin

  12. Orion Features in Firefox 10 and 11 | Orion News Says:

    […] same time, Firefox 11 moved into their Beta channel. The Mozilla developer tools team released a cool video last week showing upcoming features in Firefox 11, such as a 3D Page Inspector, and a new […]