Xyle Scope is a CSS analysis tool that takes an innovative approach to exposing how a web page is put together. It enables you to interactively explore and analyze (X)HTML and CSS by simply clicking on an element of a web page and displaying the underlying code. And what’s more, it’s based on the WebKit framework, the same rendering engine Safari uses. Of course, you can explore and debug (X)HTML and CSS with the Firefox WebDeveloper extension or Safari’s Web Inspector. But they are a different and less fulfilling experience, even if they are free.

The user interface is composed of three primary areas:

  • Web View – displays the web page just like a browser,
  • HTML View – outlines the web page’s structure and the (X)HTML markup
  • CSS View – reveals the CSS rules and the cascade.

Screengrab of Views

You switch between Browser Mode and Selection Mode using the Selection Mode menu item (from the View menu). While the Browser Mode is handy, you’ll spend most of your time in Selection Mode. And that’s what makes Xyle Scope such a powerful inspector. In Selection Mode, clicking a web page element in the Web View visually highlights the element with a Formatting Box and displays only the corresponding (X)HTML markup and applicable CSS rules in the other views. This Formatting Box exposes the margin and padding rules applied to the element.

Screengrab of the Formatting box

In the HTML View, you can navigate the document’s (X)HTML tree structure just as you would navigate in a Finder window displayed as columns. Selecting an element in the hierarchy displays only the (X)HTML markup corresponding to that element and highlights that element in the Web View, enabling you to focus on a specific piece of code. The code can be displayed in several styles, including a Block Filter style highlighting the structure of the page without letting the details be a distraction.

Screengrab of Block Filter style highlighting

In the CSS View, Xyle Scope exposes the CSS cascade even for complex sites where the CSS rules can come from multiple files and/or the style element or attribute. It gracefully handles @import stylesheets and highlights well-known filter hacks too.

Screengrab of the Cascade menu

Xyle Scope aggregates all the rules and determines the cascade, just like a browser. Applicable CSS rules are displayed in order of specificity and overridden CSS properties are dimmed to improve clarity. You don’t need to parse and visualize the cascade in your mind any more. You can even tweak existing CSS values in the CSS View and see the impact.

Screengrab of the CSS View

But wait, there’s more

If the basics aren’t enough, Xyle Scope has some more, less obvious features tucked away:

  • Working through a monster web page? Use Selector Matching or Smart Groups in the Selector List to filter the (X)HTML and CSS. Selector Matching reveals the paths to all (X)HTML elements matching that selector. Smart Groups filter CSS rules into predefined groupings such as Layout or Typography.
  • Want to jump from your browser to Xyle Scope quickly? Create a handy bookmarklet to send URLs directly to Xyle Scope.
  • Don’t like the default formats for displaying (X)HTML or CSS? Edit the formatting templates directly since CSS is baked into Xyle Scope’s core and is used for formatting.
  • Want to snag an (X)HTML or CSS snippet? Use the Copy menu item in the HTML pane or Control-click the CSS pane to grab just what you’re looking at.
  • Impatient with a mouse? Drive Xyle Scope from the (X)HTML tree in the HTML View with your keyboard.
  • Have a spanking new Intel Mac? Run native. Xyle Scope is a Universal application.

Can it be improved?

Though you can easily alter CSS values and immediately see the effect in the Web View, Xyle Scope is not a CSS editor. You can’t directly add or delete selectors or rules. While it integrates with your (X)HTML and CSS editor of choice, adding an integrated feature or providing a companion application to do just that would be an excellent improvement to an already solid application.

So what are you waiting for?

No matter your level of mastery of (X)HTML and CSS, Xyle Scope is a gem that should be in every web developer’s tool kit. If you’re still skeptical then download the 10-day free trial version and test drive it yourself. But after our test drive we think Xyle Scope can make you a happier and more productive web developer.