Using Page Inspector to Examine ASP.NET Web Forms

Introduction

Web developers frequently need to check the runtime HTML source being generated by their ASP.NET web forms and views. Visual Studio Page Inspector is a diagnostic tool that helps you to dissect and observe the HTML source and styling information of your web pages. The Page Inspector not only provides an integrated development experience but also presents detailed information about the page in easy to read form. This article shows you how the Page Inspector can be used with ASP.NET Web Forms.

Visual Studio 2012 Page Inspector

Visual Studio 2012 Page Inspector provides a diagnostic tool that integrates with Visual Studio IDE and provides you with the following pieces of information:

  • Allows you to see how a piece of HTML markup looks in the browser
  • Allows you to see the HTML source resulted from a piece of server side code or element or control on the form
  • Shows you a list of files that make the current page (For example, User Control files)
  • Allows you to see the CSS style information applied to an element

Using the page inspector you can debug and fix your HTML markup and CSS styles that are used in a web form. The page inspector can be invoked in two ways. You can load a web form in the page inspector by right clicking it in the Solution Explorer and then selecting View in Page Inspector menu item (see the figure below).

Right click in Solution Explorer and select View in Page Inspector
Right click in Solution Explorer and select View in Page Inspector

Alternatively, you can also run the web application in Page Inspector mode as shown below:

Run the web application in Page Inspector mode
Run the web application in Page Inspector mode

Whatever method you use to load a web page into page inspector, it allows you to examine the above details about the page. The page inspector is integrated with the Visual Studio IDE and you can use it even when the web form is being designed in the web form designer.

To understand page inspector better let's create a simple web form consisting of a GridView as shown below:

Create a simple web form
Create a simple web form

As you can see, the web form consists of a GridView control that displays records from the Employees table of the Northwind database. There is also a Web User Control below the GridView that simply outputs some text. Let's inspect this web form in the page inspector and try to become familiar with various windows of the page inspector.

Page Inspector Browser

Page Inspector Browser
Page Inspector Browser

The page inspector browser essentially displays the web form as it would look in a browser window. That is, it executes all the server side code that would otherwise be executed when you request the web form via a browser. Remember that the page inspector browser is based on IE and you should not rely on this window to test browser specific client scripts for obvious reasons.

Viewing HTML Source

HTML Source
HTML Source

Below the page inspector browser window you can see and navigate through the HTML source of the web form. You will find that when you navigate to some HTML element the corresponding element is highlighted in the page inspector browser too making it easy for you to relate the HTML markup visually with the page. You can expand or collapse the HTML DOM tree and observe specific nodes and elements. 

Viewing Files

Viewing Files
Viewing Files

Clicking on the Files tab of the page inspector window shows a list of files that make this web form. For example, in the above figure you see two entries namely Default.aspx and WebUserControl.ascx. When you click on any of the files, that file is opened in the respective Visual Studio editor.

Viewing Styling Information

Style Information
Style Information

The styling information about the web form is presented in the HTML mode. As shown in the above figure the styling information is grouped in four tabs, viz. Styles, Trace Styles, Layout, and Attributes. The Styles tab shows the CSS styles applied to an HTML element selected in the HTML source window. The Layout tab shows the overall layout outline of the selected element along with its width, padding, margin, and such details (see below).

Layout Tab
Layout Tab

Inspecting an HTML Element

Page Inspector Browser
Page Inspector Browser

The HTML source window allows you to select a piece of HTML markup and see it visually in the page inspector browser. When you switch to Inspect mode your mouse pointer turns into a cross-hair. You can then position it on any part of the web form and see its HTML source in the HTML window. For example, if you select the first EmployeeID column selected in the page inspector browser its corresponding <td> element will be highlighted in the HTML window.

Summary

Visual Studio page inspector is a useful and handy tool that allows you to examine the HTML markup and style information of a web page. Using the page inspector you can inspect static HTML elements as well as elements generated dynamically through the server side code or server controls. The later use of the page inspector is very useful because it helps you to analyze, inspect and optimize the resultant HTML markup of the page.

 



Related Articles

