How to view and edit the layout
The Layout tab of DOM Explorer shows the CSS box model for the selected element. You can use this visual representation of the box model to quickly identify property values. You can also change any value on the Layout tab. Changes you make aren't permanent. They're lost when you stop debugging.
Tip
If you don’t want to stop the debugger, you can make changes to your source code and then refresh your app using the Refresh Windows app button on the Debug toolbar.
To use DOM Explorer to modify aspects of layout that aren’t shown in the box model, see Quickstart: Debugging apps (JavaScript) and How to inspect CSS rules.
Viewing and editing the layout
In this example, we select a list element in the Split App template, interpret the box model values that are on the Layout tab, and then change one of the property values.
To view and edit the layout
In Visual Studio, create a new Windows Store app built for Windows using JavaScript that uses the Split App project template.
Select Simulator in the drop-down list that's next to the Start Debugging button on the Debug toolbar.
.png "Running in the Simulator")
Press F5 to run your app in debug mode.
Tip
After the app appears in the Simulator, position the Simulator side-by-side next to Visual Studio. This allows you to immediately see the results of your selections and of changes you make to CSS styles.
Switch to Visual Studio and click Select Element in DOM Explorer (or press Ctrl + B). This changes the selection mode so that you can select an item by clicking it, and brings the app into the foreground. The mode reverts back after a single click.
Tip
You can also select HTML elements directly in DOM Explorer. For more info on selecting elements, see Quickstart: Debugging apps (JavaScript).
In the Simulator, hover over the groups in the home page, so that both the group image and the group title are outlined in color. For this demo, hover over the third group. The outlined group image and title are shown here.
.png "Selecting a DOM element")
Click the highlighted group and image to select it. DOM Explorer automatically selects the corresponding IMG element. The element selected in DOM Explorer looks like this:
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" src="data:image/png;base64, ..." data-win-bind= "src: backgroundImage; alt: title"></img>Click the Layout tab. This tab shows the dimensions of the selected element, as shown here.
.png "Layout tab of DOM Explorer")
This view provides some useful information about the element:
The dimensions of the element in the innermost box, which typically correspond to CSS height and width properties.
The Padding, Border, and Margin boxes show values of 0 pixels, which suggests that the corresponding CSS properties are probably not set. For example, CSS margin-left, margin-top, margin-right, and margin-bottom properties are probably not set.
Tip
To see how the properties are applied, click the Styles tab and look under the <div> inlined rule under inherited styles. You can see the height and width properties are set here.
In the Layout tab, double-click 0px at the top of the Margin box.
Use the Up arrow key to increase the margin-top value to 10px and press Enter. The updated margin appears in the Simulator, and also in the Styles tab under the inlined rule. You can also type in new values instead of using the Up or Down arrow keys.