Xyle scope 1.1.5
Cultured Code bills Xyle scope as “the world’s most innovative CSS analysis tool,” and that claim is no idle boast. Surfing the Web with it is like surfing with Safari (Xyle scope uses Safari’s rendering engine), but Xyle scope 1.1.5 simultaneously exposes the underlying HTML and CSS (cascading style sheet) source code. Highlight different parts of a page and you can immediately see the corresponding code, making it incredibly easy to decipher how the page was built. It’s a great way to learn CSS and an indispensable tool for web experts who want to dig under the hood.
Xyle scope’s outstanding interface – especially its integration with the web page – makes it unique. The document window presents three views: Web View (which displays the page as it would appear in your browser), HTML View, and CSS View. Web View offers two modes: a Browser Mode for surfing and a Selection Mode, which lets you highlight any HTML element. Xyle scope highlights the selected element in the other views, revealing the related HTML and CSS source code.
For example, a Hierarchical View displays the HTML in a tree structure. The HTML pane shows the code in several different styles, which are fully customisable. Using the Block Filter, you can display all the blocks within a page as a diagram, eliminating the content and focusing on the underlying structure (see screenshot). Click in the diagram and Xyle scope highlights the corresponding part of the webpage in the Web View. The CSS View shows the Cascade, as well as a selector (the CSS style definition) list. You can search within the HTML or CSS code using filters to pare down the results, making it a snap to navigate complex documents.
Nothing gives you more insight into the underlying structure of a web page than Xyle scope, but as an editor, it needs a little outside help (Cultured Code is developing a full-fledged CSS editor, which should be available by the end of the year). Click on an element of a web page in Selection Mode and all the rules applied to that element appear in the CSS Cascade pane. You can change CSS values and preview them on the fly within Xyle scope, even if the source is on the Internet and not on your hard drive (just edit the value and hit Return), but you’ll need to use an external editor to add or delete selectors.
You can save all associated style sheets, or copy the CSS for the current page to the clipboard. If you open the saved CSS file in your favourite editor, any changes you make are dynamically updated when you return to Xyle scope. You can copy the HTML and paste it into an HTML editor, but if you make changes, you’ll have to hit Reload when you return to Xyle scope to view them.
Xyle scope 1.1.5 is a solid analysis and troubleshooting tool, well worth its modest price. If you want to pull back the curtains and see how the wizards of CSS do their magic, Xyle scope is for you.