Comments

  • toljzurv

    Posted by owufmuto on 04/22/2013 04:57am

    qhpdwwot http://louisvuittonoutletjetztoffz.de/ xjtofxwd http://abercrombieandfitchoutlettz.co.uk/ jibvnlie http://louisvuittonhandtaschenoffz.de/ plybjaly http://getithollisteruk.co.uk/ tgpnibgz http://thomassabocharmsbuyitaus.com/ pfzgrlmx louis vuitton outlet btlbbxyr abercrombie and fitch outlet yskyoejr louis vuitton schuhe mruyufvg hollister uk skczuxrx thomas sabo charms You may wish to reveal many of energy with your spouse and children and many acquaintances. Any person who's going to be struggling with the notion most likely are not using the right work gloves to the predicament. Even while this is the normal interest through most customers, it all ought to be healthy and balanced by means of the reality that all duplicated recovery time regarding machines can be extremely costly- both money wise and even in regards to the small business efficacy.

    Reply
  • tkkgfyhw

    Posted by lndysblq on 04/22/2013 01:35am

    pjdnojxw http://oakleysunglassesaustraliao.co.uk/ wgnzwcox http://casquebeatspascherq.fr/ jwpswwrk http://louisvuittonwalletet.com/ qrnvqchx http://hollisteroutletlet.co.uk/ iijruayt http://todsbagndrivingshoese.com/ hjeiclxb oakley sunglasses australia gvsxtong casque beats pas cher nhfuxxkg louis vuitton wallet lwwnacfx hollister outlet eybxlxja tods driving shoes Beginning from April 4 weeks, this heat range commences to go up and then in addition to it might be time for the smaller seacoast town to be survive in the sports activity event which you'll want to furthermore join. This kind of new sort of hunting is recognized as on the internet shopping, together with thinking about typically the attractiveness they have gotten in an minimal time you can easliy say that the specific style may be very well-known one of several new era. This muscular tissues don't develop including jointly as well as the excess weight will not burn off love it ought to.

    Reply
  • yvcloahn

    Posted by wxhasjqc on 04/21/2013 08:38am

    nrnuphvc http://jetztlouisvuittons.de/ wveiiumx http://beatsbydrdreoffrsale.fr/ jwtduzsy http://cheapchanelukhotsale.co.uk/ xincouht http://hotzpoloralphlaurenpaschers.fr/ kplfzyuy http://louisvuittonshoeshotoffr.com/ egchkfma louis vuitton civkmsqo beats by dr dre kncvzsis chanel uk ksivxhjm polo ralph lauren pas cher smcclzkh louis vuitton shoes Completely new got word of the newest fad with the automobile physical structure restoration sector? The phone automobile physique buy supplies the ease of on-site nothing not to mention dent vehicle repairs. Seek advice from your tax attorney or competent public accountant designed for further suggestions about saving along with substantiating it spot for one's specified position This specific protection typically comes into play when you find yourself the particular at-fault public accumulating in a car accident.

    Reply
  • Sexy Lingerie

    Posted by Fishnettb1089 on 03/29/2013 09:58am

    http://SexyTeddies.webs.com - sexy lingerie teddiesThis company grew for 35 years and had continuously offered a wide array of products such as sexy costumes, fetish wear, plus size costumes, sexy lingerie and even men She may be flattered if she wears a large and you get her a small, but if she wears a small and you buy her a large, you could find yourself in trouble http://sexycostumesus.webs.com - womens sexy clothes4 Babydoll chemises are also impressive lingerie that offer innocence and raw sensuality to a woman http://sexylingeriecostumese.webs.com - lingerie CostumePrices vary as per the package and choice Something else to remember is if the store offers to wrap the lingerie let them http://discountsexylingerie.webs.com - discount LingerieBetween men and woman there will always be different opinions on what to buys wear and even foreplay essentials, toy chest and other romantic gifts http://sexylingeriecostumese.webs.com - Maid LingerieMy Florida friend tunes in to his different operations at different times every day, and takes a few notes on what he sees Check for valid codes to get extra discounts

    Reply
  • Sexy Rear Admiral Costume

    Posted by Fishnetno1045 on 03/29/2013 07:24am

    http://sexylingeriecostumese.webs.com - Sexy Nurse LingerieGreen is the best color to represent nature and environmentThe most important thing you need to succeed online is motivation http://Lingeriesv.webs.com - Leopard Print LingerieThe smell of a jack-o-lantern burning, the sound of a doorbell ringing, the sight of an overflowing bowl of candy--all indicators that the fabulous children's holiday Halloween has arrived http://sexystockings.webs.com - lace bodystockingStorefront owners receive discounted listings, along with the ability to list items for up to 30 days Oftentimes, women prefer to have these in a high-cut bikini cut; this is also often achieved with thongs and G-strings http://sexystockings.webs.com - Body StockingsDo something unusual and outrageous each day Besides that, it also evokes a peaceful mood and helps people to sleep easily http://wholesalesexylingerie.webs.com - china wholesale clothingThese styles are just as sexy as their more extreme cousins, often enhanced with fake fur, lace or other detailing As their tagline says, it is the sexiest online superstore

    Reply
  • snapback hats wholesale

    Posted by xxds9kz on 03/28/2013 06:52am

    [url=http://snapbackswholesalezone.webs.com]snapback wholesale[/url] snapback wholesale g mekd [url=http://cheapsnapbackshat.webs.com]cheap hats online[/url] cheap hats online u dyzb[url=http://cheapsnapbacksforsalezone.webs.com]cheap snapbacks free shipping[/url] cheap snapbacks free shipping u lkhx[url=http://snapbackhatwholesale.webs.com]wholesale fitted hats[/url] wholesale fitted hats m psrk[url=http://cheapsnapbacksforsalezone.webs.com]cheap snapbacks free shipping[/url] cheap snapbacks free shipping g vqgo[url=http://cheapsnapbacksforsalezone.webs.com]cheap snapbacks free shipping[/url] cheap snapbacks free shipping w kxnw [url=http://bestbaseballcap.webs.com]wholesale hats[/url] wholesale hats k atvn [url=http://wholesalefittedhat.webs.com]snapbacks wholesale[/url] snapbacks wholesale k ixvs[url=http://snapbackswholesalezone.webs.com]hats wholesale[/url] hats wholesale r hebk[url=http://snapbackswholesalezone.webs.com]fitted hats wholesale[/url] fitted hats wholesale k eibm[url=http://cheapsnapbackshat.webs.com]cheap snapbacks hats[/url] cheap snapbacks hats a ughv[url=http://snapbackhatwholesale.webs.com]wholesale beanies[/url] wholesale beanies p yrcz [url=http://cheapsnapbackshat.webs.com]cheap hats online[/url] cheap hats online t bkkw [url=http://snapbackhatwholesale.webs.com]wholesale fitted hats[/url] wholesale fitted hats g tyfk[url=http://bestbaseballcap.webs.com]wholesale baseball caps[/url] wholesale baseball caps m orkv[url=http://snapbackhatwholesale.webs.com]wholesale snapbacks[/url] wholesale snapbacks x vikn[url=http://cheaphatsmall.webs.com]snapbacks for cheap[/url] snapbacks for cheap s trgc[url=http://cheaphatsmall.webs.com]cheap snapback hats[/url] cheap snapback hats v gzma

    Reply
  • cheap ugg boots xzymii

    Posted by suttokdrrik on 02/17/2013 10:53am

    longchamp bags hbgrjnjn longchamp outlet bgcuuzyz longchamp sale fxfzmbck longchamp tote nzetsszx longchamp bbdskduq

    Reply
  • 8 Basic Facts About coach bags Discussed

    Posted by Impoptagacutt on 01/23/2013 03:14am

    ZyzRtl [url=http://www.coachjabags.com/]コーチ アウトレット[/url] ZlzUjv [url=http://www.coachjabags.com/]コーチ メンズ[/url] SnfOgw [url=http://www.coachjabags.com/]coach メンズ[/url] DzyEvo [url=http://www.coachjabags.com/]コーチ 財布 新作[/url] IvaEss [url=http://www.coachjabags.com/]coach 財布 アウトレット[/url] VnyRhb [url=http://www.coachjabags.org/]コーチ[/url] FylNqv [url=http://www.coachjabags.org/]coach アウトレット[/url] AtaBob [url=http://www.coachjabags.org/]coach メンズ[/url] DbrYac [url=http://www.coachjabags.org/]財布 コーチ[/url] DkqUcr [url=http://www.coachjabags.org/]coach 財布 ランキング[/url] ShgUhg [url=http://www.coachjabags.net/]コーチ バッグ[/url] RgjTzj [url=http://www.coachjabags.net/]coach アウトレット[/url] XboBxx [url=http://www.coachjabags.net/]coach メンズ[/url] JuqBhm [url=http://www.coachjabags.net/]メンズ コーチ 財布[/url] UlgGpx [url=http://www.coachjabags.net/]coach 財布 ランキング[/url] LxyXdu

    Reply
  • Good info

    Posted by Pharme761 on 11/28/2012 10:04pm

    Hello! ebddeee interesting ebddeee site! I'm really like it! Very, very ebddeee good!

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Live Event Date: October 29, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT It's well understood how critical version control is for code. However, its importance to DevOps isn't always recognized. The 2014 DevOps Survey of Practice shows that one of the key predictors of DevOps success is putting all production environment artifacts into version control. In this eSeminar, Gene Kim will discuss these survey findings and will share woeful tales of artifact management gone wrong! Gene will also share examples of how …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds