Document Outline: Web Projects

  • Article

Keyboard:  CTRL + ALT + T
Menu:  View -> Other Windows -> Document Outline
Command:  View.DocumentOutline
Versions:  2008,2010
Published:  11/28/2010
Code:  vstipTool0116

 

If you are working with web projects then you need to know about the Document Outline (CTRL + ALT + T).  Here is what it can be used for:

  • View the logical structure of your document.

  • Determine which elements are HTML elements and which ones are Web server controls.

  • Navigate to specific elements, in Design view and in Source view.

 

 

If you are working in Source view it will show you the body element and the child elements of the head element, the page directive, and any script elements and code elements.  I created a default web application in VS2010, added a couple of server controls, and switched to Source view.  Here is what the Document Outline looks like:

image

 

 

Notice you can clearly distinguish between the HTML and server controls.  It can be also be used to select items in the Source:

image

 

 

In Design view it essentially does the same thing and allows you to get a bird's eye view of the layout and can be used to select controls:

image

 

 

In these simplified examples you may not see the real value here.  If you have a scenario with many controls this makes getting to specific items very easy:

image

 

 

Additionally, many people like to use this feature with Split view so that it can show both Design and Souce:

image