Windows apps
Collapse the table of content
Expand the table of content

Live DOM panel (HTML)

In Blend for Visual Studio, the Live DOM panel shows the structure of the app that you’re designing and lets you select elements that you want to style. More importantly, Live DOM view automatically and dynamically updates as the state of the app changes, including elements declared in the HTML markup and elements that are dynamically generated.

The Live DOM panel displays each element within the DOM (Document Object Model). Each element is displayed relative to the html document node and to the other elements in the DOM. Each element is displayed by its HTML ID (or by the element name if no ID is assigned). If one or more classes are assigned to the element, the first class name is displayed in darker text after the element.

Icons are displayed before each element to indicate what the element is.

b5-pnl-livedom

b5-icn-livedom-listview   indicates a ListView control

b5-btn-livedom-appbar   indicates an AppBar control

b5-icn-livedom-button   indicates a Button control

b5-icn-livedom-rating   indicates a Review control

b5-icn-livedom-element   indicates an HTML element

The structure of a document can be significantly altered at runtime by JavaScript and browser rendering engines. For example:

  • Elements may be added or removed.

  • Relationships between elements may change.

  • New classes may be created and existing classes may be renamed.

  • Attribute values may be changed.

If an element has been dynamically changed, one of the following icons is displayed after the element to indicate how it was altered:

b5-icn-livedom-parser   indicates an element that is generated by the parser.

b5-icn-livedom-dynamic   indicates an element that is dynamically generated.

b5-icn-livedom-moved   indicates an element that has been dynamically moved.

Lice DOM fragment icon   indicates an HTML fragment.

You can change the visibility of elements from the Live DOM panel.

Click Hide 4230580c-9c6b-4144-a3cc-1c68ea7b8cf9 to turn off the visibility of an element.

Click Show aea22778-684f-4832-9cd2-7329cee0b699 to turn on the visibility of an element.

Show:
© 2017 Microsoft