Introducing the IE Diagnostics Adapter for third party developer tools


For several releases, Internet Explorer has had diagnostic tools that help developers debug visual issues, find JavaScript bugs, and profile Web sites. These tools have shipped both in the browser as the F12 Developer Tools as well as in Visual Studio. In the interest of making the modern Web “just work” for everyone, today we’re announcing an open-source, experimental adapter for Internet Explorer that we’re developing to contribute to a wider and more diverse tooling ecosystem across browsers. Right now we’ve targeted the adapter at Internet Explorer 11, but we intend to update it to work with Project Spartan in a future release.

Internet Explorer already supports WebDriver, which gives test frameworks a standard mechanism to automate the browser, reducing the cost to developers to add a new browser to their test matrix. In the same spirit, we want to enable third party tools to target IE like any other browser. The IE Diagnostics Adapter makes this possible by providing a bridge that allows IE to speak the Chrome remote debugging protocol. This protocol allows 3rd party tools to debug, diagnose, and profile Chrome. While not a standard, it is used by many popular developer tools, including products like Adobe’s Brackets. There’s also a community driven initiative, Kenneth Auchenberg‘s RemoteDebug, that seeks to make the protocol common across more browsers – there are already bridges for Firefox and Safari on iOS.

Today our adapter only supports a limited subset of the API surface. You can attach the Chrome Dev Tools and get basic script debugging by running IE, starting the proxy, and browsing to http://localhost:9222/ from Chrome, as pictured below.

Animation of attaching the Chrome Dev Tools to Internet Explorer.

The adapter is still in active development, and you can check in on our progress on GitHub. We’ve open sourced it under the MIT license, so feel free to take a look and pitch in!

This adapter is an experiment for us, and we’re sharing it early and openly. We’re especially interested in getting feedback from tool vendors out there who are currently using the Chrome remote debug protocol. Part of being an experiment means that we don’t have a grand vision or a roadmap for the next 5 years. What we do know is that we want to make developing web sites for IE and Project Spartan as easy and enjoyable as possible. That means improving the tools we ship and also enabling others to build great tools that can target IE and Project Spartan.

More information and demos will be coming soon at the project’s GitHub repository, and we encourage you to check back there periodically for updates – we look forward to your feedback and contributions on GitHub and @IEDevChat on Twitter!

Andy Sterland, Program Manager, Client Platform Tools

