Beginning Ajax With ASP.NET (2006).pdf

Debugging
Although this section of the chapter is not intended to be a tutorial on usage of the toolbar, some of the
toolbar’s functionality is worth noting here.
The entire structure of a web page can be navigated using the structural elements of the page, using the
tree view display of the toolbar. Each textual, structural, or style-based element can be selected, and its
properties displayed for examination or manipulation.
Complex web pages can be difficult to navigate, and so can locating a particular element that a developer
may be concerned with. Selecting the Find➪Select Element by Click menu option of the toolbar
allows an element to be clicked on in the web page concerned, and the element itself will be highlighted
within the toolbar’s tree view display. The element’s properties and styles can then be manipulated and
examined as required.
One simple but useful feature for developers is the ability to resize the browser window according to
standard screen resolutions. Quite often, a developer will be required to ensure a web site/page is displayed
suitably within a minimum of screen resolution (for example, a site must display correctly at a
minimum screen resolution of 800 × 600). Selecting the Resize menu option from the IE Developer
Toolbar menu presents a list of resolutions that may be selected, which will cause the browser to redisplay
in the selected resolution. This is an easy way for a developer to test a site at varying screen resolutions
without having to continually change the display resolution of their system.
Firefox
When Firefox is installed, an option is provided to install a set of developer tools. Selecting the option
to install these tools provides the user with a menu option Tools➪DOM Inspector. Selecting this menu
option will display a window that has a similar look and feel to the IE Developer Toolbar discussed previously
(see Figure 13-20).
Figure 13-20
349