Internet Explorer Developer Tools | UA - User Agents

Standards Based Development

IE9 F12 Developers Tools Network Tab Summary in Action Screenshot

Internet Explorer Developer Tools (formerly known as Internet Explorer Developer Toolbar), are ie's debugging tools. Internet Explorer Developer Tools were first introduced in ie6, and came in the form of a toolbar for both ie6 and ie7; as of ie8 the feature has come pre-baked in. ie9 introduced F12 Developer Tools, a suite of on-demand tools, pre-baked, enabling quick debugging of front-end technologies, as well as performance problems tracking, to name a few.

Some of the actions Internet Explorer Developer Tools allows for are validating of css and html, previewing page layout at various resolutions, a ruler (measuring in pixels), viewing the document source code, viewing the dom source and the css selectors that are applied to the element, as well as enabling viewing the properties and styles of individual elements and also trace styles of elements to its declaration.

The toolbar includes a toggleable pane at the bottom of the window. The pane shows the structure of the web page; and for each structure, the properties and styles. It exposes its features through a menu hierarchy, and also includes toolbar buttons for quick access to features like clearing the browser cache and enable selecting elements by clicking in the rendered page, rather than navigating through the visual representation of the dom Tree.

Combat Inspector

is a JavaScript-based testing tool for analyzing a site while its running; it watches for patterns of interaction known to cause issues and reports them automatically. Useful for debugging swiftly, without (hopefully) first memorizing some documentation.

tooltip Compat Inspector User Guide Combat Inspector can be injected automatically using Fiddler by adding this snippet to your fiddler script

Testing/Developing in Multiple Versions of ie

Native Installs

Reverting to Previous Version(s)

If you have upgraded ie to anything more recent than the version that shipped with your operating system, follow these instructions to revert back to the original version of ie:

  1. Go to Control Panel
  2. Select Programs and Features
  3. Select View Installed Updates (on the left)
  4. Scroll down list of Installed Updates and located ie instances
  5. Right click on each instance, select Uninstall
  6. Upon uninstallation, restart your box (yay!)
  7. After restarting, open up ie
  8. Help Menu -> About Internet Explorer
  9. The version of ie previous to what was just uninstalled should appear in the About Internet Explorer dialog box
  10. How Do I Uninstall Internet Explorer 9 Beta?

Virtualization Tools.

evolt ie browser archive.

Tools for Older Versions of ie

Script Debugger for Windows NT 4.0 and Later

The Microsoft Script Debugger is a debugging environment that extends any Microsoft ActiveX® Scripting host application—for example, Microsoft Internet Explorer (ie) or Microsoft Internet Information Server (iis).

CompanionJS

Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE. The current version is 0.5.5. Companion.JS adds the following features to ie:

  • Detailed javascript error reporting (call stack and real file name where the error occured).
  • "Firebug"-like Console API feature.
  • Javascript console feature useful to inspect javascript objects at runtime.
  • A toolbar icon to open the Companion.JS panel.
  • Download the installer, guaranteed spyware/malware free and packaged with a straightforward and complete un-installer. (Download zipped intaller for people unable to download .exe files due to proxy limitations)
  • To be able to use Companion.JS you'll need to have a Microsoft script debugger installed. There are many cases where you already have this component install. To check if you need it see Installing Companion.JS for details.

IETester :: Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 ::

IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of ie10, ie9, ie8, ie7, ie6, and ie5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the installed ie in the same process.

Note for ie10 : ie10 is not available on IETester if it is not the default ie version installed on the system. So IE10 is only available on Windows 8 machines.

DebugBar

Internet Explorer Developer Toolbar

The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.

Internet Explorer Developer Toolbar Setup Wizard

Firebug Lite

firebug.lite.bookmarklet


javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

Alternatively, just include the script:


<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

References and Resources