~robcee/ more than just sandwiches

Inspector Landing

A couple of months ago, I started working on a new feature for Firefox, the first part of which landed last night and is in today’s nightly. It’s pretty rough-looking still, but over the next few days and weeks we’ll be landing new features as they’re written and struggle through the review process. There are already two partially-formed features waiting in the wings which will make this tool almost useful.

What are we looking at and how do you find it? In the Tools menu, there’s a new menu item labeled “Inspect”. Selecting this (or using the Cmd/Ctrl-shift-I hotkey [subject-to-change]) will bring up a panel at the bottom of the Firefox window with a tree representing the nodes in the HTML page you’re on. Hovering over elements in the page will select the appropriate node in the tree. You can finish dynamic inspection (i.e., hover over node to inspect) by clicking in the highlighter panel over a node, or hitting ESC or Return on your keyboard.

To close the Inspector panels, reselect Tools:Inspect from the menus or use the Cmd-Shift-I command shortcut again.

If the tree display looks a little familiar, it’s because you’re looking at an inDOMView-based tree widget. This is the same widget used in DOM Inspector, albeit a little differently-configured. This one’s setup to include all attributes under a node and their values.

Currently, the panel is undecorated. We’re awaiting a patch from Neil Deakin to provide title bars for panels. You might find that the highlighter (also implemented as a panel floating over the content area) sometimes obscures the tree panel. This is also a bug in progress. You can read more about some of the additional panel improvements Neil has underway on the Mozilla wiki.

And there are bugs. Some are addressed in downstream patches. Others are waiting to be fixed. Still others are, I’m sure, unknown. Testing this out everywhere you can will be helpful. If you find something, do a search in Bugzilla in the Firefox::Devtools component, and if you don’t see a match for it, feel free to file a bug. If you’re really keen, attach a fix to it. We love that kind of thing.

Next up are the Style and DOM panels which I am hoping can land within the week. I’ll be rebasing the patches in those bugs by end of day. You will also see a toolbar appear on top of the tree panel. I’ll blog about these features as they materialize in nightlies. I also plan on filing top-level bugs for the remaining features on the Inspector project page. If you’d like to help out, feel free to contact me and I can point you to what needs some effort. Whether it’s writing test-cases or feature code, there’s lots to go around.

All of this is moving towards a vision of a simple and fun-to-use web page inspector that will be shipping with the browser. There’s still a lot of work to do on it, but we’re making steady progress.

Didn’t Mozilla rip this out (DOMi) a few years ago and make it an extension because most people don’t need it? Why are you putting it back in? What can it do that Firebug or the DOMi don’t already do? What’s the impetus here? I don’t understand this at all.

Umm.. is there a link to the discussion about putting a DOM inspector back in Firefox, or is this not a complete reversal of the decision to remove it in the first place?

@DigDug: A lot can change in a few years. Now every browser ships with a set of development tools. People can still install DOMi or Firebug if they prefer those tools. We didn’t feel that DOM Inspector was the right tool to include in the browser, however.

@dejavu: There’s a link to the Project page above. This isn’t a reversal of that decision as much as it’s a decision to do something different.

see: https://wiki.mozilla.org/Firefox/Projects/Inspector

> Selecting this (or using the Cmd/Ctrl-shift-I hotkey
> [subject-to-change])

Please. It’s stomping on the keyboard shortcut DOM Inspector uses (and which still shows up next to DOMI in Tools, even!). Combined with the fact that the new inspector can’t be dismissed (hitting Esc doesn’t work; hitting Return doesn’t work, clicking anywhere at all doesn’t work), it means that I just had to downgrade nightlies to keep having a usable browser, since I kept opening this uncloseable panel by accident.

yeah, I found that out too late. I’m thinking I’m going to move the keyboard shortcut to Cmd-Quote after our discussion. I don’t think it’s in use yet.

On “Mozilla/5.0 (Windows; U; Windows NT 6.0; WOW64; en-US; rv:1.9.3a5pre) Gecko/20100514 Minefield/3.7a5pre”.

Ctrl+I brings out the bookmarks sidebar, just like Ctrl+B, for some reason.

