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.
Requirements
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.
Basic Tasks
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 and Visual Studio 2012. |
Resources for Learning
Page Inspector for Visual Studio (MSDN blog)
Page Inspector - Introduction (video)
Using Page Inspector in ASP.NET MVC (tutorial)
Using Page Inspector in ASP.NET Web Forms (tutorial)
Web Developer Efficiency Tools in Visual Studio 2012 (video)
UI Elements
Inspect
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
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.
HTML
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.
Styles
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. |
Trace Styles
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.
Layout
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.
Attributes
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.
Files
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.
The Update Bar
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.