~robcee/ more than just sandwiches

Firefox Devtools Team in London


Last week we got the whole DevTools group together in beautiful, sunny London England to hang out and hack on a few things. Sunny? Yeah, unexpected, but made for some great picture taking.

At the risk of saturating Planet with developer tools-related updates, there was some pretty magical stuff happening.

Our own Debugger task force put together the start of something wonderful. It’s a very early prototype at the moment, but with a bit of bug filing and polish, I think we’ll be able to get it into something that’s functional and not hard to look at in the next few weeks.


stay tuned…

9 February 2012 @ 10am

devtools, Firefox, Mozilla

Comments Off

Announcing new Developer Tools peer: Panagiotis Astithas

For Panagiotis’ outstanding contributions on the newly-landed Debugger front-end, we’re making him a peer.

Congratulations, past! May all your reviews be delicious.

8 February 2012 @ 1pm

devtools, Firefox, General, Mozilla

Comments Off

TextArea Fallback for SourceEditor going away

Some time ago, way back in the heady days of Firefox 7, Mihai Șucan began work to incorporate the Orion text editor into our codebase and landed it in Firefox 8. At the time, we had some concerns around accessibility and localization: would Orion be up to the task of being an in-browser editor for the Scratchpad?

We discussed some possible ways to mitigate this and settled on including a TextArea-based fallback. Mihai’s done a tremendous job of providing a SourceEditor API in the browser that abstracts a lot of Orion’s own interface into a more general-purpose editor widget. In Firefox 10, we’ve enabled Orion by default in the Scratchpad for the first time. Cedric Vivier used the SourceEditor API for the Style Editor and it’s worth noting that it does not support the TextArea fallback at all in Firefox 11.

Now we’re trying to add some important new features to the SourceEditor component. Things like “Find in File”, “Incremental Search”, “Context Menus”… Y’know, things you’d expect from any normal text editor. The TextArea fallback has made that increasingly difficult to do and in some cases, impossible. The cost of maintaining this API has become untenable for future work.

So we’ve removed the TextArea fallback for Firefox 13.

This may have some unforeseen implications for us. We discovered earlier this week that at least one popular addon was using the SourceEditor and I wanted to broadcast this here just in case there are other developers or users who rely on the TextArea fallback. If you are one of these people and this is going to cause pain, please post here, to dev.apps.firefox or file a bug.

Firefox 11 Devtools Additions

With the Page Inspector landed for Firefox 10 (currently in Beta), we’re adding to it with a couple of exciting new features for Firefox 11 (now on Aurora).

The first of these features is somewhat complementary to the Page Inspector and lives in its own window. The Style Editor is the hard work of Cedric Vivier and is a unique tool for editing CSS in the Web Browser. You can edit styles in a web page and immediately see the results. When you have something you like, you can save the CSS to disk and incorporate the changes on your website.

To access it, use Shift-F7.

It would be grossly unfair to not thank Paul Rouget, Dão Gottwald and Stephen Horlander for their great work reskinning the Style Editor for this release. Paul did a fantastic job on the styling while Dão kept the reviews flowing, none of which would have been possible without Stephen’s brilliant colors and design tweaks.

Another major feature we’ve landed in Firefox 11 is Tilt – a 3D View of the page’s DOM. Last year around this time, I suggested this as a possible alternative to the standard highlighter view most inspectors give developers. That became a Google Summer of Code project implemented by the more-than-capable Victor Porof who later managed the port to Firefox itself with reviews from Cedric Vivier and Benoit Jacob.

We have yet to see what kind of impact this sort of visualization has for developers, but I think as more people get used to having it, it’s going to become an invaluable tool for acquiring a high-level overview of the structure of a web-page and eventually, become a useful playground for manipulating and interacting with the structure of the page itself.

I’m really interested to see what people can do with this. We’re already seeing some strange and interesting applications of it on the web, but I think having a 3D library capable of rendering these types of meshes in Firefox itself is going to be an interesting area for exploration.

Happy 2012!

New DevTools Module Peers

Congratulations to Paul Rouget and Joe Walker! In recognition of your outstanding contributions, you are now full-fledged peers of the Firefox DevTools module. May your review queues be filled with outstanding patches of awesomeness.

6 December 2011 @ 9pm

devtools, Firefox, Mozilla

Comments Off

Web Console Key Change: Cmd+Opt+K on Mac

If you’re on Nightly, you may wonder what happened to the keyboard shortcut for the Web Console on OS X. It moved and is now on Cmd+Opt+K. That happened with a patch to move the Page Inspector to Cmd+Opt+I in bug 689924.

We had a bug to add the original keybinding back, but for several good reasons this wasn’t done. If you feel strongly about it, comment in that bug and we’ll consider reopening it. This is a limited-time-offer, though, and if you don’t get your opinions in before December 20th, I’m afraid we’ll just leave it WONTFIXed.

If this is hugely painful for you because you’ve gotten used to and love this keyboard shortcut and find it impossible to learn a new key, you can also download Tim Taubert’s tremendous add-on Customizable Shortcuts on AMO (or github!).

New Stuff: Style Editor, Debugger, Inspector, Web Console; Contributors!

Hey! There’s some hot new stuff in Nightlies you might not be aware of. It’s called the Style Editor and, as it says on the tin, it’s for editing CSS of your web page. You can find it in the Web Developer menu.

