Developer Tools in Internet Explorer 8 Beta 2

In March I wrote about the Developer Tools in Internet Explorer 8 Beta 1 and outlined three key benefits:

[*]Integrated and simple-to-use[*]Provide a visual interface to the platform[*]Enable fast experimentation

Internet Explorer 8 Beta 2 brings the Developer Tools closer to realizing the full potential of these benefits with significant improvements to existing features and new functionality meant to make you more productive.

Profiling and Debugging JScript

Beta 1 introduced a JScript debugger that lets you easily debug Jscript within Internet Explorer. In Beta 2, we’ve made a few great improvements: it now supports Console.log, just-in-time debugging, and has better usability through changes like an improved file chooser.

However, the debugger only helps get your site working properly and you need to make sure your site works optimally. That’s why Beta 2 includes a built-in JScript profiler. Use it to build high-performance web applications in Internet Explorer by finding hotspots and comparing different design patterns. Simply press ‘Start Profiling’, perform you scenario, and press ‘Stop Profiling’ to view profile data for all JScript, including built-in methods.

Keep following the IEBlog for more details about these great features. You can also read our online documentation on script debugging and script profiling.

Working with HTML and CSS

While Beta 1 supported live editing of only HTML attributes, Beta 2 brings this functionality to all of HTML and CSS. With live editing of CSS, just click a property name, value, or selector, type a new value, and press ENTER.

If you need to change HTML tag names, reorder, or add/remove elements, use full-text editing. Press ‘Edit’ in the toolbar of the HTML tab to make the full HTML editable. Press it again to commit your changes and return to tree view. This uses innerHTML so the same rules about running script apply as if you made the changes through JScript with innerHTML.

Changes made in the tools last only until the page refreshes or you navigate away. While this lightweight editing is helpful, it also makes it easy to lose changes. Beta 2 lets you save the current HTML and CSS to a text file so you have a reference when updating your source. The data in the tools comes from Internet Explorer rather than your source and thus might contain changes beyond edits you made with the tools so the default file format is txt to prevent accidental overwrites of the original source. A good way to identify just your changes is to save the HTML from the page before and after your changes and use a tool like windiff.

Testing Compatibility

The Developer Tools have two menus for compatibility: “Browser Mode†and “Document Modeâ€. “Browser Mode†lets you modify how IE behaves as well as how it reports its version to servers and web sites. This lets you use IE8 to test what your site looks like in IE7 and what your site looks like for users in IE8 who pressed “Compatibility Viewâ€. “Browser Mode†affects the user agent string, version vector used when evaluating conditional comments, and the rendering mode.

“Document Mode†lets you test what your site would look like if you changed its rendering mode by using a different doctype or the meta tag.

You’ll also notice that the menus always display the current mode so the information’s available with zero clicks.

Simple to Use

From the start, we’ve worked to make the tools user-friendly. We made them part of every IE8 installation so you didn’t have to install anything extra, built per-instance script debugging so you don’t constantly find yourself in the ‘Advanced’ tab of Internet Options, and worked to reduce the clicks needed for common tasks. In Beta 2, we’ve made a few important changes that should make the tools even better.

If you’re like me, you love using the keyboard. Beta 2 adds extensive keyboard shortcuts for frequently-used functionality and uses common keyboard conventions so you become comfortable with the tools quickly. For example, F12 opens the tools, CTRL+E puts focus in the search fox, and F3 and SHIFT+F3 cycle through results. Check out the full keyboard reference to learn all the shortcuts.

Besides some polish to make the tools prettier (even devs appreciate a nice design touch here and there), toolbars within the tabs make access to common tasks fast, and syntax-highlighting throughout the tools makes everything easier to read.

You can pin the Developer Tools to the Internet Explorer window as you could with the Internet Explorer Developer Toolbar, but Beta 2 also lets you minimize in window. With the tools pinned, press the ‘Minimize’ button or CTRL+M to reduce the tools to only the menu bar to save screen space while retaining access to the menus and Browser and Document Modes.

Internet Explorer Developer Toolbar Features

As promised, we’ve included all the features you’re familiar with from the Internet Explorer Developer Toolbar, including the ‘Attributes’ list view and ‘Resize window’ functionality.

More Information

Keep watching this blog for more about the JScript tools and check out these articles for more information:

[*]Discovering the Internet Explorer 8 Developer Tools[*]Developer Tools: Script Debugging Overview[*]Internet Explorer 8 Developer Tools GUI Reference[*]Developer Tools: Script Profiler Overview[*]Developer Tools: Keyboard Shortcuts

John Hrvatin

Program Manager

edit: image resize

More...