Inspecting rendered content in the browser can often be difficult, especially in large pages with a mixed bag of markup, code and text. Using your browser's View Source option shows all output in a linear fashion and causes you to have to dig through the source to find elements you want to inspect. The IE developer tools aims to make it easy to examine HTML, run script, apply styles, modify page content, etc... To access the IE developer tools, browse any page in IE and press F12 or choose IE Developer Tools from the Tools menu.
IE 9 Developer Tools Overview
The IE 9 developer tools gives you access to all the features you'll need to debug and inspect web pages.
- General Inspection/Browser Controls
- The menu has a ton of features that allow you to control the browser's behavior, such as dis/enabling of cookies, cache and viewing image information (paths, sizes, dimensions, etc...). There's also compatibility viewing modes so you can test out pages for multiple browser versions.
- HTML & CSS
- You can visually locate, search, investigate and modify HTML elements & CSS selectors. The HTML view gives a view of the HTML document as a tree, which is very useful in finding missing tag closures or nesting issues.Console
- You can run jQuery or JS scripts on the fly to manipulate elements on the page. Debugging is also available with breakpoints and
- Profiler & Network
- The IE dev tools have great support for finding script or elements that take up lots of resources and clog page load or run times.
Investigating HTML with the IE 9 Developer Tools
There's way too many tools in this toolbox to cover in a single blog post, but if you're new to using the IE 9 tools, there are a few things you can do to get working quickly...
The "Select Element by Click" feature allows you to click on any element in the page while the HTML tab contents display the code in a hierarchical fashion. The tools also place a border around the selected element verifying the selection. Additionally, the CSS, layout and attributes are shown in the right pane (depending on which tab is selected), so you get a complete view of the element.
Another great way to navigate HTML is to search. Enter any terms in the search box to look for text, attribute names & values and element names or types. A previous/next button set gives you the ability to move through each instance of the search term found and highlights each result.
These two ways to navigate HTML documents are way easier than doing Ctrl + F's and going on a FishingML(tm) trip with notepad.
Viewing Element & Image Information
Use the View and Images menus to toggle modes that display tag classes and ids, along with image dimensions, file sizes and alt text. When these options are turned on, an indicator displays next to the image or <div> tag showing the information about it.
Editing the local version of the page is available by navigating to any element, viewing the HTML tab, selecting the element in question (use the select element via click feature) then modifying the tag's attributes or attribute values or text. Use the Validate menu options to see what HTML or CSS validation errors the page contains. There is one caveat however; you need to choose the Local HTML or Local CSS items from the Validate menu and upload the file to validate unless you're browsing a page that has a public IP address.
Just being able to easily navigate and find HTML elements while inspecting the page at runtime is a huge boost to developer productivity, however, I'll adding more posts (and getting way more in depth) about the IE 9 developer tools in the near future, since there's a ton of helpful features.