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.

inspect1.jpg

Your Page Inspector will look like this:

inspect2.jpg

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 inspect4.jpg present at the lower left hand side of your Page Inspector Page.

inspect3.jpg

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.

inspect5.jpg

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.

inspect6.jpg

Step 4

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

inspect7.jpg

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.

inspect8.jpg

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 inspect4.jpg   and then selecting the "Home Page" in the Header Template.

inspect9.jpg

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.

inspect10.jpg

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".

inspect11.jpg

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.

inspect12.jpg

Now choose color.

inspect13.jpg

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 inspect14.jpg 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".

inspect15.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all