Firebug: Alive and Well

kdangoor

9

Last week, John J. Barton announced that he has left IBM and the Firebug project and joined Google. John has been leading Firebug for quite some time and he has made a huge contribution there. It’s hard to overstate how important Firebug has been and still is in the world of web development, and John has been a large part of that history.

The departure of Firebug’s leader has raised questions in some people’s minds about the future of the project. Back in May, I explained the relationship between Firebug and Mozilla’s developer tools group. What I wrote there is still relevant today: Firebug remains an important and vibrant independent project. Mozilla directly supports Firebug both through work on the platform that Firebug depends on as well as work on Firebug itself.

Jan (Honza) Odvarko works in the Mozilla Developer Tools group and is the new leader of Firebug. Honza has been working on Firebug for a long time and has been the release manager for the past few releases. The Firebug project is continuing to move forward without a break with the release of 1.8b6 last week and this week’s planned 1.8 final release. Honza has plans for interesting new features in Firebug 1.9 so stay tuned or, even better, get involved!

Firebug has many awesome features built up over a period of years and is a favorite tool for more than 2.5 million web developers. If you’ve never tried Firebug before, you’re in for a treat: it’s a powerful and comprehensive tool for web developers. If you’re already a Firebug user, keep an eye out because the Firebug project has more good things to come.

Best of luck to John in his future endeavors and to the Honza and the rest of the Firebug team for their continuing adventure!

– Kevin Dangoor, Developer Tools Product Manager

DevTools Integration Build

Rob Campbell

3

(Crossposted to dev.apps.firefox and my blog)

Update February 14, 2012 by kdangoor: The link below for developer tools builds may not be active. Those builds have been used when we’ve had large features in development and wanted regular test builds. As I write this, you can find the latest developer tools on the Nightly channel.

Hi,

I have a present for you.

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-devtools/

If you go there and download the version for your operating system, you can get a sneak preview of what we’ve been working on in the Developer Tools group. It is a little rough around the edges still as it’s all a work in progress, but it gives you an idea of what we’re working towards.

The features can be found in the Web Developer submenu in the app menu on Windows (aero) and Linux or under the Tools>Web Developer menu on Mac and WinXP or Linux Firefoxes without the AppMenu.

The big feature in this build is the Highlighter available through the Inspect menu item (subject to change). It’s still using a panel for the HTML display, but that is going to be docked and de-emphasized soon enough. There’s a Style panel available through the toolbar at the bottom of the screen. The layout of this panel is going to change very shortly as well to provide more immediate access to the information you’re looking for.

The other cool easter egg in this build is the Orion editor in Scratchpad. I’m kind of ruining the surprise by telling you about it, but I just couldn’t help myself.

I’ll kick off another build in a week or two including the Style Editor and some improvements to the Web Console as well as ongoing additions to the Highlighter. Note that the updater will download the latest Nightly from mozilla-central, so if you let it update, you’ll lose this build.

Please let us know what you think. Here on this blog, on d.a.f, or file bugs against the Firefox::Developer Tools component.

I hope you like it.
Rob

Weekly DevTools meeting notes (June 16)

kdangoor

The full meeting notes have the details, but the highlights are right here:

  • Welcome Nick Fitzgerald (fitzgen on irc)! Nick is an intern with us for the summer. He’s already diving into the Command Line and will also be involved with the Style Doctor
  • Work on Tilt progresses, as you can see in Victor Porof’s latest video.
  • Check out the new console.timeStamp feature that’s coming in Firebug
  • Note that Firefox 5 is coming out next week, and Firebug 1.7.2 is compatible with it (yay!). Firebug 1.8 will come out shortly after Firefox 5.
  • console.group/groupEnd have an implementation that you can see in Panos Astithas’ video.
  • The Highlighter and the ability to register commands with the new Command Line are ready to land! Stay tuned for more.
  • Mihai Sucan posted a try build with the new code editor integrated into the Scratchpad. If all goes well, this feature will be in the next Aurora.

Developer Tools Roadmap update

kdangoor

I’ve posted a draft of an updated roadmap for Mozilla’s developer tools project. What we’re trying to accomplish overall hasn’t changed, but some of the mechanics most certainly have. This isn’t surprising given the early stage of our project.

Please take a look and let us know what you think either in the comments here or on the dev-apps-firefox list.

DevTools: Halfway to Firefox 7

kdangoor

15

We’re now right in the middle of the 6 week development cycle for Firefox 7, so I thought I’d do a quick rundown of the features we’re tracking for that Firefox, with two special bonus features at the end. Remember that we’re following a release train model here. The timing for Firefox 7 is fixed, but the features listed below are not. If we get everything ready in time, you’ll see the features listed below appear in Firefox Aurora builds sometime around July 5th and in a Firefox release around September 20th.

Highlighter lets you visually select a DOM element, see some basic information about the element and access further tools for working with the element. It’s a gateway to visual/design oriented tools. Rob Campbell and Mihai Sucan have been working on the main patch in bug 642471. Paul Rouget has been working on improvements to the initial element highlighting and adding the overlaid information in followup bugs.