“But, you can already do that with the Rule View in the Page Inspector thing in Aurora,” I can hear you protest. That’s true, you’re absolutely right, but with the Style Editor, you’re editing all of the CSS files in an editor. Not just the rules applied to a specific node. This has some nice properties.

1. You get to use Orion. Complete with prettified CSS so it’ll even work on sites that have minified their style sheets.

2. You can easily save or export changes you make. This is a huge benefit when you want to tweak some styling and then get it back into the original source.

3. It’s awesome.

Please try it out and file bugs if you find them. We love that. We have a few tweaks we want to land before we ship it to Aurora, but if you spot any bad behavior, we’d like to know about it.

If that weren’t enough, we have a Debugger getting ready to make its debut in Mozilla Central and Nightly builds. It likely won’t be turned on at first as we work to beef up its capabilities. But soon, over the next release or two, this will become available debug your JavaScript. I’ll talk more about that when it’s ready.

But, do you know what’s really cool? We have contributors showing up in our IRC channel and submitting patches. Over the last couple of weeks, I’ve seen no fewer than 5 new “faces” in our IRC channel talking to the developers, filing bugs and submitting patches. This is fantastic stuff! For most people, their time from zero experience with Mozilla code to first patch is a day or two. Most of the hard work is setting up the build environment on their systems and wrangling with Mercurial to get the code onto their machine.

Extra thanks and kudos to, sonny, hardfire, nigelb, soswow and anybody I may have missed. The Web Console has never looked better.

6 December 2011 @ 11am

Email, Firefox, Mozilla

Comments Off

If you need me, I’ll be in my room

While our valiant IT support gods struggle with our recent outages, you can reach me here via comments (I won’t post private messages) or on twitter @robcee. If, y’know, you need me for anything.

Inspector Scratchpad and Web Console Power Tips

We landed a new feature in Aurora(10) this past week. It’s kind of a big deal. It represents the culmination of nearly 2 years of evolution and iteration and eventually became the focus of most of the Firefox Developer Tools team. I believe there are contributions to the Inspector (or Highlighter as we call it around here) from over a dozen people contributing code, UI design, interaction and behavior, CSS and review feedback. Not bad considering it started out rather humbly with one active developer (me) before being cut from Firefox 4 so we could better focus on shipping the Web Console.

What we’ve landed is in some ways just a beginning. We have a bunch of great features planned for it that will include multiple selection by selector, annotated selected nodes, richer editing of HTML and CSS and a whole bunch of things that… well, you’ll just have to see what’s coming in the next version. I am seriously excited about what we’re doing with this.

That said, there are some things that the Highlighter could do better. I have a few tips for you:

The Web Console and the Selected DOM node

Open the Inspector on a web page, use this one if you want, and highlight a node (click it to “lock” the inspector in place). Next, open the Web Console. On the command line, type, inspect($0).

This will open an Object Inspector on the selected node. $0 can be used to inspect and modify that node via the console with JavaScript.

The Scratchpad and Highlighter

What if you want to do more with your nodes? Maybe you want to select something but only know it by a selector?

Open a Scratchpad and set it to the Browser Environment (if you haven’t already, set devtools.chrome.enabled to true in about:config and then select “Browser” from the Environment menu in your Scratchpad).

Enter and run the following:

function $(aString) {

now when you execute $(“body”) (or any other selector in that function), the Inspector will highlight the first node that matches that selector.

$0 in Scratchpad

Enter and run the following:

this.__defineGetter__("$0", function() { return InspectorUI.selection; });

Now with a selected element in the Highlighter, you can evaluate $0 and use it to reference the selected element.

$0.click() will click the element, for example.

Save this Scratchpad as something like “Inspector.js” (I called mine “dolla-0″) and load it up when you want to do some playing around with the inspector. Add to it and dig around. Keep in mind that the InspectorUI object is a chrome object and you can potentially break things. Hopefully you find some cool tricks along the way. Make sure to share them!

7 October 2011 @ 12pm

General, Mozilla

Comments Off

Lady Ada Day

October 7th is Lady Ada Lovelace Day. I’m going to mark it in my calendar.

In my earlier years, I was always intrigued by the story of Charles Babbage’s Difference Engine, well before reading the steam-punk confection of the same name by William Gibson and Bruce Sterling. Even more intriguing was the woman in the story, the Lady Ada Lovelace. Ostensibly, the world’s first computer programmer, she didn’t let a minor thing like not having an actual computer to work with hold her back. She was a visionary, her mind exceeding the technical capabilities of the day to foresee a world of general purpose, programmable computation machinery.

Like many others, I still find her a fascinating character; a noble, the daughter of the darkly-twisted poet Lord Byron, perhaps a little sickly, taking interest in an intellectual exercise inhabited entirely by men and producing code! What would she think of software and computing today? Of the social aspects of open source code? Would she find it mendacious and boring because anybody could do it or would she take it to new and exciting places?

Things are different today, though not as much as we might like. Women have made considerable contributions to the fields of math and computer science. Names like Adele Goldberg, Anita Borg and Grace Hopper command well-deserved reverence. I have the great fortune to work alongside some truly brilliant women here at Mozilla, both in code and within other important areas of the organization. I live with one of them and if I didn’t think it would be a little awkward for both of us, I could tell you just how inspiring she has been to me. I think Lady Ada would be pleased to know any of them.

(I tried to find an image of Grace Hopper and some old machinery, but I couldn’t find anything CC-licensed. Instead, I will link to the Flickr Blog post which has some neat pics).

← Before After →