Xyle Scope

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.

Rating

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Comments

0 comments on “Xyle Scope

  1. Pingback: I Blogged This » Blog Archive » ThinkVitamin.com is Live!

  2. Xyle Scope is a great software, but it needs a few more features like actual CSS/XHTML editing (at least on a simple level, as this is no app for amateurs). But I’ve purchased it right after it was launched on MacZOT and it’s been really helpful!

  3. Pingback: Non Stop Mac

  4. This tool is good, but why pay when you can get preety much the same thing for free with the firefox webdeveloper toolbar?

  5. Paul: I don’t think the Firefox WebDeveloper extension provides “pretty much the same thing.” It’s a different experience. It’s not as interactive and polished as Xyle Scope–and not as productive.

    For example, the WebDeveloper extension can provide the CSS that applies to an (X)HTML element using the “View Style Information” menu item in the CSS menu. But it shows you its interpretation of your code which means it doesn’t look like the CSS you wrote. You still have to parse Firefox’s generated CSS in your head to get back to the original CSS. In addition, Xyle Scope lets you tweak the CSS values in the cascade view when the WebDeveloper extension requires you to use a separate “Edit CSS” menu item.

    Xyle Scope is a more productive tool and many people are willing to pay a little for that productivity gain.

  6. To Rimantas, wow thanks for sharing the knowledge of this great firefox extension. Running GNU/Linux i can’t think of anything but firefox extensions for doing such things.

  7. This is a tremendous tool for everyone. I have used it in the past to troubleshoot several simple, but crippling, items in some CSS.

  8. Pingback: Vitamins for your web development : News : Cultured Code

  9. The Automatic formatting feature is particularly useful for us new developers. It fixes a lot of markup errors and helps a lot with validation.

  10. Yeah, that is pretty much the standard for all analysis and editor tools. If they don't automatically format it for you, than they will at least tell you the errors.