How to inspect CSS rules

Article
04/23/2013

When you're debugging apps, you can view and change CSS rules for selected DOM elements and their child elements.

The Style and Trace Styles tabs in DOM Explorer show the CSS rules that apply to a selected element. The rules are displayed based on their specificity according to CSS precedence rules. On the Styles tab, the rule at the top of the list is the first to be applied to the selected element, and the rule at the bottom is the last to be applied. When rules are applied, they override previously applied rules. The values of these rules are editable: Click a value, type a new value, and press Enter. A change appears in the app immediately.

The information on the Style and Trace Styles tabs is the same, but on the Trace Style tab, the information is grouped by properties and the rules appear below the properties. The properties are listed in alphabetical order, and the rules are again ordered based on specificity.

Changes you make in the Style and Trace Styles tabs aren't permanent. They're lost when you stop debugging.

Tip

To change source code and reload pages without stopping and restarting the debugger, refresh your app using the Refresh Windows app button on the Debug toolbar. For more info, see How to refresh an app.

Viewing and changing CSS rules

This example shows how to inspect CSS rules and debug a style issue. For this example, let's say that you want to change the color of a font used to display group titles in an app created in the Split App template.

To view and change CSS rules

In Visual Studio, create a Windows Store app using JavaScript in the Split App project template.
In Solution Explorer, open items.css. (You can find items.css in the pages folder.)

Replace the following CSS code:

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }

With this:

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }

This adds a style that specifies the color #ff6a00 (orange) for each item in the list. The CSS selector, .itemspage .itemslist .item, indicates a set of class names for DIV elements in items.html, which appear as nested elements in the live DOM. The item DIV element specifies the list items.

Select Simulator in the drop-down list that's next to the Start Debugging button on the Debug toolbar.
Press F5 to run your app in debug mode.

When the app finishes loading, look at the headings of the list items, such as Group Title: 1. The color is unchanged, so the attempt to apply an orange color to the titles didn't work. We'll figure out what went wrong and fix it by using the CSS tabs in DOM Explorer.

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. Here is the Select Element button.

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 title of the first item in the list, Group Title: 1, in the left panel of the home page. A colored outline appears around the title, as shown here:
Click the outlined title. DOM Explorer automatically selects the corresponding HTML element, which looks similar to this. (The ID will vary.)
```
<h4 class="item-title" id="_win_bind74" data-win-bind="textContent: title">Group Title: 1</h4>
```
When you select an element in DOM Explorer, the name of the current page appears in the Element Source field, to the right of the Select Element button. You should see items.html listed as the HTML file, like this:

When you select the H4 element in DOM Explorer, the Styles, Trace Styles, and other tabs now show the rules that are associated with the H4 element. The Trace Styles tab is shown here, with the color property opened:

This view provides useful information about the rules that are associated with the color property, such as the following:
- The first and second occurrences of the color property aren't being used. The strikethrough text indicates that the property is overridden by another application of the same property, in accordance with CSS precedence rules (specificity).
- The second occurrence of the color property shows an orange square, which helps to indicate that this is the color property that we added to the CSS file, items.css.
- The third occurrence of the color property is used to set the color of the items in the list. This value is set in items.css, but it's set specifically for the following CSS selector: .itemspage .itemslist .item .item-overlay .item-title.
Clear the check box for the third occurrence of the color property. Now, in the Simulator, you see that the color of the item titles all change to orange.
Select the second occurrence of the color property, and then double-click the property value rgb(255, 106, 0).
Use the keyboard to delete 106 and type 255, and then press Enter. The colors of the item titles in the Simulator all change to yellow.
To make changes to the source CSS file, click the items.css link on the Trace Styles tab. This opens items.css, where you can change the value of the color property. To refresh the app without stopping and restarting the debugger, click the Refresh Windows app button on the Debug toolbar.

Share via

How to inspect CSS rules

Viewing and changing CSS rules

To view and change CSS rules

See Also

Tasks

Concepts

Other Resources

Additional resources