Comments on: Introducing the Web Inspector

By: Dimitri Bouniol

Dimitri Bouniol — Sat, 08 Apr 2006 04:24:37 +0000

Awesome Web Inspector! When are the metrics and properties tabs going to be available?

By: Synchro

Synchro — Fri, 27 Jan 2006 10:19:18 +0000

Firefox web developer is great, but as far as I’ve found, it only allows live changes to CSS. If you install SafariStand http://hetima.com/safari/stand-e.html it adds a simple menu bar to the show source window that means that you can edit the source of the whole page. If you happen to use inline style sheets (at least for testing purposes), you can get most of the functionality of the FF CSS editor, but with the added bonus of being able to edit the HTML as well.

By: hyatt

hyatt — Sat, 21 Jan 2006 21:29:14 +0000

Don’t be so quick to finger HTML+JS for the performance. The tree control used in the Web Inspector is Objective-C.

By: nevyn

nevyn — Sat, 21 Jan 2006 21:23:40 +0000

That one just cracked me up! I downloaded the sources to check out how you had made that nice inspector. It used a look and controls that resembles the new inspector in iPhoto, and I badly want to be able to use the same controls. Looking through the project, I couldn’t find a nib file. Instead I found… html and javascript! The inspector’s actually just a page! Way too funny.

Would explain the funky scroll bars and performance…

By: Philippe

Philippe — Thu, 19 Jan 2006 07:05:45 +0000

I filed bug 6666 for that ::selection problem.

By: Mark Rowe

Mark Rowe — Thu, 19 Jan 2006 06:47:55 +0000

Phillippe: I checked the headers of your page using ‘curl -I’ which your browser-sniffing obviously doesn’t understand. Apologies for the confusion 🙂

By: Philippe

Philippe — Thu, 19 Jan 2006 06:43:22 +0000

Mark, I’ll file a bug with testcases in a moment.
Note that the page in my example is correctly served as application/xhtml+xml to Webkit based browsers, Gecko and Opera (using some php magic, setting Content-Type headers), and to the W3C validator.

By: hyatt

hyatt — Thu, 19 Jan 2006 06:34:17 +0000

Pseudo elements really shouldnt be matching. This is a bug in the inspector right now.

By: Mark Rowe

Mark Rowe — Thu, 19 Jan 2006 04:20:32 +0000

Philippe, thanks for the example. I agree that what the Web Inspector displays in that case is misleading, though not entirely inaccurate. It shows that the background-color will be overridden by that specified in the ::selection declaration in base1.css. It’s misleading because the ::selection rules are not applied unless there is a selection active. I would appreciate if you could file a bug with a reduced test case demonstrating this so a clearer means of communicating the “overriding” of rules in this scenario can be found.

A secondary comment is that the page you referenced claims to test CSS namespace selectors, and yet it is served up as text/html. Namespaces are a feature of XML and as such are not applicable in “plain” HTML documents. If you update your page to serve the example as an XHTML Content-Type it will have greater chance of working in browsers.

By: jchilders

jchilders — Wed, 18 Jan 2006 17:25:23 +0000

Great job, guys. Lags occasionally, but handy nonetheless.

Another slightly more robust tool along these lines is Xyle Scope. I was introduced to this a few weeks ago and it has become a regular part of my development efforts. It’s built on top of WebKit:

http://www.culturedcode.com/xyle/inside.html

No, I don’t work for them, I just like the tool. 🙂