Export (0) Print
Expand All

Page Inspector (Visual Studio)

Page Inspector is a web development tool with an integrated browser and browser tools. The browser renders a web page (HTML, Web Forms, ASP.NET MVC, or Web Pages) directly within the Visual Studio IDE. Having the browser in the IDE lets you see the rendered output and its source side-by-side. When you use the Page Inspector Inspect feature to select any element in Page Inspector's integrated browser, the source of the element and its corresponding Cascading Style Sheets (CSS) are highlighted. This feature can help you find and fix errors in HTML and CSS code that might otherwise be hard to find. Page Inspector also has browser tools that you can use directly within the Visual Studio environment.

Page Inspector requires the following:

  • Visual Studio 2012.

  • The .NET Framework 4.5.

  • A web application that targets the .NET Framework 4 or later.

  • For full functionality, Internet Explorer 9 or later (Page Inspector hosts the current version of Internet Explorer in Visual Studio).

  • JavaScript must be enabled in Internet Explorer. For more information, see How to enable scripting in your browser.

For more information, see Page Inspector Error Messages.

To

Do this

View a project or project file in Page Inspector

Right-click the project or file in Solution Explorer, and then choose View in Page Inspector from the shortcut menu.

Run a project and view it in Page Inspector

In Solution Explorer, select the project. From the drop-down list of browsers in the Visual Studio menu, choose Page Inspector, and then click the green arrow to run the project.

Map elements back to their exact location in source

In the tools pane of Page Inspector, click Inspect. Move the mouse pointer over an element in the Page Inspector browser. The corresponding markup is highlighted in the source file and in the HTML and Styles panes.

Find the source of a CSS rule

Click a CSS rule in the Styles or Trace Styles panes. The rule is highlighted in the source style sheet file.

Save changes to source and refresh the Page Inspector browser

Press CTRL+ALT+ENTER, or click the Update Bar.

Make Page Inspector the default browser for debugging

From the drop-down list of browsers in the Visual Studio menu, choose Browse with. In the Browse With dialog box, choose Page Inspector, and then choose Set as Default.

Make Page Inspector one of multiple browsers for debugging

You can choose Page Inspector to be one of multiple browsers that can be launched simultaneously when you press F5 or CTRL+F5. For more information, see the Multibrowser Support section of ASP.NET 4.5.1 and Visual Studio 2013.

The Inspect button lets you easily map elements back to their exact location in source.

To put Page Inspector into inspection mode, click the Inspect button on the Page Inspector tools pane. In inspection mode, when you hold the mouse pointer over any part of the rendered page, the corresponding source markup or code is highlighted, and the corresponding source file is also highlighted in Solution Explorer. Conversely, when you select markup in the source, the corresponding output is highlighted in the Page Inspector browser. For more information, see Using Page Inspector in ASP.NET MVC or Using Page Inspector in ASP.NET Web Forms.

Note Note

The Inspect button works as a toggle key. When inspection mode is active, the Inspect button is surrounded by a thinly dotted blue line.

The remaining UI elements in the bottom panel of the Page Inspector user interface contain browser tools that are similar to the F12 tools in Internet Explorer. For more information about the F12 tools in Internet Explorer, see Using F12 Developer Tools to Debug HTML and CSS.

The HTML pane view shows a tree view (DOM tree) of the current page as represented by the Page Inspector browser in memory. You can navigate the tree directly by using the mouse or the keyboard, view attributes, and make test changes to values. You can expand or collapse the properties of an element in the DOM tree by clicking the small arrow next to each parent element.

In inspection mode, as you move the mouse pointer over the page in the Page Inspector browser, the markup for the chosen element is highlighted both in the HTML pane and in the source markup.

The HTML pane lets you make test changes to DOM element attributes and see the changes reflected immediately in the browser. Double-click any property or attribute in the HTML pane to edit it. To add an attribute, right-click an element and choose Add Attribute, or use the Attributes pane. These changes are not persisted and the original source files are unaffected. However, because the chosen markup is also highlighted in the source file, it is easy to see where the source is located, and edit and save the change.