And this:
“the new inspector can’t be dismissed (hitting Esc doesn’t work; hitting Return doesn’t work, clicking anywhere at all doesn’t work)”
Can only hide it by clicking through the Tools menu again.

Also, there’s only the bottom panel visible and no menu.

Screenshot: http://i.imgur.com/ySZmT.png

By the by, I think the highlighter should have click-through styling.

As close to edit as I get…:
The actual shortcut Ctrl+Shift+I works though… hehe… sorry -_-

Can you please let us know what the relationship between this and FireBug is? Is this meant as a long-term replacement? What advantages/disadvantages does it have compared to Firebug? I’ve seen hostility to this project because people are questioning its relationship to Firebug, Jetpack, and extensions. I think a clearly stated vision would help us all understand what’s going on.

> I’m thinking I’m going to move the keyboard shortcut to Cmd-Quote after our discussion.

Not going to work with various keyboard layouts.

> Not going to work with various keyboard layouts.

any suggestions then?

Please make a clarification regarding Firebug. Just like Mozilla got a huge backslash regarding the Jetpack possibly killing extensions thing, this is going to be the next big communication failure if you don’t explain what’s the rationale.

To me, this looks just like you’re trying to kill Firebug. Why? If you’re trying to be friendly to web developers, that’s useless, we all know about Firebug already. Who can possibly be interested in this besides web developers? I’m completely confused and I don’t think I’m the only one out there.

Looking good … if you need a hand just give me a shout.

To Mike, thanks a bunch for your offer to help. Nobody knows Firebug’s Inspector code and some of the quirky edge-cases better than you, so it’s much-appreciated.

To Jonathan and Jamie, nobody is trying to “kill” Firebug. Firebug is a tremendously popular and powerful web development application and it’s important for Firefox and web developers everywhere that it continues to be supported.

The intent of providing a built-in web page inspector is provide an easy and convenient mechanism to do web development. Developers who want the full power of Firebug are encouraged to use it.

Firefox is a platform and as a result, you can customize it and add the features that you want and need. Firebug isn’t the only add-on developers use. The Web Developer toolbar is also extremely popular, LiveHTTP headers is another. There’s plenty of room for everybody.

This really deserves a separate blog post and I promise I’ll write something more substantial next week.

This is cool, but the name/shortcut and that it’s to be included by default is silly.

I have wanted to make the DOM Inspector to allow good, Mac-like multi-window workflow. (I don’t have a Mac, but the approach is a good one and reminds me of Xcode’s interface.)

Just something I noticed when trying to start it – there is an access key conflict with “Page Info”, both use I as access key. So using Alt+T,I won’t work to start this feature. Please choose some other access key.

Otherwise – very nice, thank you. Finally something that works a lot better than the old DOM Inspector.

Btw, does the highlighter work on Linux? Last I checked, opacity wasn’t supported for pop-ups on Linux. Maybe this changed on trunk now since your highlighter relies pretty heavily on it…

Wladimir: thanks!

I have a bug filed for the accesskey / shortcut key problem here:
https://bugzilla.mozilla.org/show_bug.cgi?id=565872

I tested the highlighter on my linux netbook which is based on Ubuntu 9 and it does work. It uses a compositing window manager though and I’m not sure if that’s a requirement or not. It might be. In a VM, I tried Fedora 7 and was seeing black highlighter panels.

@robcee: I was testing with Fedora 12 Live CD a few months ago, in a VM as well. My popups also went black as soon as opacity below 1 was specified.

[...] has changed? According to Rob Cambell, the Mozilla developer leading the Web Inspector development, “[a] lot can change in a few [...]

[...] pm – Posted by Alex Firefox 4 to gain new DOM inspector Mozilla Developer Rob Cambell has revealed that Firefox 4 is recieving a new DOM inspector, similar to what is found in other browsers, after [...]

[...] week I promised to write a blog post to talk about why Mozilla’s building an inspector into Firefox. This is [...]

[...] 关于 Web Inspector 的更多信息，你可以参阅其开发者 Rob Cambell 的 Blog 日志。 [...]