Inspect Box Model of an Element Easily with XRAY

Have you ever wanted to know the exact size of a certain element in a web page like the padding, the margin, the position and so on? Usually you can get the info using a web inspection tool; most browsers have built-in tools to help you do this. Alternatively, you can use Firebug, which is also a pretty popular web tool. When things get complicated though, perhaps you need to fall back on a tool like XRAY.

XRAY is a free cross-browser tool that enables you to see the box model for any element of a web page right in your browser. Unlike other complicated web inspecting tools, XRAY focuses on giving you complete information of the box model of the element.

Getting Started

XRAY is a bookmarklet. To use it, drag XRAY to your bookmark bar of your favorite browser. XRAY is available for IE6+, Webkit- and Mozilla-based browsers like Safari and Firefox.

Just like other bookmarklets, XRAY can’t work if SSL protocol (HTTPS) is applied.

Inspecting Elements

To begin the inspection, open any web page you want to inspect, make sure it has fully loaded, and hit the XRAY bookmark. You’ll get a new pop up box in your browser. This box will display all the information about the element you have selected.

Let’s use my inspection of the XRAY homepage as an example. Say I want to know the box model information of the following element.

I click on XRAY in the bookmark bar, and select the element. This gives me the element’s name, id, class, hierarchy, position, padding, border and margin.

To close the box, just hit the X button on the top right corner of the box or refresh your page to exit the tool.

Final Thought

Aside from its advanced box model inspection function, XRAY doesn’t provide you with the information commonly available in other web inspection tools, like the style or DOM. Regardless, it’s still quite helpful and easy-to-use tool for day-to-day usage.