Debugging HTML With Microsoft Developer Tools

When building a website, the last thing you want to discover is that the site doesn’t download quickly or correctly, or has bad links. If you’re constructing in Microsoft Internet Explorer (IE), fixing coding is simply a matter of learning how to debug with Microsoft Developer Tools.

The problem

For insight, we reached out to Ian Kellogg, a product design engineer at API Technologies Corp.’s Power Division. He says, “Older versions of IE were far harder to debug on. With really the only source viewer being notepad and a JavaScript console, it really limited what could be fixed without experimentation.”

The solution

Designer Nick Pettit points out in his debugging HTML and CSS post on the Treehouse blog that each problem is unique and will have its own debugging issue to solve. There are also what he calls basic “sanity checks” developers can turn to, such as checking for syntax errors and display problems, and searching for cross-browser issues.

The tools

As Rob Gravelle, designer and founder of Gravelle Web Designs, explains at, Microsoft Developer Tools for Internet Explorer are similar to Firefox’s tools. Their purpose is to help debug JScript code, the version of ECMAScript that runs on IE. He adds, “Code that runs perfectly in Firefox may or may not encounter problems in IE.” This is important, Gravelle says, because codes across different browsers don’t always match up. That’s why a website will look fine on one browser but not another. If you’re using IE11 (which you should be for security reasons), accessing Microsoft Developer Tools is as easy as pushing the F12 button on your PC keyboard. (You can also go to IE’s menu bar and select “F12 Developer Tools” on the “Tools” menu.)

How the tools work

There are eight developer tools in IE11’s F12 menu, including the Document Object Model (DOM) Explorer tool, which shows the website’s structure; the console tool, which handles the interaction with running code; and the debugger tool, which is a deeper examination of what your code is doing. “The debug console allows me to ‘inspect’ elements on the page for the calculated styles, which is useful for identifying why a website renders improperly,” says Kellogg. “Being able to see network responses makes some JavaScript functions easier to debug.” Another reason to update to IE11 is more streamlined use of the developer tools. For example, as technology writer Tim Buschtöns wrote in, users now can see changes made in real time when in the DOM Explorer window of the toolbox. This is a definite improvement over IE10, where users had to refresh constantly or get outdated code. Buschtöns notes that to catch up to other browsers, IE still needs some improvements in its developer tools; however, the F12 menu is more intuitive than anything that has been available in the past.

Future outlook

IE12 is expected to arrive soon. Will Microsoft build on its IE11 developer enhancements? It’s likely that developers can expect to see new features such as deep linking and open-source programming opportunities. It also looks like IE12 may be even more developer-friendly than past versions of IE. W

What are your favorite debugging tricks using Microsoft developer tools? Please share your tips in the comments section. Looking for some tips for debugging Microsoft.NET framework for mobile? See this post.