Skip to main content

What is Visual Studio Page Inspector tool

Description

Page Inspector is a new tool that brings browser diagnostics tools into Visual Studio and provides an integrated experience between the browser, ASP.NET, and source code. It renders a web page (HTML, Web Forms, ASP.NET MVC, or Web Pages) directly within Visual Studio 11 and lets you examine both the source code and the resulting output. Page Inspector enables you to easily decompose a website, rapidly build pages from the ground up, and quickly diagnose issues. In this lab, you will explore how to use Page Inspector.

Overview

In this Hands-on Lab, you will discover a new tool to find and fix web page issues in Visual Studio - the Page Inspector.
Page Inspector is a new tool that brings browser diagnostics tools to Visual Studio and provides an integrated experience among the browser, ASP.NET, and source code. It renders a web page (HTML, Web Forms, ASP.NET MVC, or Web Pages) directly within the Visual Studio IDE and lets you examine both the source code and the resulting output. Page Inspector enables you to easily decompose a website, rapidly build pages from the ground up, and quickly diagnose issues.
Nowadays we have a number of Web frameworks that create flexible and scalable websites in a timely manner, such as ASP.NET MVC and WebForms. On the other hand, it gets harder to find issues on the pages because the IDE does not support the designer view in template-based pages and dynamic content. Therefore, these websites have to be opened in a browser to see how they appear to a user.
Web developers use external tools to find issues that regularly run in the browser. Then, they return to the IDE and start fixing. This back and forth activity among the IDE, the browser and the profiling tools can be inefficient, and sometimes requires a fresh deployment and cache cleaning each time you want to reproduce an issue.
Page Inspector bridges a gap in Web development between the client (browser tools) and the server (ASP.NET and source code) by bringing together the best of both worlds using a combined set of features.
Using Page Inspector, you can see which elements in the source files (including server-side code) have produced the HTML markup to be rendered in the browser. Page Inspector also lets you modify CSS properties and DOM element attributes to see the changes reflected immediately in the browser.
Prerequisites
  • Microsoft Visual Studio 11 Beta
  • Page Inspector (included in the Microsoft Visual Studio 11 Beta installation)
  • Internet Explorer 9
  • ASP.NET MVC 4 (only if you are performing exercise 1; included in the Microsoft Visual Studio 11 Beta installation)
Labels:

Comments

Post a Comment

Popular posts from this blog

ASP.NET e-Commerce website GridView with Product Listing

Introduction : E-Commerce web applications are everywhere these days, and many share a common set of functionality. In this article, I will show how to use the GridView and ListView controls to build a powerful product page with many of the features found on today's e-commerce sites. We'll build a bicycle store product grid using some free clip art bicycle images. The example files are user controls which can be easily added to a page. We're only using three images here to keep the size of the sample application small. In previously I was explained about  Sending Email from Asp.net With Dynamic Content  ,  How To Export gridview data to Excel/PDF , CSV Formates in asp.net C#  , How to print Specific Area in asp.net web page How To- Search records or data in gridview using jQuery  . A shopping cart application would require to display the products in a multi column grid, rather than a straight down list or a table. The each item in a product grid would have
Post a Comment
Read more

How to hide url parameters in asp.net

There are different ways to Hide the URL in asp.net , you can choose any one from bellow options . Previously I was Explained about the  Difference between Convert.tostring and .tostring() method Example  ,   Reasons to use Twitter Bootstrap , How to Register AJAX toolkit in web.config file in asp.net a) Using Post Method b) Using Of Session . c) URL Encoding & decoding process . d) Using Server.Transfer() instead of Response.Redirect() method (1)Use a form and POST the information. This might require additional code in source pages, but should not require logic changes in the target pages (merely change Request.QueryString to Request.Form). While POST is not impossible to muck with, it's certainly less appealing than playing with QueryString parameters. (2)Use session variables to carry information from page to page. This is likely a more substantial effort compared to (1), because you will need to take session variable checking into account (e.g. the
Post a Comment
Read more

Nested GridView in ASP.NET Using c# with show/hide

In This example shows how to create Nested GridView In Asp.Net Using C# And VB.NET With Expand Collapse Functionality. Previous post I was Explained about the   ASP.NET e-Commerce website GridView with Product Listing  ,  How To Export gridview data to Excel/PDF , CSV Formates in asp.net C# , Sending Email from Asp.net With Dynamic Content  ,  SQL Server- Case Sensitive Search in SQL Server I have used JavaScript to Create Expandable Collapsible Effect by displaying Plus Minus image buttons. Customers and Orders Table of Northwind Database are used to populate nested GridViews. Drag and place SqlDataSource from toolbox on aspx page and configure and choose it as datasource from smart tags Go to HTML source of page and add 2 TemplateField in <Columns>, one as first column and one as last column of gridview. Place another grid in last templateField column. Markup of page after adding both templatefields will like as shown below. HTML SOURCE < a
Post a Comment
Read more