HTML5 Zone is brought to you in partnership with:

I am former Microsoft MVP for Visual C# having 9 Year of experience in Microsoft.NET And other Microsoft Technologies. Please fill free to contact me at www.dotnetjalps.com Jalpesh is a DZone MVB and is not an employee of DZone and has posted 60 posts at DZone. You can read more from them at their website. View Full User Profile

Page inspector in Visual Studio 2012

03.04.2013
| 2748 views |
  • submit to reddit

In this blog post we are going to learn about a new feature of Visual Studio 2012 called “Page Inspector."

I have written  whole series about new features of Visual Studio 2012. This post will also be part of it. You can find all post related to Visual Studio at my Visual Studio 2012 page. Following is a link for that.

Visual Studio 2012 Feature Series

What is Page Inspector:

Page inspector is a great tool to inspect your page in Visual Studio itself. In other words, You can use Page Inspector as a browser and inspect your pages in Visual Studio itself. It’s really slow a common problem you can diagnose your page in visual studio itself. You can see where you UI comes from and even you can look into your page in HTML.


PageInspectorinVisualStudio2012

You can also directly run page via right click project like following.

PageInsepctorLoadinVisualStudio2012

Once you load Page Inspector it will load you web application in Visual Studio.

File loading in Page instpector Visual Studio 2012

Features in Page Inspector:

Page inspector provide lots of features.

Inspecting HTML with Page Inspector:

You can inspect your HTML will page inspector and you can see what is there in HTML of your page. For example, I have clicked on about page and you can see that in HTML code.

Inspect HTML with Page inspector in Visual Studio 2012

Inspect CSS and fix issues with CSS:

You also inspect your CSS and fix issues with css. Like following.

CSSinPageInspectorVisualStudio2012

Here I have selected Aside and you can H3 tag with that.

Conclusion:

Page inspector is a great tool and you can diagnose all thing about your HTML and CSS in visual studio itself. Earlier we have to use browser diagnostic tools like developer tool bar in IE or firebug in Firefox. But now with Visual Studio 2012 and Page Inspector you can have this in visual studio 2012 itself.

Hope you like it. Stay tuned for more..
Published at DZone with permission of Jalpesh Vadgama, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)