Visual Studio 11 Developer Preview: Introducing Page Inspector
- Posted: Sep 14, 2011 at 4:24 PM
- 46,721 Views
- 15 Comments
Download
How do I download the videos?
- To download, right click the file type you would like and pick “Save target as…” or “Save link as…”
Why should I download videos from Channel9?
- It's an easy way to save the videos you like locally.
- You can save the videos in order to watch them offline.
- If all you want is to hear the audio, you can download the MP3!
Which version should I choose?
- If you want to view the video on your PC, Xbox or Media Center, download the High Quality WMV file (this is the highest quality version we have available).
- If you'd like a lower bitrate version, to reduce the download time or cost, then choose the Medium Quality WMV file.
- If you have a Zune, WP7, iPhone, iPad, or iPod device, choose the low or medium MP4 file.
- If you just want to hear the audio of the video, choose the MP3 file.
Right click “Save as…”
- High Quality WMV (PC, Xbox, MCE)
- MP3 (Audio only)
- Mid Quality WMV (Lo-band, Mobile)
- High Quality MP4 (iPad, PC)
- MP4 (iPod, Zune HD)
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. Page Inspector works with web projects in Visual Studio (Web Application projects and Web Site projects) and enables you to easily decompose a website, rapidly build pages from the ground up, and quickly diagnose issues. 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 what elements in the source files (including server-side code) have produced the HTML markup that is rendered to the browser. Page Inspector also let you modify CSS properties and DOM element attributes and see the changes reflected immediately in the browser.
Here, Jorge Gabuardi Gonzalez and Vishal Joshi, Program Managers responsibile for Page Inspector's design and implementation, tell us all about this new tool for web developers.
Download through the Web Platform Installer - http://go.microsoft.com/fwlink/?LinkID=227946
Release Notes - http://go.microsoft.com/fwlink/?LinkID=227938
Visual Studio 11 Developer Preview: http://msdn.microsoft.com/en-us/vstudio/hh127353
Comments Closed
Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation,
please create a new thread in our Forums,
or
Contact Us and let us know.
Follow the Discussion
What about css. It is highlighting html, But not the connected css. Are we thinking something about that as well.
Very cool.
Awaiting the arrival of Visual Studio 2011
@Mohit
Thanks for the feedback Mohit! We do have CSS selection mapping through our CSS tools. Clicking on the rules displayed will automatically open the CSS file and range select the rule so that you can immediately make the needed change, use the hotkey to update, and Page Inspector will save your file + refresh the browser.
Are there any other features that you think might be useful?
Awesome.
Like DreamWeaver's Live View feature that I have been waiting for.
Just fantastic. This will make things so much simpler. How about the same kind of thing, but for data? If it's a local SQL Server DB, show me where that data came from and what stored procs were involved, etc..., for example?
Way cool!
Brings some much needed improvements to debugging web pages. It was especially difficult to do when looking at code/forms that were written by someone else. Just don't know in which control/webpart etc to find a particular element. I like this.
Haven't hit the download link yet for the bits, but is this only available in VS2011 or can it also be installed as a CTP for use in vs2010 too?
I see myself using this quite a bit instead of the browser tools in Chrome, IE, Firefox.
I can see where this would be tremendously helpful in a previously developed project where you're having to dig through existing UI code and decipher what's going on.
Do you see people trying to use this as a WYSIWYG editor for building their pages and if so how good of a job will it do in formatting the markup?
It is an awesome tool. I wish I can also use this for SharePoint pages..
Have you ever seen how Skybound Sylizer works, Page Inspector is very similar only it is for HTML, and Stylizer is for CSS, if you could mimic something like that and be integrated in visual studio it would be a perfect tool for designers.
Please take a look at it, its a dream come true if you could do something similar inside VS.
Installing this preview caused problems, had to uninstall right away. Looking forward to trying again later.
See this thread:
Microsoft Developer Network > Forums Home > Visual Studio vNext Forums > Visual Studio Setup and Installation > MVC 3 killed VS web preview
Awesome! Much needed! Thanks.
How would this work with an Ajax call? Let's say you called a server side method that returns a string and you wrote that string to a div. If you select the string, would it find the source code where you returned it to the Ajax call?
@Nuno Sousa: it all depends on how you architected the project. For example, a) if your using templates then Page Inspector will map back to the template, b) if you get an response from the server that's in HTML format, we are investigating different options to map these requests even, c) if you get a JSON or XMl response from the server and generate everything dynamically (even the HTML tags), there's no way to know which line of JS injected elements in your DOM so we won't map to anything here.
Hope this answers your question! Let me know if you would like to chat more about this or have any ideas on feature requests!
@Mohit Thakral: or html design
is it possible to visually layout your relative divs and use there templates as views ? how ?
Remove this comment
Remove this thread
close