In March I wrote about the Developer Tools in Internet Explorer 8 Beta 1 and outlined three key benefits:
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.
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.
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.
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.
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 box, 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.
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.
Keep watching this blog for more about the JScript tools and check out these articles for more information:
John Hrvatin Program Manager
edit: image resize; Console.log to console.log; search fox to search box
PingBack from http://www.easycoded.com/developer-tools-in-internet-explorer-8-beta-2/
Great job John, just one question: how do I debug this:
<div id="test"></div>
...
t = document.getElementById("test");
while(true)
{
t.innerHTML += "a";
}
It blocks the whole of IE, not just one tab. Everything becomes unresponsive.
I thought IE8 was supposed to solve this problem?
All tested browsers (Chrome, FF, Opera) deal with this better than IE8 beta 2.
What am I missing?
Great guys,but remember! Add Download Manager,spellchecker to internet Explorer 8 !
When you inspect a HTML element, why does the CSS pane display every single property of the element's parents?
For example, even if you have an innocent SPAN tag selected, the dev tools will show irrelevant properties from they BODY tag.
It's also inconsistent when trying to disable certain CSS properties, it seems that some can be disabled (padding) while others can't (borders).
And what about adding new properties like in the old dev toolbar?
Thanks for posting this though.
***Off-Topic***
Just wanted t make an observation with IE8 and Google Chrome. The developers at Google chrome (3guys ?) has been successful in developing such an amazing browser in 2 years, that you guys have failed to achieve for so long.
I think this is the beginning of the end for IE. I really wanted to help IE 8 team so I subscribed to this blog, downloaded both IE8 betas and tested them. The only reason I wanted to help IE team because previous versions have helped break the web for lack of Standard compliance; as a developer this is very important and frustrating for me. But after using IE8 beta 2 since it's release, all I can say is that I am hugely disappointing. Bloated, broken, crashes randomly, takes minutes to load... I understand it's a beta. But so is chrome, have you guys used it? Seriously, please take an hour of your preciously time, sit back and enjoy the browser, and compare it with IE8 beta2.
I can't crash Chrome, even if I wanted to...
I think the only way IE8 will survive, is if it becomes open-source. You guys have already failed, in a major way. This is sad because, I was very attached to IE for the longest time.
Why is IE always playing catch-up and not leading the browser market with innovations?
Sorry for the off-topic, but I really badly want to know what you guys think about Chrome. Please, some developer from the team share your opinion about chrome.
Thanks.
@Pavs: Of course we've taken time to look at Chrome as well as the other browsers. If you've been a regular reader of the IEBlog, you know we don't generally comment on the other browsers; most of our readers come here to learn about IE. I will say that we are happy to have more people who love browsing helping to bring good ideas to the table. Competition makes us all better and ultimately improves the internet for users.
Tony - Thanks for commenting. I understand that it is not appropriate to talk about other browsers in a IE developers blog. But I needed to know this; as for the longest time I had this weird feeling that the IE developers don't use anything other than their own softwares, so they don't know how badly IE stands compare to others.
So it's good to know that you use/compare IE to other browsers, even if it's done privately, among your peers. Hopefully chrome will push you guys harder to build a better browser.
Good luck to you and your team!
Generally the developer tools in IE8 is great.
I have noticed one thing though. When using a javascript library (in this case prototype) the HTML view becomes useless because every attribute and function added by the library is being displayed.
It would be great if there was an option to disable the display of non-HTML attributes on the elements.
A bit of inspiration for this can be taken from Firebug. It keeps the html-view clean of non-HTML attributes.
Notice a little quirk
When compatibility mode is on, the user agent string sent is 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
But the user agent sent during an ajax is 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)'
It's still sending as MSIE 8.0
Any way to override user agent strings sent by ajax?
Is it possible to edit the tags under <head>?
@Pavs
Only three guys worked on Chrome?
That is truly impressive but it should be pointed out it based on webkit and so not quite three guys.
chk this.
Chrome Captures 1% Market Share In Just Nine Hours
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
@Mike I just double checked - My mistake. There were four developers. (http://www.wired.com/techbiz/it/magazine/16-10/mf_chrome)
Project started around 2 years ago June 2006. Webkit is the only part of chrome browser that's not developed by the chrome team. Chrome is more than webkit. I am finding it really hard to go back to FF as my default browser.
pavs, to crash chrome (not just the tab in question, making a mockery of the publicity materials), type
about:crash%
into the address bar
Chrome = refurbished Webkit.
If it took them 2 years to do a skin and seperate the tabs to processes, then Chrome is pretty sad.