Edit online

Debugging CSS Stylesheets

To assist you with debugging and customizing CSS stylesheets the Author mode includes a CSS Inspector view to examine the CSS rules that match the currently selected element.

This tool is similar to the Inspect Element development tool that is found in most browsers. The CSS Inspector view allows you to see how the CSS rules are applied and the properties defined. Each rule that is displayed in this view includes a link to the line in the CSS file that defines the styles for the element that matches the rule. You can use the link to open the appropriate CSS file and edit the style rules. Once you have found the rule you want to edit, you can click the link in the top-right corner of that rule to open the CSS file in the editor.

Figure 1. CSS Inspector View
There are two ways to open the CSS Inspector view:
  1. Select CSS Inspector from the Window > Show View menu.
  2. Select the Inspect Styles action from the contextual menu in Author mode.