From Microsoft TechEd 2007: Web Development Tools for Internet Explorer
The information published in this post is now out-of-date and contains links which are no longer valid.
—IEBlog Editor, 18 August 2012
The following information is from a talk I presented on web dev tools for Internet Explorer at Microsoft TechEd 2007 in Orlando. It provides an overview of lightweight, in-browser web dev tools (a couple will be separate apps). I don’t go into great detail on each tool or get into overly complex debugging scenarios. However, I hope it provides some useful tips you can use immediately, as well as give you a starting point to investigate the tools further and find even more great features.
These lightweight tools don’t provide full-featured authoring or deployment environments like Visual Studio or Expression Web, but do offer significant benefits:
- They're accurate:
- Data comes directly from the browser so you see the browser’s interpretation of the site instead of your own or the tool’s
- Data reflects current site content rather than original since script may have modified the page
- They’re quick:
- No round-tripping between Internet Explorer and a separate application
- Immediately see changes
- They can improve your skills:
- Learn quickly because it’s easy to install, load, and then inspect any site, not just one you authored
These characteristics make it ideal for a few important web dev tasks:
- Planning/experimentation
- Debugging
- Declarative content (HTML/CSS)
- Script
- Network traffic
- Learning
With these tasks in mind, let’s get to the tools and demos. Some of these videos I created based on my talk and others are pointers to existing videos. Enjoy!
IE Developer Toolbar
Provides a variety of tools for quickly creating, understanding, and troubleshooting webpages.
Demos:
Planning/experimentation with the IE Developer Toolbar
CSS Debugging with the IE Developer Toolbar
IEWatch
Provides detailed information about the inner workings of webpages and tools to modify them.
Demos:
Edit CSS live (rapid prototyping) with IEWatch
Script debugging with IEWatch
HTTP Monitoring with IEWatch
HTTP Profiling with IEWatch
Other IEWatch demos
DebugBar
Provides powerful features to help you inspect the DOM, HTTP traffic, Javascript, and much more.
Visual Web Developer Express
Provides a fun, easy-to-use, easy-to-learn tool for new web Developers looking to build dynamic web applications.
Nikhil’s Web Development Helper
Provides a set of useful tools for AJAX/Javascript developers as well as ASP.NET and control developers.
Demo:
HTTP monitoring and better script errors with Nikhil’s Web Development Helper
Fiddler
HTTP debugging proxy for virtually any Windows application.
Demos:
HTTP Monitoring with Fiddler
HTTP Profiling with Fiddler
HTTP Debugging with Fiddler: AutoResponder and Fiddling
AjaxView
Client- or server-side proxy that instruments javascript to capture profiling data.
Demo:
JScript Profiling with AjaxView (see Cyra Richardson’s MIX07 talk for the rest of her presentation on script performance)
Developer Tools on Windows Marketplace
Even more developer tools to explore.
So that’s it! I hope these demos and tools help increase your productivity and make development more enjoyable. Keep following the IEBlog for more posts from me about web development tools. You can expect about one post per month on tools and naturally plenty of additional posts from other members of the IE team.
Thanks for reading and for developing on IE!
John Hrvatin
Program Manager
Internet Explorer
Comments
Anonymous
June 22, 2007
PingBack from http://www.ie7security.net/2007/06/22/from-microsoft-teched-2007-web-development-tools-for-internet-explorer/Anonymous
June 22, 2007
Sorry, IE guys. I see you're making quite an effort here, but 95% of us web devs - even those of us lucky enough to be in fairly well-funded companies - are not going to shell out even a penny for proprietary, closed-source development tools, just on principle. Not gonna happen. It's too bad IE just doesn't have a lightweight, open, built-in development framework like XUL. Even so, it's just not worth going to the trouble of developing web tools if you're going to charge for them. Not worth it! So don't bother!Anonymous
June 22, 2007
David, these tools appear to all be free.Anonymous
June 22, 2007
Nevermind, some of them are free - not all of them.Anonymous
June 22, 2007
Hi David, IEWatch has a license fee and DebugBar has a license fee for commercial use. The rest of the tools I demo here are free. Thanks. JohnAnonymous
June 22, 2007
The IE Developer Toolbar is fairly neat and is a very welcome addition to IE. The ideal solution would be a combination of the DOM inspection features of Developer Toolbar with a reworked Script Debugger, much like Firefox's excellent Firebug. All the same, the current debug setup I have works wonderfully.Anonymous
June 23, 2007
The comment has been removedAnonymous
June 23, 2007
The comment has been removedAnonymous
June 23, 2007
Was there an announcement of when the public bug tracking for IE would return at TechEd 2007 It seems odd that nothing was mentioned in this post, when it is the #1 concern of every developer that reads this blog! tx jacsAnonymous
June 23, 2007
"Thanks for reading and for developing on IE!" Huh?! is this a joke? Yeah, we read it, and we are glad there are some good links/free tools out there.. but "for developing on IE".. you're joking right? We TEST on IE, no one with deadlines DEVELOPS on IE, that would be counter productive! We want the debug tools, the inspectors, CSS helpers... to find out why IE isn't rendering content like it does in all the standards based browsers like Firefox, Safari, Konqueror, Opera etc. Developing for a non-IE browser is a piece of cake! It trying to track down those strange bugs in IE (in v7, in v6, in v5.5, in v5) that we want the tools for. Ask any non-VB, and even a fair number of .Net developers what browser they develop in. The answer is not IE*. (*excluding those building thick applications using the IE web browser control) WarrenAnonymous
June 24, 2007
The comment has been removedAnonymous
June 24, 2007
Has anyone noticed that in Vista x64 attempting to load a XPS document from a webpage with protected mode on will cause a loop that doesn't stop until you can close the offending window?Anonymous
June 24, 2007
> Regardless of what you /prefer/ or > what's easiest, you're an idiot if you > don't primarily target the ACTUAL > browser the VAST majority of people > use. Developing webpages with MSIE 6 in mind as the main target/focus of development is
- no longer making sense from a financial budget perspective, (return on investment)
- not a real solution for the web developer and (not recommendable) for the website visitors, is not a recommendable goal when there are lots of other browsers that are
free,
cross-platform,
less buggy,
more secure,
with better features,
more accessible, more UAAG 1.0 compliant,
more usable, user-friendly,
more capable (extensible) in all sorts of ways/dimensions (eg SVG, MathML, debugging,) etc. Even MSIE 7 is better, slightly better (not perfect!) than MSIE 6 from a web standards perspective and it's downloadable from Microsoft's windows update! > Yes it would be nice to do one > design confident it will 'just work' > on everything. But no software does > that. I can create many webpage designs (css layout) and I am confident that those will work as expected in/with Firefox 2, Opera 9, Safari 3, Konqueror 3.5 and Icab 3. Most of the time, those webpage designs will not work/render as expected, as coded in MSIE 6 and/or will not work/render well or as coded in MSIE 7. Who is to be blamed for this? Who? The nr 1 problem on the web is with Microsoft and its browser and its WYSIWYG HTML edition tools that have been used during so many years or years ago or that are still being used by amateur web authors. One day, Microsoft will have to get truly, intensively involved into educating, tech-evangelizing its customers and providing them with ATAG 1.0 compliant tools and good, useful, helpful validation (markup and CSS) tools. People have to upgrade one day. The web users people have to upgrade their browser. The web authors have to upgrade their general coding practices. And the Microsoft browser manufacturer/vendor have to correct/fix/upgrade their browser (rendering engine) and related tools on a regular basis and much faster so that amateur web authors do not get accustomed to IE buggy rendering. Gérard Talbot
Anonymous
June 24, 2007
Hi, To answer Gerard Talbot comment, the DebugBar has W3C Tidy integrated in it. Regards. JFRAnonymous
June 24, 2007
The comment has been removedAnonymous
June 24, 2007
If you don't want to pay for software you also give away all your software? So you will work for me for free? If you have a real company you don't care about 50 dollars for a good tool.. 50 dollars is 30 minutes work... Stupid Firefox Fundamentalist...Anonymous
June 24, 2007
In questo post John Irvatin ha riassunto i plugin più famosi per il debug su IE: IE Developer Toolbar IE Watch Debug Bar Visual Web Developer Express Nikhil's Web Development Express Fiddler Ajax View I commenti nel post sono ovviamente moltoAnonymous
June 24, 2007
The comment has been removedAnonymous
June 25, 2007
The comment has been removedAnonymous
June 25, 2007
I have to say, its nice to see microsoft is finally showing at least some effort to help the web development community. Though, not all of these tools are free, and most require an install, and not one of them can do all of the things FireBug can do (which is free). @Sick of repeated stupidity of developers Yes, how dare we developers complain and try to hold microsoft to all of the other major browser vendors. You look at opera, firefox, and safari, they all have better developer tools than microsoft has. People are just sick of having to spend hours debugging in IE, when in the other browsers its a piece of cake. Can you really blame people for getting fed up with IE?Anonymous
June 25, 2007
Anyone know of a good free live CSS editor for IE? CSS Vista (http://sitevista.com/cssvista/) looks promising but doesn't work with sites that require authentication.Anonymous
June 25, 2007
Hi S|ic3_x We plan to add a css live editor on the next DebugBar release (that is v4.2 or 5.0 depending on the numbering...). The final version 4.1 should be launched soon. So ,we plan to work in the next release soon with beta versions available perhaps during summer. JFRAnonymous
June 25, 2007
I thought you were a one-man team JFR...?Anonymous
June 25, 2007
I used to present myself as a company (Customers feel more comfortable if there is a "company" more than a freelance even if they know I am alone. Don't ask me why, I don't know). Need to change my habit...Anonymous
June 26, 2007
http://bink.nu/Article10331.bink Bink is reporting (although without extensive credibility) that IE8 is due to start getting exposed to developers THIS FALL! Is this true?! If so, how come this blog hasn't discussed one word of this. Where is the feature list, and bug fix list? and as always.. WHERE IS THE GOSH DARN PUBLIC FEEDBACK SITE!!!!! Without our input on the bugs you haven't found, how on earth are you going to be able to fix them by RTM for IE8!!!! Please tell me that this is a PR blunder.. and someone has "suggested" a date without any confirmation!Anonymous
June 26, 2007
The comment has been removedAnonymous
June 27, 2007
@david I know exactly how you feel. I did have a collection of url's pointing at bugs in the IE Feedback site, but now they are useless, since the site is down. So now, when a developer tries to create an input field named "347_phone" and "327_email", (where the '347' was some customer/user identifier) and things go all to hll when they try and access them via JavaScript, they have no resource to turn to. How is the developer supposed to understand the extent of the bug? () What are the workarounds? (none) Which versions of IE suffer from this? (all) Which version of IE is the fix for this targeted for? (unknown) Which versions of IE will get a backport of this fix? (unknown/unlikely) etc.Extent of the bug (for those unaware) If you attempt to access a form field in the elements collection by the fieldname, and the field's name, is prefixed with a number, which is greater than the length of the form, it will NOT WORK. One can only presume that this is due to an attempt to find the elements by Index, before by Name, but the "Index" search is running a "overly forgiving" parseInt function on the value first. Test case: <form name="test"> <input type="text" name="4_Contact" value="Hello World"/> <input type="button" value="Test It" onclick="alert(this.form.elements['4_Contact'].value);"/> </form> Anyway, back on discussion.. yes, Microsoft, please indicate when the bug tracking (public) will be back online.. its been like 8 months now that it has been down. I've heard of re-tooling, and re-deploying a new system that takes a week or two, but this is giving "uncommitted" a whole new definition, we haven't even got word of when the system will be back up, why it has been down for so long, or what new features the new system will support to make our lives easier. thanks steve
Anonymous
June 27, 2007
The comment has been removedAnonymous
June 27, 2007
The html stanrdard states that "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")." Se http://www.w3.org/TR/html4/types.html#type-cdataAnonymous
June 27, 2007
Indeed it seems after the positive steps towards communicating with users and developers for IE7 MS have reverted to entirely closed development which does not help anyone and could make IE8 the least popular IE so far! Meanwhile the new Safari has had two updates since it's beta release, Firefox 3 is progressing well, and Opera have started giving details of 9.5.Anonymous
June 27, 2007
@Steve_web Thanks, glad I'm not the only one! I see a few posts in here about the feedback site, is there a chance this will open soon? I hope it is ready well before IE8 comes out, and stays open permanently. @fr Exactly! The other browsers seem to be updating and fixing stuff all the time. it is too bad that Microsoft can't keep up with them.Anonymous
June 27, 2007
@fr: Yup, Safari has issued two updates so far because they've got a comical idea of security that seems to involve not even testing their code against the most rudimentary of attacks. I suppose IE could just stop testing their product and let YOU test it for them-- then they could be "responsive" and fix the bugs you find. As for the claim that Safari is the fastest browser... look closer at what test suite they used and try it yourself. You'll see the claim that they are the "World's Fastest Browser" has a lot in common with SteveJ's other absurd claims... He belongs to the marketing school of "claim any old thing, and by the time that people figure out we're lying, we're already working on the next product." If Microsoft bothered to respond to such a stupid claim, they'd only be giving more ink to this twerp.Anonymous
June 28, 2007
Protonotes is a cool Microsoft HTA that allows teams to annotate their prototypes for requirements collaboration. http://www.protonotes.com/Anonymous
June 28, 2007
The comment has been removedAnonymous
June 29, 2007
In regards to Safari's "fastest browser" claim, while true that it does have a really fast start up time, for page load time its claim of fastest time cannot be accurately tested because of a faulty implementation of the Date object and because it does not fire the onload event at the same time as every other browser does. I suspect that it is closer to firing on DOMContentLoaded, but it may actually be some time between DOMContentLoaded and onload. Source: http://www.quirksmode.org/blog/archives/2007/06/safari_30_rerev.htmlAnonymous
June 29, 2007
The comment has been removedAnonymous
June 29, 2007
@Josh One thing you can try is to check if you have any mis-behaving add-ons installed. Disable each of them one by one and see if you encounter less crashes etc. -- MarkusAnonymous
June 29, 2007
The comment has been removedAnonymous
June 29, 2007
The comment has been removedAnonymous
June 29, 2007
steve_web: I think you raise some fair questions. We haven't said anything about the next version of IE because I think you're right that people deserve an accurate source for information about IE. We could post our current thinking about features we'd do, bugs we'd fix, or dates on which we'd release. However, when we do this, we want to confident that the information will be accurate and something we can commit to. We've heard loud and clear from the community that vaporware and FUD aren't welcome. I know many would prefer an ongoing stream of information with retractions, corrections, and so on, but we also realize that when we announce something here, people make plans -- companies decide whether to deploy now or wait, developers decide what features to add, and so on. When we change our plans, we confuse people and undermine confidence. I think we'd all agree that Microsoft has not done always done a great job building what we said, when we said. We're trying to change that. As far as public bug submissions and tracking, I agree that Safari's bug submission feature is nice and would love the same for IE. However, this kind of thing only helps if we can process and respond to all the bugs. I think you'd agree that it would be disingenuous of us to add the feature and then ignore the bugs. When we opened the public database for the IE7 beta, we were flooded. While there were great bugs reported, the signal-to-noise was low; we had trouble scaling to all the bugs. We're still working on ways to get feedback in scalable ways. So, I'm sorry if our silence on certain topics is coming off as arrogance. We are working on the issues you're concerned about and want to make sure we have an answer we can stand behind when we give it. -Tony (Group Program Manager of IE)Anonymous
June 30, 2007
The comment has been removedAnonymous
June 30, 2007
The comment has been removedAnonymous
June 30, 2007
The comment has been removedAnonymous
July 01, 2007
The comment has been removedAnonymous
July 01, 2007
The comment has been removedAnonymous
July 02, 2007
The comment has been removedAnonymous
July 03, 2007
The comment has been removedAnonymous
July 03, 2007
I'm more curious as to whether or not he's disabled add-ons manually (that means he may have missed some), or if he's testing in the "No add-ons" that can be launched from the Start menu. #2 sounds a lot like something I experienced during the betas, where an XForm plug-in caused RSS feeds to show a blank page.Anonymous
July 03, 2007
The comment has been removedAnonymous
July 03, 2007
@Josh "I am not 'out to get you'" Then don't diss the software. It will not be IE, as this doesn't occur for the majority of users. Therefore, it's something to do with the state of your machine, not IE.Anonymous
July 03, 2007
The comment has been removedAnonymous
July 03, 2007
@ Michael I disabled them all manually and did not forget any. I have also done the other way and ran it without add ons. Made no difference. Oh, and I will REFUSE to right click on a stupid icon every time I want to surf the Internet. That would just be ridiculous.Anonymous
July 03, 2007
@Josh Stodola Why are you being so rude and angry? I can understand the frustration at having wasted hours of testing for something that is broken to you, but to reply to other users with "...opening your BIG mouth.." or making demands of the developers (who might care less now, thanks to the attitude), and then leaving an email address for feedback is pretty ridiculous. In fact, instead of making me want to investigate the problem, I'm more apt to make comments such as: "I have already mentioned I have these problems on 3 different machines all with different operations systems" Since you are unable to setup machines without causing the problems.. and a majority of other users are not having a problem doing so... It just looks like you have no idea how to setup a machine.Anonymous
July 03, 2007
@Josh "I have these problems on 3 different machines" Therefore there should be a common element. If you have the inclination: Vanilla install of operating system (from the manufacturer's CD). Upgrade to IE7 if required. Check that IE is working. Download all updates to windows & import your RSS feeds. Check that IE is working. After each installation of the software you use, check IE. BTW, have you tried disconnecting from the network or working in offline mode? Maybe the network has something to do with it.Anonymous
July 04, 2007
لابد من تطبيق كل الخطوات السابقة قبل ان احكم علي النصائح جيدة ام لا شكر لكم Thanks.Anonymous
July 04, 2007
The comment has been removedAnonymous
July 04, 2007
someone leaked alpha screenshots of ie8 it seems http://techtoday.110mb.com/2007/07/05/internet-explorer-8-alpha-screenshots/ man what i wouldn't give to try and alpha of ie8 looks goodAnonymous
July 05, 2007
Too bad it's pretty obvious they're fake. Even if we DO assume that IE8 will include spell-checking, the tab captions, titlebar, and pages shown do no match with each other (Google isn't shown in ANY of those pictures).Anonymous
July 05, 2007
@gabe, as mentioned in the comments on that site, the screenshots are faked. MS Word controls are visible in many places, and all tabs show "Google" as the website. There is a chance that IE may go this route (ribbon and all), although I for one would think that strategy would totally go against the strategy thus far, to clear away menus and toolbars, to provide more browsing room. Oh, and of course the comment 3 above me... is not me... darn spammers get on every site don't they.Anonymous
July 05, 2007
The comment has been removedAnonymous
July 05, 2007
@Josh Stodola "you are an idiot. it's impossible to "setup" a machine incorrectly." See? That's what I'm talking about right there. And millions of "idiots" are able to "setup" a machine, barebones, without a problem. But you cannot. What does that say about you?Anonymous
July 06, 2007
Is it true that the bait and switch vulnerability, as discovered by Michal Zalewski, will not be fixed by the next set of patches? Demo available: http://lcamtuf.coredump.cx/ierace/ That would be a real shame, I had actually hoped to have seen a fix in the June cumulative update, not the August one...Anonymous
July 12, 2007
Auf http://blogs.msdn.com/ie/archive/2007/06/22/from-microsoft-teched-2007-web-development-tools-for-internet-explorer.aspxAnonymous
July 12, 2007
Auf http://blogs.msdn.com/ie/archive/2007/06/22/from-microsoft-teched-2007-web-development-tools-forAnonymous
July 26, 2007
So as it turns out, it's been a while since I last posted. Things have been a little nutty around here.Anonymous
August 23, 2007
Hi everyone, In June I posted information about a number of developer tools , one of which was Ajax View.Anonymous
August 26, 2007
Here are my weekly notes: We finally got around to doing a long-planned server move this weekend....Anonymous
September 10, 2007
John Hrvatin talked about Web Development Tools for Internet Explorer at Microsoft TechEd 2007 in OrlandoAnonymous
September 18, 2007
oasis music videos myspace codesAnonymous
March 05, 2008
in the below you will find several cool tools that supports while your web development...Anonymous
March 05, 2008
in the below link you will find several cool tools that supports while your web development...Anonymous
March 07, 2008
Over the past year, I’ve written about different tools to help web developers become more productiveAnonymous
March 07, 2008
Over the past year, I’ve written about different tools to help web developers become more productiveAnonymous
March 19, 2009
    지난  1 년간, Internet Explorer 개발시에 웹 개발자의 생산성 향상을 도모하기 위한 다양한 도구 ( Web Development Tools