xScope: Web Developer’s Toolkit

xScope Icon

xScope, from the guys at IconFactory, is a suite of on-screen tools for web and creative professionals that includes Rulers, Screen overlay, Loupe, Guides, Frame, and Crosshairs. The tools are meant to assist in the design and testing process, allowing you to measure and inspect your website or software program on-screen in real-time.


xScope RulerRulers let you position a translucent set of perpendicular rulers over any element on your display, and adjust the width and height giving you pixel measurements. The current position measurements change as your mouse moves, so you can get the coordinates of any element relative to, say, the top left of your website. This is really helpful in trying to determine the actual spacing of content and sidebars, for instance.

The ruler feature works well, and does very simply what many browser plugins and standalone applications can’t seem to get. It’s the tool from xScope I used the most in my testing.

Screen Overlay

xScope ScreensThe Screen Overlay gives you a window that lays over your browser and shows you the available content area of every major browser, IE and Mac. It includes IE 4+, NS4+, Safari, Firefox and AOL and all 3 popular sizes: 640, 800 and 1024 (and a custom size option, maybe for a WAP or iPhone site?).

Most people design their layout within constraints from the beginning, so while this tool is somewhat useful, it’s also a little overkill for most developers.


xScope LoupeI have tried out several loupe programs but the loupe in xScope is simple and effective. It shows you a super blowup (up to 600%) and tons of useful information including HEX and RGB color, Hue, Saturation, and X & Y coordinates (from the top left of the display). You can copy the current color, copy the blowup image, lock the current settings, or freeze the mac’s display – all without a button or interface on the loupe. Simple and elegant.


xScope GuidesThe guides do just what you think – they put vertical and horizontal guides on your display, just as with Photoshop or many other graphics applications. Only these guides are global – they stay on top of all your applications and are not clickable unless xScope is selected.

The guides are a feature I did see much benefit from using. One feature I think would make them very useful is measuring the distance between any two guides. That would allow you to create two guides based on elements on a web page and measure the distance between them, but that can be done with the ruler so it’s not a feature that is really missed.


xScope FramesThe frames are 1px thin boxes, just like the crosshairs only they are containers that you can draw to any width and height. You can get the exact dimensions of an element or frame content on a web page. You can make a frame an exact width and height using the frame wizard, and can specify the X and Y coordinates also.

One interesting feature of the frames is you can set the height of the frame based on a predefined ratio and the width. This is a great feature for video editors, as they could overlay a box and see what a 4:3 ratio video would look like cropped to widescreen (2:3 or 16:9).


xScope CrosshairsCrosshairs give you a simple, easy to see visual of the current X/Y coordinates of your mouse. You see the entire vertical and horizontal guide as a solid black line that tracks your mouse movement.

Used with the loupe, you could get the exact pixel coordinates of a dead pixel on your display, for instance.

Overall Opinion

xScope is a solid, well-built application for creative professionals who demand pixel-perfect accuracy. The suite has virtually every feature you could need to measure, troubleshoot and perfect your websites and software programs.

At only $16.95, with a free trial download, you can’t lose. Download xScope and give it a try.