Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Visual Studio 2012 Page Inspector

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [Visual Studio 2012 & One ASP.NET - Scott Hanselman, Principal Community Architect, Microsoft Corporation] Hi, this is Scott Hanselman. I wanted to take a second to show you some of the new tools inside of Visual Studio 2012 and ASP.NET. Today, Page Inspector. [Page Inspector - Scott Hanselman, Principal Program Manager, Microsoft Corporation] Page Inspector works in all aspects of ASP.NET, so you can use it with web forms or MVC. It doesn't matter. Let me jump into Visual Studio here. This is just a basic ASP.NET application. I can bring Page Inspector up by either right clicking and saying View in Page Inspector, or it shows up here in my browser menu alongside the rest of the browsers that are on my system. Firefox, IE, Page Inspector. I'll go ahead and run Page Inspector. You'll see that an integrated browser pops up inside of Visual Studio. On the lower left corner here we have a live DOM. This isn't the HTML source code but rather a live DOM showing what's happening in my browser. Notice as I hover over it, it's inspecting the elements, showing me exactly what I'm looking at. So here's this div. I can open that up, look at the nav section and look at individual items. As I click around, on the right side here I've got the CSS that's being applied to those, and I can turn things on and off live. This is a live DOM and a live CSS. Often in web development you'll find yourself wanting to know the answer to a simple question: What line of code made that HTML? I might have a complicated system with lots of partials and controls that I've built up over a number of months with a hierarchy. But if I just want to know what generated this About, I could go hunting around in my source code or I could click Inspect. Now as I move around, not only am I getting that live tracking— notice that all 3 windows are updating— I can see where the HTML happened, I can see the CSS applied to that HTML, but then on the right-hand side there I can see in the source code the actual line of code that generated that HTML. And it's moving from the controllers into the view, all around the application. If there were partial classes, I can see where that partial was generated and who generated that partial. Like in this instance here, if I hover over Register, that came out of the LoginPartial.cshtml while this link happened inside of a layout and this link happened in the About page. So there's 3 different source code files here, and I'm able to move cleanly between them. I can click on any one of them, start making a change. Notice that the Page Inspector says that there's been some changes. I can go and either use a hotkey or just click to refresh the browser. It will run that source code again, and I can see that that change has been updated. Notice even as I select on the left-hand side it's actually selecting the code that did that work on the right-hand side. Same thing applies with CSS. If I wanted to take a look, for example, at this About menu, I can see what CSS styles were applied, but I can also click on them and go directly to the CSS rule that applied that, make a change to that perhaps with one of the CSS features that we've got, like the Color Picker, and then hit Refresh and see the change immediately. That's the Page Inspector, and we really think that it fills a nice gap between the client-side tools that you're used to using and server-side debugging. We hope you enjoy it. [Microsoft] []

Video Details

Duration: 3 minutes and 53 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Oct 3, 2013

Visual Studio 2012 Page Inspector

Caption and Translate

    Sign In/Register for Dotsub to translate this video.