Monday, December 16, 2013

Page Inspector In Visual Studio 2012

The Page Inspector is a Web development tool that simulates a browser experience and runs entirely within Visual Studio. That is to say, you can select the Page Inspector to be your default browser instead of IE, Firefox, or Chrome. While running in debug mode, you can use the Page Inspector to alter CSS rules, change text, and make live changes to the DOM without having to switch back and forth between your browser and Visual Studio (see Figure 1)

Page Inspector provides integrated browser diagnostic tools that allow you to see where UI elements are derived from the underlying source code.

Let’s look at a very simple example. I created a new Project using the ASP.NET 4.5 to demonstrate New Feature Page Inspector

1) Right Click on solution and click on 'Page Inspector'

  • There’s a lot more to the Page Inspector, such as editing the DOM elements and CSS and seeing the results, realtime.

    Web Developer have to follow below steps for editing the DOM elements and CSS.
    • Change DOM element in aspx page 'Step 1' in above screen shot
    • Click on Message in the Page Inspector window 'Step 2' in above screen shot
    • Check the updated field in the browser 'Step 3' in above screen shot.

    How to Trace JavaScript Files, CSS Files using Page Inspector in Visual Studio 2012 ?


    Click on Files tab in above screen shot,where you can find all JavaScript and css files related to aspx webform.

    To trace css element click on Styles and Web Developer can Modify CSS realtime, add new css property run time.

    The Visual Studio 2012 Page Inspector tool is an awesome productivity enhancement functionality for web developers.It brings the entire debug experience inside Visual Studio Development environment and it’s navigation capabilities help reduce searching element , files and guess work to change elements.

    #page inspector visual studio 2012
    #The Magic of Visual Studio 2012 Page Inspector
    #visual studio 2012 page inspector
    #Debugging in Visual Studio 2012
    #Visual Studio 2012
    #Page Inspector
    #Web Applications

No comments:



Welcome to Rajesh Prajapati, blog.
Here you can find some useful code and information about, c#,, SQL Server, Web Service, Web Designing etc