Exercise 2: Using Page Inspector in WebForms Projects

In this exercise, you will learn how to preview and debug a WebForms solution using Page Inspector. You will first perform a brief lap around the tool to learn the Page Inspector 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 features in the context of a WebForms project that shows a photo gallery.

  1. Open Visual Studio 11 and open the PageInspector-WebForms-Begin.sln solution located in Source\Ex2-WebForms\Begin from this lab’s folder.
  2. In the Solution Explorer, locate Default.aspx page, right-click it and select View in Page Inspector.

    Figure 24

    Selecting a file to preview in Page Inspector

  3. You will notice that Visual Studio will prompt for permission before enabling the tool in your project. Click YES.

    Figure 25

    Enabling Page Inspector in a Visual Studio project

    To generate the metadata that is 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. You can use Page Inspector even with this setting disabled or missing. However, some features will not work, such as source selection mapping.

    Web.config

    <add key="VisualStudioDesignTime:Enabled" value="true" />

  4. The Page Inspector window will show Default.aspx.

    Figure 26

    The first contact with Page Inspector

    The Page Inspector tool is integrated in your Visual Studio environment. The inspector contains an embedded browser, together with a powerful HTML profiler that will show the selected code. Notice that you do not have to run the solution to see how your pages look.

    Note:
    When the width of Page Inspector browser is less than the width of the opened page, you will not see the page properly. If that happens, adjust the width of the Page Inspector.

  5. Click the Files tab in Page Inspector.

    You will see all the source files that are composing the rendered Default page. This is a useful feature to identify all the elements at a glance, especially when you are working with User Controls and Master Pages. Notice that you can also navigate to each of the files.

    Figure 27

    The Files tab

  6. Click the Toggle Inspection Mode button, located at the left of the tabs.

    This tool will let you select any element of the page and see its HTML code and .aspx source.

    Figure 28

    Toggle Inspection Mode button

  7. In the Page Inspector browser, move the mouse over the page elements. While you move the mouse pointer over any part of the rendered page, the element type is displayed and the corresponding source markup or code is highlighted in the Visual Studio editor.

    Figure 29

    Inspection mode in action

    Note:
    Do not maximize the Page Inspector window or you will not be able to see the preview tab showing the source code. If you click the element in Page Inspector when it is maximized, the source code of the selection will appear but it will hide the Page Inspector window.

    If you pay attention to Default.aspx file, you will notice that the portion of source code that generates the selected element is highlighted. This feature facilitates the edition of long source files, providing a direct and fast way to access the code.

    Figure 30

    Inspecting elements

  8. Click the Toggle Inspection Mode button (), located in Page Inspector tabs, to disable the cursor.
  9. Select the HTML tab to display the HTML code rendered in the Page Inspector browser.
  10. In the HTML code, locate the list item with the Koala link and select it.

    Notice that when you select the code, the corresponding output is automatically highlighted browser. This feature is useful to see how an HTML block is rendered on the page.

    Figure 31

    Selecting an HTML element in the page

  11. Click the Toggle Inspection Mode button to enable Inspection Mode and click the navigation bar. On the right of the HTML code, in the Styles pane, you will see a list with the CSS styles applied to the selected element.

    Note:
    since the header is a part of the site layout, Page Inspector will also open Site.Master file and highlight the segment of code affected.

    Figure 32

    Discovering styles and source files of a selected element

  12. With the toggle inspection pointer enabled, move the mouse pointer below the menu bar and click the blank half circle.

    Figure 33

    Selecting an element

  13. In the Styles pane, locate the background-image item under the .main-content group. Uncheck the background-image and see what happens. You will notice that the browser will reflect the changes immediately and the circle is hidden.

    Note:
    The changes you apply on the Page Inspector Styles tab do not affect the original stylesheet. You can uncheck styles or change their values as many times as you want, but they will be restored after refreshing the page.

    Figure 34

    Enabling and disabling CSS styles

  14. Now, click the ‘yourlogo here’ text on the header using the inspection mode.
  15. In the Styles tab, locate the font-size CSS attribute under the .site-title group. Click the attribute once to edit its value. Replace the 2.3em value with 5em, and then press ENTER. Notice that the title looks bigger.

    Figure 35

    Changing CSS values in the Page Inspector

  16. Click the Trace Styles tab, located in the right pane of Page Inspector. This is an alternative way to see all the styles applied to the selection, ordered by attribute name.

    Figure 36

    CSS styles tracing of the selected element

  17. Another feature of Page Inspector is the Layout pane. Using the inspection mode, select the navigation bar and then click the Layout tab on the right pane. You will see the exact size of the selected element, as well as its offset, margin, padding and border size. Notice that you can also modify the values from this view.

    Figure 37

    Element layout in Page Inspector

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:

  1. Run the Solution from Visual Studio, or deploy the page on the web server.
  2. In the browser, open the developer tools you use, or simply open the source code and the styles and try to match the issue.
    • To find the files involved, you’d have used the “Search” or “Search in files” features with the name of the style classes.
  3. Once the error is detected, stop the Web browser and the server.
  4. Clear the browser cache.
  5. Return to Visual Studio to apply a fix. Repeat all the steps to test.

As there is no real WYSIWYG in ASP.NET WebForms, some style issues are detected on a later stage, after running or deploying. Now, with Page Inspector, it is possible to preview any page without running the solution.

In this task, you will use the Page inspector for fixing some issues the Photo Gallery application. In the following steps, you will detect and quickly fix some simple styling issue in the header.

  1. Using Page Inspection, locate the Log In link at the left side of the header.

    Notice that the link is not displayed at the expected place on the right. You will now align the link to the right and restyle it accordingly.

    Figure 38

    Log on link positioned on the left

  2. With Toggle Inspection Mode selected, select the Log In link to open its code.

    Notice that the link source code is located in the Site.Master file, not in the Default.aspx page which is the place you might look in first place; you have been placed directly in the correct source file.

  3. The page is using the LoginView control in the same way it is used by default in the Web Application project template. To make it look nicer, remove the brackets between the Log In and Log Out controls.

    Figure 39

    Brackets Removed

    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.

  4. In the Page Inspector browser, click the bar located below the address bar to save the changes and reload the page.

    Figure 40

    Reloading the page

    The Log In link looks nicer without the brackets, now, you will move it to the right side. To do this, you will locate the styles being applied to the Login section and update it to align its content to the right.

    Figure 41

    Reloading the page

  5. In the Styles tab, locate and click the <section> #login item, which is the HTML container for the link.

    Notice that Site.css opened and the corresponding style is selected.

    Figure 42

    Selecting the CSS styles

  6. Uncomment the text-align attribute in the highlighted code by removing the opening and closing characters (/* */) and save the Site.css file.

    Notice that the page inspector will prompt again for showing and refreshing.

  7. In the Page Inspector browser, click once on the bar located below the address bar to reload the page.

    Figure 43

    Moving the Log In link to the right

  8. Finally, you will change the header title. Instead of searching for the ‘your logo here’ text in all the files, use the inspection mode to click the text and get to source code that generates it.

    Figure 44

    Finding the site title

  9. Now you are in Site.Master, replace the ‘your logo here’ text with ‘Photo Gallery’. Save and update the Page Inspector browser.

    Figure 45

    Photo Gallery page updated

  10. Finally press F5 to run the app the check out all the changes work as expected.