Your official information source from the .NET Web Development and Tools group at Microsoft.
The upcoming version of Visual Studio introduces a number of improvements focused on diagnosing your Web Applications. One of these is the new Page Inspector.
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. Using Page Inspector, you can inspect elements in the integrated browser and see exactly which file and lines of code generated that element (HTML literal content and server-side code). It also comes with a DOM Visualizer and CSS Tools in which you can modify the properties and see the changes in the browser in real time.
Page Inspector provides an Inspect mode that you can toggle by clicking the icon. When Page Inspector is in Inspect mode, you can hold the mouse pointer over elements in the web page, and Page Inspector shows you the following:
This gives you a complete picture of where in the source the HTML element was generated and what that element will look like in the live browser, instead of trying to figure out which file was responsible for rendering the markup. Inspection mode provides the easiest way to decompose and map from the browser to source files.
Most browser tools provide a sandboxed environment for HTML and CSS where you can change values, and the browser automatically reflects the changes. However, the changes are not persisted and the original source files are unaffected.
To bridge this gap, Page Inspector provides CSS mapping capabilities at the rule level. Clicking rules in the CSS tools grid opens the .css file in which the rule is defined and selects the complete rule. This makes it easy for you to get to where the rule is defined.
Page Inspector takes all the steps that are required in order to let you view the output of a Visual Studio web project (Web Application project or Web Site project). These steps can include:
Any of the following actions launches Page Inspector:
You will be able to see a complete list of all the files that together compose the current web page. When you are working with a complex site, you can use this feature to visualize the files that were used for building a particular WebPage.
Routing lets you map URLs to files. However, there is no file-to-URL mapping. Today if you want to see a specific file in the browser, you often have to reverse-engineer the existing routes, and possibly try different route parameters, in order to cause the application to respond with the file you want to see.
Page Inspector tries to construct a URL based on convention and navigate in the browser so that there is a one-to-one mapping between a file and a URL. There can be cases where the resulting routing will not result in the expected file or where invoking the View in Page Inspector command results in a file that shouldn’t be served (like a user control, partial view, or master page). In those cases, the tool still requires some level of URL mapping. Page Inspector will understand these cases and will prompt you to manually enter a URL (relative or absolute) that can be mapped to the requested file.
Page Inspector is aware of all the different files that compose the current page, and it can detect when any of these files change. It alerts you whenever the current page in browser is not in sync with the source files.
The site might be out of sync for many reasons. For example, you might have changed page code, changed a code component in the site, or changed a .css, .js, or HTML file. Page Inspector alerts you when it detects a change, and you can click the bar or press Ctrl+Alt+Enter. Page Inspector then performs whatever actions are required (for example, rebuilding the project or restarting IIS Express) and shows you the latest version of the file.
To generate the metadata that's required for some of its features, Page Inspector must instrument the project by adding the following setting to the <appSetting> element in Web.config file:
<add key="VisualStudioDesignTime:Enabled" value="true" />
When Page Inspector needs to make this setting, you are prompted so that project files are not changed without your consent. (This is similar to the message you see if Visual Studio needs to set debug mode in the Web.config file.)
You can use Page Inspector even with this setting disabled or missing. However, some features will not work, such as source selection mapping.
Page Inspector Developer Preview requires the following software installed on your computer:
Page Inspector is still in its early stages and we would like to hear from you!
Jorge Gabuardi Gonzalez
Web Platform and Tools
Looks like a promising IE Developer Tools integration with Visual Studio. Looking forward to trying this out.
It looks like Friebug integrated into Visual studio...now that is cool indeed.
i hope new Visual studio does have better Chart controls.
One of the things I'm annoyed about is that SuperPreview is not available with Visual Studio - its only comes with Expression Web. Any news on this being added as well?
Looking forward to have advance File upload control with progess bar. I am also looking forward to have advance grid like telerik.
Is it in the layout, or a partial, or is it an editor template, a display template, in the app_code folder, an html extension or a page? Hopefully this tool will help. Thanks Jorge! Looks promising.