Using Page Inspector to Decompose Your Web Application in .NET 4.5

Introduction

In my previous article I provided a basic introduction to Page Inspector and in this article we will learn how to use the Page Inspector to decompose and troubleshoot a Web Application.

But first of all we should know why we use Page Inspector. By having an integrated browser experience within Visual Studio the Page Inspector bridges the gap between the browsing tools of ASP.Net and the source code.

To use the Page Inspector to decompose and troubleshoot a Web Application use the following steps.

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.

Your Page Inspector will look like this:

Step 2

In this article we will fix the unmatching value items and change the color for the Template Headers. For this first click on the Inspect Button  present at the lower left hand side of your Page Inspector Page.

Step 3

Clicking the Inspect Button will lead you to the inspect mode, now you need to hover over the element to be fixed. As you hover over the elements you will see that it's coding will be opened on the right side of Page Inspector. Here I click on the "Contact" button.

As we hover over and click we can see the Source file in the exact location where the Dawn element was generated. We see that the <li> tag is missing in the case of the "Contact" button.

Step 4

Now, we will add the <li> tag at the source file of "Contact".

Step 5

We see that if we make the changes in the file the Page Inspector instantly gives the feedback about the browser and the Source Code being out of sink or changed.

When the Page Inspector notifies us that the browser and Source Code are are out of sink or changed, we can simply use the "CTRL+ALT+Enter"  tab to save the files and refresh the browser without ever leaving the editor.

Step 6

Now, for the second task we will inspect the headers in the template simply by clicking on the Inspect button    and then selecting the "Home Page" in the Header Template.

Step 7

By using the CSS tools we can change the color property value to the value that we find suitable. For this first click on the "Trace Styles" and then Change the Color depending on your convenience.

Step 8

Now click on the rule to open the CSS file of the selected rule for faster interaction. Here I had selected the ".featured hrgroup.title".

As you click on the "featured hrgroup.title" you will see that on the right side it's coding is opened now you can make changes here.

Now choose color.

As you do the changes again you will see that the Page Inspector will provide the feedback about the browser and the Source Code being changed. Now, again you press "CTRL+ALT+Enter" to save the changes.

Step 9

Finally, we can use the  tab to see all the files that compose the current page. The "Files" view indicates the Server Side Files for rendering the current page. E.g. in this image below, we can see the current page has been rendered by the partial outputs from "Defaul.aspx" and "File.master".