Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Xyle scope

June 26, 2006

At the recent @Media conference, I was pleased to share a stage with Rachel Andrew and Roger Johansson for a panel titled “Strategic CSS Project Management”.

One of the tools I mentioned during the talk, the $20USD Xyle scope CSS debugger and analysis tool, is something I’ve been using and recommending since shortly after its release. I think it’s high time I got around to writing up why exactly I think it’s so great.

First and foremost, Xyle scope is not all things to every one. You can get very similar results from tools like the Firefox Web Developer’s Toolbar and a future version of Safari. But I’ll leave someone else to write those ones up.

What I like about Xyle scope is the richness of information it provides about a page’s DOM and CSS, and how easy it is to get to that information. A typical scenario that’s becoming far more common for me is that I come back into a site I last worked on a few months ago, and can’t remember the specific id and class values I’ve used, or how specific my selectors ended up being, or increasingly, which files contain which style.

Here’s an example of what I mean. On the front page of this site, there’s a listing of the 5 most recent posts. If I needed to get back into the CSS at some point and start changing the formatting of the dates within that list, traditionally I’d have had to refresh my memory by determining a few things:

  • What sort of HTML element the dates are contained in, and whether it has a class or id
  • Parent elements, and their respective id/classes
  • Which rules in the CSS apply to that element directly
  • Which rules in the CSS that element inherits from parents
  • The specificity of any of the CSS rules
  • Which CSS files the appropriate rules exist within

Any time I need to make an edit to a page, I need to go through that list and figure out all the relevant information about the element in question. Though I only have a single file on this site, these days I favour breaking up a larger site’s CSS into multiple files. This compounds the management problem, since it makes it a bit more difficult to narrow down on the exact rules I need. But that’s only part of the problem, the rest is the mental overhead required to work out myself how the specificity breaks down, and which rules I actually want to edit in order to affect my change.

What I’m getting at is that the mental energy exerted to figure out all of this is something that can and should be done by software. There’s no reason why I shouldn’t be able to just point and click on the element and have all of that information shown to me automatically. Enter Xyle scope.

I load up my page in the built-in browser, and then switch from browse mode to selection mode. The browser is simply Apple’s WebKit engine (the same one as in Safari), and browse mode allows you to navigate a page, whereas selection mode allows you to click on any element and get detailed information about it:

Xyle scope window

The prevous screenshot gives you an idea of what all that click can tell you. Up in the top right (panel a), there’s a DOM drill-down that shows you the entire hierarchy up to the element you’ve clicked on. It’s informational, but it also acts as a DOM browser: if you need to, you can click on adjacent or parent elements and work your way back up or down the hierarchy (and the rest of the information, as well as the selection within the browser pane on the left, will update accordingly).

Down below the DOM browser (panel b), there’s a markup synopsis that outlines what the HTML elements, classes, and ids are for the element (and its various children, where applicable).

Then down at the bottom right, there’s a split-panel style rule browser. The more comprehensive listing includes selectors and fullrules on the left (panel c), and the summary on the right (panel d) is kind of a navigation for the left that includes just the selectors. The information in the left panel is extremely useful, and gives me exactly what I outlined above.

What we’re looking at in panel c is a summary of the cascade, followed by a listing of all the style rules that could potentially apply to the date in that home page listing I picked as my example. You’ll notice some properties are greyed out; these are properties that don’t actually make up the final styling of the element, since they’re being overridden in other, more specific rules. At a glance I can tell exactly which selectors are applying which properties, obviating the need to sift through multiple selectors and calculating specificity manually.

As well, you’ll notice the word ‘wintermint’ sitting beside each selector in this panel; this is the name of the CSS file that the selector resides in. As I have one single CSS file for the site, it’s not so useful in this instance. But when armed with a tool that clarifies to this level exactly which rules I should be looking at, you can see how that naturally eases any fear of maintaining multiple CSS files. Managing them is a snap with a tool like this.

I don’t just use Xyle scope for debugging; I use it for any sort of editing or CSS creation that involves thinking carefully about specificity issues. It has cut down on the time I spend fooling around in a CSS file trying to figure out exactly where to make my change, and its mastery of specificity has actually impacted the quality of my overall CSS for the better. I can write tighter, more precise style rules without the worry that I won’t be able to make sense of them later. And though other software offers similar results, as I mentioned at the top, I currently prefer Xyle scope’s ease of use and stand-alone nature over built-in browser tools.

No, there’s no Windows version at the moment, but Mac minis are cheap like bubble gum these days. You’ve already got a Mac for testing anyway, right? (And nope, I’m not getting paid for this posting or recommending the software, I’m simply an enthusiastic user.)


1
June 26, 14h

Good post, now I have a better idea of how Xylescope works. I had downloaded and tried this app out a few times, but never really sat down to use it extensively enough to really understand how to use it well. Thanks!

2
Rimantas says:
June 26, 14h

Another great extension for Firefox - Firebug ( https://addons.mozilla.org/firefox/1843/ ) is worth mentioning too.
Its “Inspect” feature is great. Like the rest :)

3
June 26, 14h

