Features of Page Inspector in ASP.NET 4.5

Introduction

In this article we will learn about a new majestic feature introduced in ASP.NET 4.5, "Page Inspector".

Visual Studio 4.5 has introduced a number of improvements for diagnosing your Web Application; one of them is "Page Inspector".

By having an integrated browser experience within Visual Studio the Page Inspector reaches the gap between Browsing tools of ASP.Net and the Source Code.

To use the Page Inspector in your ASP.Net Page use the following procedure.

Step 1

Right-click on your Project/Website and click the "View in Page Inspector". It will navigate the Page Inspector Browser to your Web Application.

Step 2

You can use this Browser to navigate to the various Web Pages in your Application. In the following you can see that when I click on "About" or "Contact", these pages are opened in the Page Inspector.

Step 3

You can use the "Home" button or the  icon to go back to your project root.

Step 4

Page Inspector also has Browser tools. Page Inspector comes with the Dawn Visualizer that displays the life of your Web Page and some CSS tools that will display the live CSS values. For this go to the left hand side in the Page Inspector, there you will see an arrow that is the Inspect mark.

Step 5

Click on this arrow mark and you will enter the Inspect Mode. In the Inspect Mode you can hover over the elements in your Web Page and the Page Inspector will map to the exact location of the resource file.

Step 6

Selection Mapping will work for the HTML content on the Server Side Code.

Step 7

If you want to try various styles for your Web Page simply Inspect the element and use the CSS tools to change the property value. For this click on the Trace Styles as shown in the following figure.

Step 8

Click on any of the CSS tools and you will see that you can also make changes here. As you change any of the values you will get the changes reflected immediately in the Browser, for example here I had change the background color to Black.