Using Page Inspector in an MVC Application in Visual Studio 11 Beta

1 Prerequisites

• Visual Studio 11 Beta Express for Web.

• Internet Explorer 9 or Internet Explorer Preview.

• JavaScript must be enabled in Internet Explorer. For more information, see How to enable scripting in your browser.

2 Creating a Web Application

First, you will create a web application that you will use Page Inspector with. In Visual Studio, choose File > New Project. On the left, select Visual C#, select Web, and then select ASP.NET MVC4 Web Application.

Click OK.
In the New ASP.NET MVC 4 Project dialog box, select Internet Application. Leave Razor as the default view engine.

The application opens in Source view.

Now that you have an application to work with, you can use Page Inspector to examine and modify it.

3 Using Page Inspector to Browse to a View

Next, you will view the MVC application with Page Inspector.
In Visual Studio 11 Beta, you can right-click any View in your project, select View in Page Inspector, and Page Inspector will figure out the route for you and display the correct file for you in its built-in browser.
In Solution Explorer, expand the Views folder and then the Home folder. Right click the Index.cshtml file and choose View in Page Inspector.

The first time you run Page Inspector, you will see the "Page Inspector not enabled" prompt.

Choose Yes to add the following entry to the <appSettings> section of your application's Web.config file:
<add key="VisualStudioDesignTime:Enabled" value="true" />
This setting enables Page Inspector to open relevant files for you when you are inspecting your application.

Note: Be sure to remove the setting before deploying your application to a production environment.

Tip: If your project is a web application project, you can configure a Web.config transformation that will disable this setting automatically whenever you deploy a Release build.  For more information, see How to: Transform Web.config When Deploying a Web Application Project.

By default, when Page Inspector launches for the first time, it is docked as a narrow window on the left side of the Visual Studio environment. Leave it docked on the left side and expand it to a width that is comfortable for you, or dock it in one of the tool areas on the top, bottom, or right:

Note: If you dock Page Inspector as a tab in the document area, any files that the tool opens will open as new tabs and will open on top of Page Inspector.

The top pane of the Page Inspector window shows the current page in a browser window. The bottom pane shows the page in HTML markup on the left, and some tabs on the right that let you inspect different aspects of the page. The bottom pane is similar to the F12 Developer Tools in Internet Explorer. (However, unlike the developer tools, you can use Page Inspector right within Visual Studio.)

In this tutorial, you will use the Page Inspector browser pane, and the HTML and Styles tabs to help you rapidly navigate and make changes to the application.

 

4 Inspection Mode and the Page Inspector Browser Window

Next, you will see how Page Inspector’s Inspection Mode works. In the Page Inspector window, click the Toggle Inspection Mode button.

To see inspection mode in action, move your mouse over different parts of the page within the Page Inspector browser window. As you do, the mouse pointer changes to a large plus sign, and the element underneath is highlighted:

As you move the mouse pointer, note that

·         The content in Source view changes to show the markup corresponding to the selected element on the page. The relevant markup is highlighted. If the source is in another file, that file is opened in Source view with the relevant markup highlighted.

·         The markup displayed in the HTML tab in Page Inspector also changes to correspond to the selected element on the page. In the HTML tab, the relevant markup is outlined.

·         The Styles tab shows the CSS rules relevant to the current selection.

5 Using Page Inspector to Find and Make Changes to Markup

Now you will see how you can use Page Inspector to find and make changes to markup or text whose location might not be immediately obvious.
Put Page Inspector in Inspection Mode and then scroll to the bottom of the home page.
As soon as you enter the footer area, Page Inspector opens the _Layout.cshtml file in Source view in a tab to the right of the other tabs and highlights the section of the layout page that you have selected. This shows you how Page Inspector can find and display content on a page that might actually come from a different file than the one you originally opened.

In the Page Inspector browser window, move your mouse pointer over the line with the copyright notice.
In the _Layout.cshtml page, the corresponding line is highlighted.

Add some text to the end of the line in the _Layout.cshtml file.
<p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application Rocks!</p>
Now, press Ctrl+Alt+Enter or click the Update Bar to see the results in the Page Inspector browser window.

You might have thought that the footer was on the Index.cshtml page, but it turned out to be in the _Layout.cshtml file, and Page Inspector found it for you.

6 Inspection Mode and the HTML Window

Next, you will have a quick look at the HTML window and how it maps elements for you.
Put Page Inspector in Inspection Mode.