Dave, your post focuses primarily on using Xyle scope to edit and debug your own website and I agree it’s a terrific tool for that. But another of Xyle’s strengths is allowing you to really get under the hood of other people’s websites as well! Sure, I could look at a site’s (let’s say, yours) source and look at the CSS file, but no other tool that I know of allows me to put those two bits of information together in such a cohesive, visual manner. So not only does Xyle help with development time, it also helps us learn! Great tool!

4
June 26, 15h

So how come you can’t edit right in the programme itself? Or am I missing something?

5
Dave S. says:
June 26, 15h

“So how come you can’t edit right in the programme itself?”

I don’t know; ask them.

My guess: do one thing and do it well. Why patch on a half-assed text editor when a ton of great ones exist already? This app does what it does; I’m prefectly content to use it without an internal editor.

6
Dave S. says:
June 26, 17h

BTW, if anyone wants a debugger like this AND editor in the same package, check out StyleMaster - http://www.westciv.com/style_master/index.html

7
June 26, 19h

Something I wrote over a year ago, but good to see its getting some momentum. Hope Jürgen comes up with a Windows version too.

http://karmakars.com/2005/05/19/xylescope/

8
June 26, 20h

Great write-up, Dave! I knew there was something to this program, but I hadn’t taken the time to dig into it yet. This helps a lot. As you mentioned before, a lot of this can be done with the Firefox Web Dev Extension, but this is very clean. I’m going to have to consider if it’s $20 worth of clean, though!

9
Neil says:
June 26, 21h

“So how come you can’t edit right in the programme itself?”

I know Jurgen was planning to start work on a separate CSS editor, but I think he might have changed his mind.

One other thing worth pointing out is the spiffy-neat CSS properties reference on the Cultured Code site. The keyboard support is really nice, too.

http://www.culturedcode.com/css/reference.html

10
June 27, 01h

This tool looks very nice. If I will ever manage to switch to a mac, I would definitely give it a shot.
But for now I am happy with my PC workstation. I mostly use the DOM-Inspector that ships with Firefox in combination with the “InspectThis”-Extension (of course parallel to the “Web developer”- and “FireBug”-Extensions).

It gives me a tree-view of the DOM and also all the css-rules (along with the associated css-files) which apply to a certain element. For now I can live with that… although this “Xyle scope” looks very good. Especially the specificity-indicator. That one I would really like to be able to use. =)

11
June 27, 05h

You also have TopStyle which is really great. But it is a bit more expensive.

http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle

12
juaron says:
June 27, 08h

the firefox extension ViewFormattedSource can also show all selectors that are applied to an element, ordered by specificity.
https://addons.mozilla.org/firefox/697/

13
Pedro says:
June 27, 23h

I came across this web tool a little while back and have found it incredibly useful (especially if you ad a shortcut to it from your bookmarks).
http://slayeroffice.com/tools/modi/v2.0/modi_help.html

This allows you to inspect items on a page on the fly. You put it in your favorites and click on it(or set up a shortcut) then it pops up a javascript window on the site you are on. It gives all kinds of information about the current site. Once you look at some of the shortcuts, it really becomes a powerful tool. Just thought I would give my two cents and yes Xyle scope is awesome as well!

14
Sven says:
June 28, 01h

For those who would like to edit directly their CSS, like Dave Shea mentioned there is of course StyleMaster, but a challenger is CSSEdit.

http://www.macrabbit.com/cssedit

CSSEdit is Mac only whereas StyleMaster has the advantage of working on Windows as well as Mac OS.

CSSEdit is lightweight, quick, has a really smart auto-complete, a live preview, a clean visual editor for those who are still learning and is much cheaper than its full featured competitor.
The next CSSEdit release (actually still beta) also feature a XyleScope like selection mode. Not as complete as XyleScope, but it becomes really handy in a daily use.

ps: The main trouble I encounter with StyleMaster was a white flash on each refresh in StyleMaster, it trigger a headache in less than 10 minutes. Also they might have solved this problem by now, its been a while.

15
Paul Solecki says:
June 28, 02h

I may give this a go once I get a Mac. Those new Macbooks are just looking too tempting. The fact I can remote desktop to a PC and/or install Windows helped a lot in the decision :)

16
June 29, 04h

Dave, I saw your panel at @media and found it very informative. I’m just getting to grips with advanced CSS (playing catch-up, I know) and a tool like this is an excellent way to keep yourself sane! Shame it doens’t ship for Windows as yet.

However, I’m finding Dreamweaver8 (which I use for most of my development) has much better CSS support than previous versions, and if you click any element in the design window, the CSS panel will tell you exactly which rules apply and where they are defined. That’s pretty handy and saves a lot of head-scratching at times :-)

17
July 04, 22h

Great post! The app is awesome and literally saves me hours of work. Producing XHTML and CSS (use BBEdit for that) is one thing, but tweaking the CSS based layout on the fly is another! Couldn’t live without it.

18
July 05, 12h

@juaron: Thanks for the heads up on that FF extension! That is one of the features of Xyle that I’ve desired most since being marooned once again on PCs several months back.

19
Mag says:
August 08, 07h

CssEdit is a good software with enhanced features that turns Css editing into fun. However, i believe it’s overpriced, as afterall it’s just a Css-editor.

20
Bokov says:
August 10, 10h

Good post, now I have a better idea of how Xylescope works.

Thanks !