Effective web development with Visual Studio 2012: Page Inspector

In any web project, there is often a problem of changing old pages, controls, page layout, markup, and so on. It is easy to keep in memory the entire structure of a web project when you have a small number of pages in a project. Another thing is when there are hundreds of such pages, and they are formed on the basis of templates, master pages, controls and other controls embedded in them.

To understand this, sometimes confusing, page rendering system can be very difficult. This is especially true for professionals who have just begun work on a complex project or who have got the old project for support.

To address this problem, Visual Studio 2012 has added a new Page Inspector tool that allows you to explore the web pages of your project, not just as a resultant markup on the client side, as the Internet Explorer Developer Tool or Firebug does, but with reference to the server side code which generates this markup.

Page inspector

If you launch Visual Studio 2012 and load any project with a web application (you can create a new one based on MVC4), then in the toolbar you will find an element allowing you to select a browser to launch your web application (Figure 1).
')

Fig.1. Choosing a browser to launch a web application

Among the list of browsers installed on your system will be the new Page Inspector element, which allows you to run applications for more detailed research than is possible in any of the browsers.

By selecting Page Inspector in the list, you can run your application for execution. Instead of a browser, it will be launched inside the UI of the development environment (Figure 2).

Comment. In pre-release versions of Visual Studio 11, to run Page Inspector, a change (automatic) to the web.config file was required to add a single parameter. In Visual Studio 2012 RC and beyond, this change is not required.

Fig.2. Launched Page Inspector

Please note that our application was launched inside Visual Studio 2012, which provides additional tools for working with a web page.

The most important function of Page Inspector is the ability to inspect pages, as the Developer Tool in Internet Explorer does, for example, but unlike IE, along with useful information about markup and layout, we get information about how this markup was generated, where in the project, in which file and in what piece of code.

For example, we need to know where the string "Log In" is generated in order to replace it with the string "Input". Depending on the complexity of the project, there may be dozens of components from different files on your pages. Here and in our project there is a layout file, a page file and a control. To quickly find the right place can take a lot of time.

Page Inspector allows you to find the necessary code in a few moments. Just click on "Inspect" and hover over the line "Log in". All the necessary code in the required component, in the required file will immediately appear in front of you (Figure 3).


Fig.3. Source Code Search

We only need to make changes to the code. Page Inspector automatically serves these changes and invites you to refresh the page inside the browser (Figure 4).


Fig.4. Request to refresh the page

By refreshing the page, you will make sure that you have made the correct change (Figure 5).


Fig.5. Modified line on page

Comment. In Visual Studio 2012 RC, all Page Inspector work is asynchronous, without blocking the main UI of the development environment, which makes working with it much more enjoyable.

Inspection of server code is a very useful feature. You can very easily explore the layout and construction of your pages. For example, let's define how the basement of our site is built. To do this, we just need to hover the mouse over it (Figure 6).


Fig.6. Work with the basement site

As you can see, all the code responsible for our basement is highlighted in the server code of the project, which allows us to quickly make the necessary changes in the right place.

Work with page text

One of the innovations in Page Inspector in comparison with intermediate versions of Visual Studio 11 was the support of text selection on the page with the synchronous selection of this text in the server file code (Figure 7).


Fig.7. Work with the text of the page, selection

This allows you to quickly select a section in the code relating to a specific text and to perform certain actions with it.

Work with CSS

Working in Page Inspector with HTML and CSS resembles the same work in tools like Developer Tool or Firebug. However, even here the Page Inspector has a significant advantage: it allows you to automatically find all applicable styles for the examined page element in the code of the CSS file on the server side.

When working with CSS styles, there is also the problem of multiple files and styles that override each other. What is the fastest way to find the file in which CSS you need to make changes

For example, imagine that we need to change the color of the inscriptions "Register" and "Input" (modified by us earlier) to one of the colors used in the markup (red?). With the help of the inspector we select the necessary element and from the bottom we get the CSS styles that apply to it. Go to the Trace Styles tab and you will find all the final styles for our element (Figure 8).


Fig.8. Item Styles

So far everything looks the same as in Firebug. We are interested in color, so expand the color element and go to the last value, which overrides all previous ones and applies to the element on the page (Figure 9).


Fig.9. List of style values

The next step makes Page Inspector special. If you now click on one of the style definitions, you will instantly go to the CSS file on the server that generated this definition (Figure 10).


Fig.10. Search server style definition

We only need to specify the color we need for our elements on the page. Thanks to the new Visual Studio 2012 - integrated color picker to make it even easier (Figure 11).


Fig.11. Select a color from the list of colors defined in the CSS file

At the request of Page Inspector we will refresh the page and make sure that the changes have been made successfully.

Work with HTML

For greater efficiency, Page Inspector allows you to track the resultant blocks on the page itself (Figure 12) by marking code.


Fig.12. Tracking blocks per page

This function, in addition to understanding where one or another markup code is rendered, makes it possible to obtain data on its resulting dimensions.

Conclusion

This article describes one of the most interesting innovations in Visual Studio 2012 for effective work with the markup code of web applications on the client side. Unlike tools like Firebug and Developer Tool, Page Inspector knows everything about your server code and will tell you how and where this or that piece of page came from, instantly transferring you to the server code to the right place.