Internet Explorer includes a powerful set of tools, known as the F12 developer tools. These tools provide many valuable features for developers, IT pros, and serious enthusiasts. Someone could probably write an entire book on the F12 developer tools. And Internet Explorer 9 adds some useful new features. If you haven’t started using the F12 developer tools, we suggest you hit F12 and give them a try. To get you started, here are some handy features you can use to dig deep into Web pages.
1. Pin the F12 Tools to the Page you are Working On
This is a simple, but helpful tip. Pinning the tools to the window you’re working on makes it easier to examine and tweak settings. After pressing F12 to open the developer tools, press Ctrl + P to attach the F12 window to the browser window displaying the site you are examining. As you browse from page to page, the F12 window will continue to update with the current page’s source.
Once pinned to the browser window, the F12 window can be minimized. When you do this, the F12 File menu is still displayed giving quick access to various tools and options.
2. Tweak HTML and CSS on the Fly
When you visit a page, you can use the F12 tools to view the HTML and CSS behind the page you’re viewing. More useful, though, is your ability to tweak this underlying HTML and CSS and see the results on the fly—even on sites that aren’t yours. In the markup window, you can highlight and type in new attributes, specify different image files to be displayed, disable blocks of CSS, and more to see how various settings will look. As you make these changes, the page in your browser window will update to reflect the new settings.
3. Quickly find the HTML or CSS for an Element
With the F12 developer tools open, you can browse around the Web like normal and the F12 window will continue to update with the current page’s source. But what if you want to examine a particular element, such as an image or text that is linked to another page, and you’re having a difficult time locating the exact element you’re interested in? You can press Ctrl + B to enable the Select Element By Click option. This allows you to click on the element and instead of activating the link and jumping to that page, the F12 tools will locate that markup. After you click, your pointer will return to normal so if you click something else it will activate the link. So remember to use Ctrl + B again if you want to select another element to examine.
4. Use the Ruler to Measure Distances
The F12 developer tools include a ruler tool that lets you draw in a line from one point to another to measure the distance. This can be handy for figuring out the specific details of a page layout. You can choose to have the ruler automatically snap to the x or y axis, which guarantees you are measuring a straight horizontal or vertical distance. And you can have the ruler automatically snap to elements, so that you are sure you are getting an exact measurement from one border to another.
5. View Elements on a Web Page
Internet Explorer 9 offers an easy way to view elements on a page, offering a visual way to see where certain elements are, to see how all the elements fit together, and so on. Press Ctrl + O to bring up the Outline Elements dialog. Here you can specify the elements you want to examine (such as IMG or DIV) and the color with which each type of element should be outlined. The effect is sort of like looking at the page with a WYSIWYG viewer. Want to see all the elements outlined for a complete overview of how the page is put together? Then use the asterisk as a wildcard for the Selector. Conveniently, these settings stay active as you browse from page to page until you disable them.
Tip by Matt Graven, TechNet Tips Editor.