~robcee/ more than just sandwiches

Posted
18 November 2011 @ 6pm

Tagged
devtools, Firefox, Mozilla

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) {
    InspectorUI.inspectNode(gBrowser.contentDocument.querySelector(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!


2 Comments

Posted by
Robert Kaiser
21 November 2011 @ 11am

That’s really great!

OTOH, it may be just me, but I’d prefer more speaking names when I’d define such functions as $() and $0 are so confusing, inspect() and inspNode or such may be longer but easier to remember what they are actually standing for (but then I could never get friends with the jQuery shorthand either). ;-)


Posted by
robcee
21 November 2011 @ 12pm

Well, you don’t have to use $0 or $() for those features. You can use any name you’re comfortable with. It’s just a scratchpad. :)