Viewing the DOM by Using the DOM Explorer
The DOM Explorer window looks like what you see in Figure 1.
Figure 1: The DOM Explorer window
If you accidentally close the DOM Explorer window, you can bring it back by going to Debug -> Windows -> DOM Explorer -> Show All.
Figure 2: Choosing DOM Explorer -> Show All
We can see that the DOM Explorer window shows five tabs on the right side: Styles, Computed, Layout, Events, and Changes.
Figure 3: Viewing the DOM Explorer window with its five tabs
Figure 4: Viewing a DOM element
Understanding Property Calculation by Using the Computed Tab
You can understand how the properties for an attribute are computed by looking at the Computed tab, shown in Figure 5.
Figure 5: Looking at the Computed tab
The Computed Tab represents the final values of the attributes, so if something is not rendering correctly, we can see the deviation here.
To dive deeper into why the value is computed as shown in the Computed tab, you can click the Down arrow next to the property name to expand and display the calculation used. Figure 6 shows how the color property was calculated.
Figure 6: The color property being calculated
We can see it was defined in the ui-dark.css file and, because there were no overrides, it picked up the value defined in ui-dark.css.
Refreshing the App During a Live Debugging Session
Besides diagnosing property value calculations, the DOM Explorer also can be used to instantly update a property value and see the impact to the application before making changes in the code. All this can happen in a live debugging session.
To change a property in a live debugging session, go to the HTML file for the code, make the changes, and click Debug -> Refresh Windows App. This will refresh the application without needing to restart the debugging session.
About the Author
Vipul Patel is a technology geek based in Seattle. He can be reached at firstname.lastname@example.org. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.