• Rulers - On-screen rulers that measure distances and angles
• Screens - A dynamic view of smaller screens and web browser content areas
• Loupe - A magnifying glass that gives you a close-up view of your work
• Guides - Markers for precise horizontal and vertical alignment
• Frames - Markers for precise width and height alignment
• Crosshair - Measures and aligns locations on-screen

In addition, we've included sections with Tips and Tricks and Keyboard Shortcuts.

Note: This page is displayed the first time you run xScope. If you need to refer to it again, choose Help from the xScope menu bar.

Register xScope

You will be reminded periodically to register your copy of xScope. The demo version of xScope expires after you have used it for 40 hours.

To help navigate through the tutorial, we'll be using the toolbar:

If you don't see the toolbar on your screen for some reason, select Toolbar from the xScope Window menu. You can also press ⌘T (Command-T) to make the toolbar appear or disappear.

The ruler icon on the toolbar looks like this:

Click on this icon and you'll see two rulers appear:

There are several controls which allow you to quickly configure these rulers:

1. Adjusts the length
2. Rotates the ruler
3. Toggles the second ruler

When you are rotating the ruler, you can hold down the shift key and the position will be updated in 5º increments. Likewise, the shift key will adjust the length of the ruler in 10 pixel increments.

The preferences for Rulers allow you to display deltas on a rotated ruler. The deltas indicates the horizontal and vertical distance from the ruler origin (the point where the two rulers join) to the outer-most point on the ruler's edge.

When you are done with the ruler, you can click on its toolbar icon and it will be hidden until the next time you click on the icon.

When you click on this toolbar icon:

The Screens window will appear:

The controls are grouped into three tabbed sections:

1. Adjusting the screen size
2. Adjusting the Mac browser content area
3. Adjusting the Windows browser content area

The area for browser content can be toggled off individually or as a group. When you click on the tab with the Mac icon, all of the content areas for Mac browsers will be turned on and off. Likewise, the Windows tab will toggle all of the PC browsers. This makes it easy to switch platforms.

When you click and highlight one of the browser names, you'll include its content area in the window. Sometimes, selecting one of the browser names will not adjust the display of the content area— this is because the browser's content area is larger than what is already shown in the Screens tool. The displayed content area is always the minimum size available, allowing you to maximize your design to fit within a space common to all the selected browsers.

Note: The content areas for each of the browsers is for default settings. Users can (and do!) adjust their toolbars, start menus, and other UI elements. The content areas should be used as a guideline, not as an exact measurement.

Like the other xScope tools, you can click on the Screens icon again to hide the window. This is a convenient way to "clean up" before you go back into your development environment to make any necessary changes. When you're ready to test again, just click on the Screens icon and away you go!

After clicking on this icon, you'll see the following window appear:

By default, the Loupe tool follows your mouse. Getting a close-up view of your design is as simple as pointing at it. As your mouse travels across the desktop, you'll see the following information updated:

1. HTML color value
2. RGB color value (both as 0-255 values and percentages)
3. HSB color value
4. Mouse position

There are also several options for adjusting the Loupe. Under Loupe in the menu bar, you'll find options to adjust the magnification level (200% to 800%) and display grid or center lines.

The "Avoid Mouse" option causes the Loupe window to automatically move away from the current mouse position. This can be convenient when you are examining a large design—it keeps the Loupe's display out of the way.

It is often useful to copy the Loupe's information into another application. There are keyboard shortcuts to copy both the magnified image (⌃⌘C) and the color values (⇧⌘C) to the clipboard. You can adjust the format of the copied color value with preferences—the default is HTML.

Finally, it can be useful to either "freeze" or "lock" the Loupe tool. When you freeze the Loupe, you get a snapshot of whatever is currently displayed. Locking the Loupe continues to update the display, but ignores any further mouse movements. Locking is handy if you are making changes to a design and want to see an update without repositioning the mouse.

And, of course, you can easily toggle this tool on and off using the toolbar.

The Guides tool allows you to align elements on your screen regardless of the application you are using. Here is the tool in the toolbar:

The first thing you'll want to do when using this tool is to create a new guide. The following methods can be used:

Now that you have created some guides, you'll see these controls on each:

1. Removes the guide
2. Adjust the guide position

After you've created all of your guides, you can save them in a file for later use. There are menu options, under Guides in the menu bar, that allow you to save and open guides. When you open a file with guides, you have an option to add them to the existing ones on screen. By default, the current guides will be removed before the new guides are loaded.

You can manually remove your guides one at a time using the icon shown above. There's also a menu item to remove all guides.

One final note before we move onto the next tool: you can easily toggle the guides on or off using the toolbar. Guides are useful when you are aligning objects, but can get in the way of design work. A quick toggle is all you need to get your screen back to normal.

This tool is ideal for tasks where you are working with areas: creating a UI in a fixed window size, visualizing a CSS box definition, or any other measurement that requires an origin (x,y) and size (width, height.)

As with guides, there are several ways to create a frame:

Frames have several controls that allow you to manipulate the size and position:

1. Removes the frame
2. Adjusts the frame position
3. Creates a copy of the frame
4. Adjusts the frame size

You can use the menu options, located under Frames in the menu bar, to save and open files with frames. The option to add to the existing set of frames can also be used (it is turned off by default.)

The "Remove All Frames" menu item lets you quickly remove all frames.

And, if you weren't already getting bored with the similarity of frames to guides, the toggle feature in the toolbar can hide the frames.

The Crosshair that appears looks like this:

1. The guides (horizontal and vertical)
2. The position

By default, the Crosshair tool reports positions relative to the upper left-hand corner of the screen. You can, however, set any point as the origin—this allows you to get positions that are relative to an arbitrary point on the screen.

A good example of this is getting a point within the bounds of the ruler. If you have the Rulers tool displayed, you can select the "Center Follows Ruler" option from the Crosshair menu. After enabling this option, the position of the crosshair will always be relative to the point where the rulers are joined.

Alternatively, you can use ⌘0 (Command-Zero) to set the Crosshair origin using the current mouse position. After the new origin is set, the tool will display the offset from that position.

By default, the crosshair will appear no matter which application you are using. In some cases, this can be distracting; you can set a preference to hide the crosshair when xScope is in the background.

Finally, you'll find that the Crosshair tool is most effective when used in conjunction with the other tools. In addition to using it with the Rulers (as described above), try turning on the Loupe to get a close up of the current position. The Guides and Frames tools can also benefit from a crosshair—allowing quick position measurements without creating a new guide or frame.

Ruler redraw error If you have deltas turned on in the Ruler and make the length of the ruler shorter than the text, the text will be displayed outside of the ruler. The text will also be left on the display as you rotate the ruler. If this happens, just turn off the ruler and turn it back on to refresh the display.

For the latest information, please check the product and FAQ pages on our website.