Status: Main patch is ready-to-land
Next 3 weeks: polish the feature with the followups

Style Inspector takes the element selected by the Highlighter and gives you detailed information about the styling of the element. This feature was initially created for Firefox 4 last fall and recently revived by Mike Ratcliffe. bug 582596 covers the main work of landing the feature. Additional important bugs cover things like integration with the Highlighter.

Status: Reviewed by the devtools team, waiting on browser peer.
Next 3 weeks: land it and get the Highlighter integration in

Style Editor makes it possible to make changes to the CSS on your page and see those changes instantly take effect. Cedric Vivier has quite a few great ideas for this tool, and we’re hoping to get the first step out in Firefox 7. Cedric’s editor is available as an add-on right now. He will be attaching a patch version of this to bug 583041 within the next couple of days.

Status: Patch coming up for review by devtools team.
Next 3 weeks: Get the patch up, reviewed and landed. This will likely be followed by a UI polish round.

HTML Tree editing provides a simple interface for making some changes to the current DOM. Specifically, you’ll be able to manipulate attributes and text nodes. Kyle Simpson has picked up work on the HTML tree that was already in mozilla-central, experimented with the user interface and is now getting a patch together for the tree. You can track the progress in bug 659710.

Status: Patch coming soon for review by devtools team.
Next 3 weeks: Get the patch up, reviewed and landed.

We’re adding a Code Editor to Firefox to improve the editing experience for the Scratchpad and Style Editor features. Mihai Sucan is integrating the Eclipse Orion editor, which has very good accessibility and internationalization aspects. This work is tracked in bug 660784. A separate bug tracks the Scratchpad integration for the editor.

Status: Initial patch reviewed, more work required for testing the integration. Also getting accessibility feedback to see if the editor hits the “good enough” level.
Next 3 weeks: Finalize the patch and land it.

The console object is being extended to have just about everything that’s in the de facto standard. Panagiotis Astithas is leading the charge on this, and there are several bugs involved in this work.

Status: Much has landed already
Next 3 weeks: land console.dir, console.group/groupEnd

And now, the two special bonus features. These aren’t going to make their impact in Firefox 7, but the progress during the 7 cycle has been great!

The Command Line is part of a rethink on how people get things done with developer tools. It’s going to take us a couple of releases to fully bake the Command Line+Scratchpad idea, and we’ll be talking more about this soon. Joe Walker worked heavily on the Bespin command line and has been working on this seriously spruced up new version of the idea. Our new intern, Nick Fitzgerald, will help out with this feature.  It’s actually possible to use this sort of command line interface in your own webapps as well.

Status: Landing support for command registration soon
Next 3 weeks: working to land the command line UI, but turned off by default until we’ve fully fleshed it out

Finally, the Script Debugger project is huge and has many moving parts. Dave Camp, Jim Blandy and Jason Orendorff are hard at work giving the SpiderMonkey JavaScript engine an entirely new debugging interface that is remotely accessible. Panagiotis Astithas will be helping them out soon as well. The groundwork being laid for this feature is going to help make our other tools remotely accessible, too.

Status: SpiderMonkey can stop at debugger statements and provide stack traces over the remote protocol
Next 3 weeks: Continue on the strong progress made so far… this is not a Firefox 7 feature, but will be here before you know it!

Getting Involved

We’re building a lot of new tools, and I think they’re fun and exciting projects that will help a great many web developers. There are many opportunities to get involved, and we’d love your help in building some of the best tools for the open web.

Update: Since our release train model is still quite new, I added some additional information to the first paragraph to describe when these features are likely to be available.

– Kevin Dangoor, on behalf of the Developer Tools team

Weekly DevTools meeting notes (June 9)

kdangoor

Check out the full meeting notes for a bit more detail, but I’ve got the highlights for you below:

  • Tomorrow, QA is holding a Firefox 6 developer tools test day. Join us in #testday if you’re trying out Scratchpad or new Web Console features for Firefox 6 and would like some assistance!
  • Jan Odvarko released Firebug 1.8 beta 1 last week and beta 2 is coming out this week. 1.8 is a major refactoring of Firebug’s code, and things are looking good for a release alongside Firefox 5.
  • Scratchpad links in the Web Console will work properly soon in Aurora, when a fix that Panagiotis Astithas finishes landing.
  • Speaking of Scratchpad, Rob Campbell put together a video which gives you an idea of what it’s like to use the Scratchpad for experimenting with code.
  • Paul Rouget has posted a couple of videos of prototypes for new Highlighter behavior.
  • To help get it out the door sooner, Cedric Vivier has simplified the code for his Style Editor. You can try out the simplified version right now in add-on form. Cedric will be working on getting this in mozilla-central soon
  • Google Summer of Code participant Victor Porof showed off his in-progress Tilt project.
  • The Script Debugger continues to progress, with stack frame support landing yesterday in Dave Camp’s repository.

