In a comment to a post last week, our friend Nate Beaty recommended we take a look at a program called Xyle scope. Glad we did!

Xyle scope is a tool for examining, analyzing, and tuning CSS. This is definitely a brilliant tool for anyone writing complex web pages with lots of complicated style sheet code. I actually remember trying this program out some time ago, but I didn’t love it at the time because of two major problems.

First, you have to have a wide display. On my 12” PowerBook, it’s worthless, because you need to be able to basically show two web pages side by side. That’s the computer I first tried it out with, and that explains why the utility eluded me.

Second, I didn’t understand the modes of the program. It has a mode where it acts like a regular web browser, and all of the CSS details are available for examination on the right side of the window. That’s nice, but it’s nowhere near as helpful as switching into selection mode. When you’re in selection mode you can click on page elements and the CSS details and inheritance hierarchy are shown on the right. Plus, the element’s margins and padding are shown visually on the page. Eureka!

Xyle scope is a great tool, but only if you have a rather wide computer display. Give it a try – it’s well worth the $15 they are currently charging for it.

Tagged with: