Developers who build Web pages that they have to analyze or debug are in for a pleasant surprise if they download and install the Internet Explorer 8 beta, especially if their pages are built programmatically. That's because this version of the popular Web browser from Microsoft includes a set of developer tools designed to expose the internal representation of a Web page from the browser's point of view. Internet Explorer 8 beta's development tools let you inspect individual attributes, select individual objects on a Web page, determine why particular CSS rules apply to individual elements, examine markup element box model attributes, preview various document compatibility modes, and more.
These tools are currently included in the current IE 8 beta, so all you need to do is hit the F12 key or go to the "Tools" menu and select "Developer Tools" entry to bring them up. Once they're up and visible, IE's developer tools can run in a separate window, or you can pin them to the browser instance that opened them. This comes in handy when you have several IE tabs or windows open, because you can use the pin feature to associate a separate instance of developer tools to each such tab or window.
Internet Explorer's Browser Mode and Document Mode
IE 8 beta lets you manipulate its browser mode or document mode. This changes the user agent string it uses to identify itself to Web servers. It also changes the browser's version vector, which can be applied to conditional HTML or CSS comments to select different CSS, markup, and script blocks. The browser mode instructs the browser to behave in native IE 7, native IE 8, or IE 8 compatibility mode (which means it runs like IE 8 but acts and presents itself as IE 7 to sites). Finally, you can change IE's document mode, which alters page rendering without changing how the browser presents itself to external servers. You can use this to determine which document mode works best with your page. Once you know what document mode works best, you can put in meta tags to tell IE to use it. Changing the browser mode actually refreshes each page with a different agent string.
Outlining Web Page Objects
One of IE 8 beta's most interesting developer tools features is the Outline menu which permits you to highlight various sets of objects on a Web page. Choosing an element type from this menu instructs IE 8 beta to outline corresponding elements on the page. For example, if you choose the DIV elements entry in the menu, a green outline appears around all <div> elements in the Web page that's open in the tab or window to which the developer tools instance is associated. This provides a quick and easy way to explore HTML document structure elements (and their corresponding CSS or scripts) visually.
You can also use the "Select Element by Click" option (in the developer tools' "Find" menu) to select Web page elements one at a time with your mouse. If you move your cursor over an element, a blue box highlights its boundaries, after which you can click to select that element. This shows the underlying HTML markup in a code view window and the associated CSS attribute values in a style view window.
The developer tools built into IE 8 beta provide a nice set of powerful visual inspection and analysis tools to help you see what's going on inside your Web pages, particularly from inside IE 7 and IE 8 Web browsers. This is worth checking out for those whose programs build Web pages, and for those trying to learn more about how Web pages look and behave inside Internet Explorer.
Ed Tittel is a full-time writer and trainer whose interests include XML and development topics, along with IT Certification and information security topics. E-mail Ed with comments, questions, or suggested topics or tools to review.