Weekly DevTools Meeting Notes (June 2)

kdangoor

As usual, the full meeting notes are on the wiki. Here are the highlights for this week:

  • Firebug 1.7.2 has been released.
    • Compatible with Firefox 3.6, 4 and 5 (now in beta)
    • Has some other bug fixes
  • Firebug 1.8 beta due tomorrow
    • Compatible with Firefox 6 (now in Aurora) and Nightly
    • Contains the big modules refactoring
    • Also contains a net panel improvement that displays remote IP address and port
  • Joe Walker and Dave Camp put together a demo showing the Command Line resuming execution in the debugger
  • Mihai Sucan posted a demo of the Eclipse Orion editor running inside of Scratchpad

Web Console: where you want it to be, with nicer completion and more

kdangoor

21

The latest Firefox Aurora features a number of improvements to the Web Console. Take a look at the Web Console at the bottom of the screenshot:

Firefox 6 Web Console

  • First of all, the Web Console is at the bottom of the window! Many users liked the Web Console at the top of the window, but others wanted the Web Console at the bottom of the window or in a separate window. All three of those choices are now available.
  • console log messages (like “This is a log message”) now include a link to the file and line that generated the message. This makes it easy to get some context around that log output.
  • Requests to file:// URLs now appear in the Web Console

Here’s something else that’s new:

New Autocompletion

Previously, the Web Console provided suggestions to speed your typing. You could cycle through the suggestions, but it wasn’t always clear what the choices would be. Firefox is now even better at giving you suggestions and saving keystrokes with its new popup display of completion suggestions.

We refined several other aspects of the Web Console’s behavior. Notably, Firefox’s native console object now includes the debug and trace methods that appear in other console objects. We plan to expand the console object further in the next Firefox release.

Thanks to Mihai Sucan, David Dahl and Panagiotis Astithas for these improvements to the Web Console! Thanks also to the reviewers who helped ensure that the code is top notch: Shawn Wilsher, Gavin Sharp, Dave Townsend, Rob Campbell and Neil Rashbrook. Finally, thanks to Eric Shepherd for his documentation work on the changes.

– Kevin Dangoor on behalf of the Mozilla Developer Tools team

Weekly DevTools Meeting Notes (May 26)

kdangoor

2

Take a look at the full meeting notes for the details, but I’ll give you the highlights right here:

  • Firebug 1.8a3 is out. It works fine with Firefox 5, but there is a crashing bug on Aurora (Firefox 6) and Nightly. It’ll be fixed in tomorrow’s Nightly.
  • It’s worth nothing that Firebug 1.7.1 is compatible with Firefox 5. Sign up for the Beta channel today!
  • Cedric Vivier posted a very quick demo of the Style Editor. Notice how the elements affected by the rule you’re editing are highlighted.
  • Kyle Simpson posted a UI prototype to show some of what he was thinking for the HTML editor

The Relationship Between Firebug and Mozilla Developer Tools

kdangoor

12

As manager of Mozilla’s Developer Tools team, people keep asking me about how our work relates to the Firebug project. It has even come up in a tweet, but this is not really a 140 character kind of question.

Johnathan discussed this a year ago, and what he says there still applies today. I wanted to provide some more thoughts on this topic since we’ve been ramping up our developer tools efforts and this will be very evident in coming releases.

Firebug is an awesome project. It was groundbreaking at the time Joe Hewitt introduced it, and current leader John Barton and the project’s many contributors and extension authors have continued to push the project forward in innovative ways. It is one of the most vibrant and active open source projects built on Mozilla’s platform.

Mozilla supports Firebug’s development directly, with a full time member of my team (Jan Odvarko) devoted to working on the project. We held the release of Firefox 4 to fix platform bugs that Firebug exposed and, more recently, we landed fixes on the locked-down Aurora branch for Firefox 5 as well when they harmed Firebug functionality.

At this stage, Firefox needs to ship with a strong baseline set of tools for web developers. Firebug is a standalone project with a lot of history behind it and big plans for the future. We want to be able to build new tools that head in some new directions while allowing the Firebug project to continue to explore their ideas. Our goal is to help the whole developer tools ecosystem. We want to make it easier for people to hack on the built-in devtools, on Firebug and on entirely new experiments, too.

Firefox will ship with tools (like the Web Console in Firefox 4 and Scratchpad in Firefox Aurora). Firebug will continue to have fantastic new releases like the 1.8 release planned to coincide with the Firefox 5 release. addons.mozilla.org will continue to have new web developer add-ons and new versions of old favorites appearing all the time.

We think Firebug is awesome. That’s why we invest so heavily in it already, more so than for any other add on. We also want to explore new approaches to developer tools, and you’ll see more of these from us in the coming months. Across the board, we’re growing our investment in developer tools because there are huge opportunities to make life better for web developers.

– Kevin Dangoor