When you edit a source file, the Update Bar in Page Inspector will appear and prompt you to press CTRL+ALT+ENTER (or click the bar) to save the changes you made and refresh the page in the Page Inspector browser.

Shortcut menu options in the HTML pane

Right-click an element in the HTML pane to access the following shortcut menu options.

Menu item

What it does

Add attribute

Adds a new attribute to a tag or an element.

Copy

Copies the tag and attributes to the clipboard.

Copy InnerHTML

Copies the InnerHTML content (child text, elements, and attributes) of an element to the clipboard.

Copy OuterHTML

Copies the OuterHTML content (child text, elements, and attributes) of an element to the clipboard.

For more information, see Using Page Inspector in ASP.NET MVC or Using Page Inspector in ASP.NET Web Forms.

The Styles pane displays the rules and styles for an element that you select in the tree view. It is grouped by the hierarchy of CSS rules and includes inherited and overridden attributes. The rule at the top of the list is the first to get applied to the selected element, while the rule at the bottom is the one that currently defines the style properties of a selected element.

To test changes to CSS, you can modify CSS properties in the Styles pane and see the changes reflected immediately in the browser. Double-click property values to edit them. You can clear and select the checkbox next to a property to see how its absence or presence affects the rendering of the page. These changes are not persisted and the original source files are unaffected. For more information, see the "Previewing CSS Changes in the Styles window" section in Using Page Inspector in ASP.NET MVC or Using Page Inspector in ASP.NET Web Forms.

To make a change in the source, click a CSS rule in the Styles or Trace Styles pane. Page Inspector opens the.css file where the rule is defined and selects the complete rule for you. When you edit the source, the Update Bar in Page Inspector will appear and prompt you to press CTRL+ALT+ENTER (or click the bar) to save the changes you made and refresh the page in the Page Inspector browser.

Shortcut menu options in the Styles pane

Right-click an element in the Styles pane to access the following shortcut menu options.

Menu item

What it does

Add New Rule

Adds a CSS rule.

Add New Property

Adds a CSS property.

Remove Item

Removes the selected item.

Copy

Copies the selected item.

Copy CSS Rule

Copies the selected CSS rule.

Copy CSS Property

Copies the selected CSS property.

The Trace Styles pane shows the same information as the Styles pane, but is grouped by properties in alphabetical order, rather than by rules. You might find the Trace Styles pane more convenient for troubleshooting than the Styles pane since you often know the name of the CSS property but not its parent element.

The Layout pane shows the box model for a selected element.

To see the box model for an element, click the Layout tab, and then click the Inspect button. Move the mouse pointer over the element in the browser—or, in the HTML pane, click an element to select it. The Layout pane shows you the exact size of the selected element, as well as its offset, margin, padding, and border size.

You can use the Layout pane to make test changes. To preview a change, double-click a pixel value in the Layout pane and edit the value. The changes are reflected immediately in the browser. These changes are not persisted and the original source files are unaffected.

The Attributes pane shows the attributes for the currently selected element.

You can use the Attributes pane to make test changes. Double-click an attribute value to edit it. You can use the Add Attribute and Remove Attribute buttons to temporarily add or remove attributes. The changes you make are displayed immediately in the HTML pane under the Page Inspector browser. These changes are not persisted and the original source files are unaffected.

The Files pane in the Page Inspector tools contains links to all of the source files that make up the current page. This feature is helpful because it shows you all related files at a glance. It is especially useful when you are working with partial views and templates, or with applications like Orchard or Umbraco.

To open one of the files in the Visual Studio editor, click the corresponding link.

When you change the page source, an update bar appears at the top of the Page Inspector browser. The Update Bar prompts you to press CTRL+ALT+ENTER or click the bar to save the changes and refresh the browser.

Show:
© 2014 Microsoft