Exercise 1: Using Page Inspector in ASP.NET MVC Projects
In this exercise, you will learn how to preview and debug an ASP.NET MVC 4 solution using Page Inspector. First, you will perform a brief lap around the tool to learn the features that facilitate the Web debugging process. Then, you will work in a web page that contains styling issues. You will learn how to use Page Inspector to find the source code that generates the issue and fix it.
Task 1 – Exploring Page Inspector
In this task, you will learn how to use the Page Inspector in the context of an ASP.NET MVC 4 project that shows a photo gallery.
Task 2 – Finding and Fixing Style Issues in the Photo Gallery
How would you diagnose Web pages issues with previous versions of Visual Studio? You are likely familiar with web debugging tools that run outside the Visual Studio IDE, like Internet Explorer Developer Tools or Firebug. Browsers only understand HTML, scripting and styles, while an underlying framework generates the HTML that will be rendered. For that reason, you often need to deploy the whole site to see how web pages look like.
You had probably followed these steps when you wanted to detect and fix an issue in your web site:
As there is no real WYSIWYG in ASP.NET MVC, most of the style issues are detected on a later stage, after running or deploying the web application. Now, with Page Inspector, it is possible to preview any page without running the solution.
In this task, you will use the Page inspector and fix some issues the Photo Gallery application.