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.
Elements in the Live DOM panel
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.
.png "b5-pnl-livedom")
.png "b5-icn-livedom-listview")
indicates a ListView control
.png "b5-btn-livedom-appbar")
indicates an AppBar control
.png "b5-icn-livedom-button")
indicates a Button control
.png "b5-icn-livedom-rating")
indicates a Review control
.png "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:
.png "b5-icn-livedom-parser")
indicates an element that is generated by the parser.
.png "b5-icn-livedom-dynamic")
indicates an element that is dynamically generated.
.png "b5-icn-livedom-moved")
indicates an element that has been dynamically moved.
.png "Lice DOM fragment icon")
indicates an HTML fragment.
Element visibility
You can change the visibility of elements from the Live DOM panel.
Click Hide .png "4230580c-9c6b-4144-a3cc-1c68ea7b8cf9")
to turn off the visibility of an element.
Click Show .png "aea22778-684f-4832-9cd2-7329cee0b699")
to turn on the visibility of an element.