Comments (28)

  1. Aleks M says:

    That's really cool that you guys are releasing an experiment, no less on github with MIT licensing!

  2. Spartan says:

    What program did you use for creating the gif?

    😉

  3. Simon says:

    Talking about WebDriver in IE11, it's quite crappy, and very poorly (sometimes wrongly) documented. Any news on that side?

  4. Long term web developer says:

    first make a decent web browser that works

  5. FF22 says:

    So, thanks to the embedded gif in the blog post, we know now that even Microsoft developers are using Google instead of Bing. How do you expect others to use your product if even your own developers can't be bothered to do so?

  6. The Warlock says:

    I get this when trying to load the inspector

    Connection rejected for: /devtools/page/57FB870F-2BD2-4A4D-A113-AAB110F4E4EC

    [2015-04-03 12:12:53] [error] Handshake ended with HTTP error: 400

  7. DvdBrink says:

    I think it is cool you guys created this! Nice job IE team!

    I will test it with my github.com/…/chrome-debug-protocol package so I can control the browser from Node. (I could have used WebDriver protocol but I wanted to do some lowlevel stuff which isn't in WebDriver! I know not all API's are supported (yet) but this is a nice start!

    Thanks!

  8. giuseppe says:

    Any news on IE for xbox one? Like remote debugging and Spartan availability…

  9. David says:

    This is quite cool, especially as a replacement for the terrible IE dev tools!

    We're still waiting to hear what this new browser will be called?! I'm hoping it will be "Spartacus".

  10. Donatas says:

    This looks great! Thank you!

  11. GTX says:

    This is such a good news, I have created a small automated testing tool that talks directly to Chrome using the protocol, I will be using it now with IE, thank you, this is wonderful news.

  12. chromedev says:

    Getting the same rejected message as The Warlock above. Anyone know what I'm doing wrong?

  13. Dale says:

    Why port 9222? why not use port 1337 like other tools use and that is easy to remember because it is LEET!

    Microsoft > where would you like to go?

    Devs > forward at full throttle?

    Microsoft > ok.  how about 2 steps forward, 1 step back?

    Devs > ugh #SMH

  14. giuseppe says:

    for completeness:

    Google> Everybody is going towards our new proprietary goal, if you don't go there you basically suck!

    Devs> But I have different goal…

    Google> No, you don't understand your goal. What you really want is go towards our goal.

    Devs> This is not true

    Google> Your truth does not matter. We'll force you anyway. Now shut up. Btw: back now is the new forward. Now move forward or else.

    see twitter.com/…/583276900799397888

    or also glazkov.com/…/going-forward-is-leaving-past-behind

    Apple>

    Devs> Hello?

    Apple>

    Devs> Hellllloooooo!!!?

    Apple> Here's some bono on your iPhone. Now shut the f up and let the praising commence.

    Devs> Uh, that's not what we meant.

    Apple> Who do you think you are telling us what you meant or not. Now swallow that WebKitMouseForceEventS.

    Firefox> Where would you like to go?

    Devs> forward at full throttle?

    Google> Hey Firefox, we own you. You go that way.

    Firefox> Well, we'll go that way. That's where the money is. We can call that forward.

    Opera> Where would you like to go?

    Devs> forward at full throttle?

    Opera> Here's a bookmark manager!

    Devs> we meant the the web platform…

    Google> They don't do that anymore.

    btw, #hashtagsR4bitches

  15. aaa says:

    『某スレから引用』

    「検索したい文字列を選択して、右クリックでYahoo検索、検索結果が出る、その中の1つのリンクページを開く

    最初の検索結果のページに戻ろうとしても「戻る」ボタンが白抜きになったままで戻れない 」

    IE11+Windows 7ですがたまに起きますね。

    検索に限らず、普通にサイト開いた時も同様。

    こちらも今後のアップデートで必ず修正して下さい。

    あと最近タブの切替がChromeより遅い気もします。

  16. 贤心 says:

    在中国,除了Chrome,我们更多的是使用ie8, IE Diagnostics Adapter对我们似乎意义不是太大,可以这么说吗?

  17. Duncan says:

    I get the same issue as The Warlock:

    Connection rejected for: /devtools/page/B9115B94-405E-4706-A8C4-639A0BA52897

    [2015-04-06 17:03:15] [error] Handshake ended with HTTP error: 400

  18. @Spartan

    The gif was created using LCIE

    @The Warlock/@Duncan

    If you have an issue with the adapter feel free to create an issue on Git hub

    blogs.msdn.com/…/introducing-the-ie-diagnostics-adapter-for-third-party-developer-tools.aspx

    The issue you encountered might be a x64 issue

    github.com/…/9

    @gisueppe

    No news on any xbox support.

  19. football-ws says:

    OK! this is really nice.

    <a href="football-ws.com/…/a>

    <a href="football-ws.com/liga-espa-olasupein"> La Liga  (スペイン)通販</a>

  20. Blah says:

    We need the full firebug support!!

    Can anyone ping the developer of firebug?

  21. Blah says:

    These guys perhaps: github.com/…/firebug ?

  22. 関係ないけれど says:

    Windows 10も出ないのにもう更に先の製品の話…。

    本当かは分からないが、早すぎて追いつかない。

    もっとお客さんの事を考えて商売してください。

    日本語で無関係コメント、失礼いたしました。。。

    (あちらはコメできないのでこちらにかわりにしてます)

  23. xiaogezi says:

    Nice tool. port:9223 not working.  evn: Win8.1 x64 IE11 proxy: proxy.pac  proxy.xxxx.com 8080

  24. Onion2k says:

    If you're getting "[error] Handshake ended with HTTP error: 400" try using the x86 version instead of x64. That sorted the problem for me.

  25. dave says:

    Thank you for doing this! It works and enables me to debug an IE app which is in a custom container and doesn't have the dev tools accessible.  I could use VS, attach to process, but that is a pain and Chrome dev tools are more familiar to me.

  26. Addlink.com says:

    Glad to see your new project you have done, IE team. Thank you for doing this for the world, us.

  27. Rob says:

    Well this is actually useful. The only thing worse than IE itself is its developer tools and being able to use a different browser's tool, which we all use anyway, makes having to debug IE just slightly less a pita.

  28. Mark says:

    I like the DOM Explorer which I tend to use the most.  It seems great a identifying the style and layout.     But I'm having trouble finding the attribute details which used to be listed on the right hand side (yes, I can see them nested in the html body).       But the old right hand breakdown with id and text details was really useful.   Where is it now?