Viewing the DOM of a previewed page

The DOM (Document Object Model) is a tree of objects represented by the elements in your HTML code.

To view the DOM structure of the previewed page:

• Click the magnifying glass at the bottom of the preview pane to turn DOM inspection on:

To browse the DOM structure:

• Move your mouse over the preview to reveal different parts of the DOM hierarchy
• Click on a highlighted element to "lock on" to it

The breadcrumb trail at the bottom of the preview pane will show the DOM path to the highlighted element

You can click on other segments of the trail to lock onto those elements:

To unlock from a "locked-on" element:

• Click the X button to the left of the breadcrumb trail

To turn DOM inspection back off:

• Click on the magnifying glass again