Click the top part of the page that says “your logo here”. You are examining a particular element in more detail, so the display in the browser window no longer changes as you move the mouse pointer.
Now move the mouse pointer to the HTML window. As you move the mouse pointer, Page Inspector outlines the element within the HTML window and highlights the corresponding element in the browser window.

As before, Page Inspector opens the _Layout.cshtml file for you in a temporary tab with the corresponding markup highlighted in the <header> section:

7 Previewing CSS Changes in the Styles window

Next, you will see how you can use the Page Inspector Styles window to test and preview changes to CSS.
Click the Toggle Inspection Mode button.

In the Page Inspector browser window, move the mouse pointer over the “Home Page” section until the div.content-wrapper label appears.

Click within the div.content-wrapper section once, and then move the mouse pointer to the Styles window. Under the .featured .content-wrapper class selector, clear and select the checkbox for the background-color property.

Notice how the change previews instantly in the Page Inspector browser window.
Now, with the background-color property selected, double-click the property value and change it to red. The change shows immediately:

As you can see, the Styles window makes it easy for you to test and preview CSS changes before you decide to commit the changes to the style sheet itself.

8 Using Page Inspector and the CSS Color Picker to Make Style Sheet Changes

Next, you'll learn how to use Page Inspector to quickly find and change the CSS for highlighted text in the default application. In this example, you've decided that you don't like the blue highlighting and want to change it to another color.
Click the Toggle Inspection Mode button.

In the Page Inspector browser window, move the mouse pointer over the highlighted "videos, tutorials, and samples" text so that the CSS "span.highlight" label appears.

Click the highlighted text to select it. The corresponding CSS .highlight class selector appears in the Styles window.

Click the .highlight selector. This opens the Site.css file for the web application. The corresponding CSS for the selector is highlighted for you in the Site.css file:

Select and remove the line with the background-color property.
You will now use the new Visual Studio 11 Beta CSS color picker to choose a new color for the .highlight class background-color property.

Using the Visual Studio 11 Beta CSS Color Picker

The CSS editor in Visual Studio 11 Beta has a color picker that makes it easy to choose and insert colors. It has both a simple color bar and a "pop-down" picker that offers finer control.
The color picker includes a standard palette of colors, supports standard color names, hash codes, RGB, RGBA, HSL, and HSLA colors, and maintains a list of the colors you've used most recently in the document.
On the line where the background-color property was, type "bc" and press the down arrow once.
When you type the first character of each word in a hyphen-separated property like "background-color", IntelliSense filters the list for you to show only the properties that match:

Now type a colon. When you do, the full background-color property name is inserted, and the color picker bar appears:

To see how the color picker bar works, click its colors with the mouse pointer, or press the down arrow key and then use the left and right arrow keys to traverse the colors. When you visit a color, the corresponding value for the background-color property is previewed:

At this point, you could press Enter to select the value and then a semicolon (;) to complete the CSS entry. For now, go on to the next section so that you can see how the color picker pop-down works.

Using the Color Picker Pop-Down

When the color bar doesn't have the exact color that you're looking for, you can use the color picker pop-down.
To open it, click the double chevron at the right end of the color bar, or press the Down Arrow once or twice on the keyboard.

Click a color from the vertical bar on the right. This shows a gradient for that color in the main window. Choose a color directly from the vertical bar by pressing Enter, or click any point in the main window to choose with greater precision.
If there is a color on your computer screen that you want to use (it doesn't have to be inside the Visual Studio user interface), you can capture its value by using the eyedropper tool on the lower right.
You also can change the opacity of a color by moving the slider at the bottom of the color picker. Doing so changes color values to RGBA values because the RGBA format can represent opacity.
After you have chosen a color, press Enter, and then type a semicolon to complete the background-color entry in the Site.css file.

The Page Inspector Update Bar

Page Inspector immediately detects the change to the Site.css file (or to any file in the application) and displays an alert in an update bar.

To save all your files and refresh the Page Inspector browser, press Ctrl+Alt+Enter or click the update bar. The change in the highlight color appears in the browser:

Notice that you conveniently refreshed the Page Inspector browser right from within the Visual Studio environment. Using Page Inspector instead of an external browser lets you stay in the editor when you develop your web applications.

Summary

In this tutorial, you have seen how you can use Page Inspector to quickly find and make CSS and markup changes in an ASP.NET MVC application.