ChromeでIEのデバッグを可能にするIEDiagnosticsAdapter、ファーストインプレッション

システム開発を行っている際に、デバッガーはとても重要な存在です。大抵書いたコードが一発で思った通りに動くことはなく、ブレークポイントやトレースを使って動作の確認を行います。Webアプリケーションにおいてもそれは変わらず、Webブラウザに付属する開発ツールが大いに活躍します。

Google ChromeのDevToolsがよく知られており、好んで使う人も多いでしょう。一方IEにも同様に開発者ツールがあり、バージョンを重ねるごとに機能強化されています。ただ、ChromeのDevToolsに慣れていると、IEの開発者ツールは使い勝手が「ちょっとずつ違っている」のが気になる方も多いのではないでしょうか。また、複数のブラウザでデバッグしているとき、それぞれツールの使い勝手が違うのも困ったものです。

そこでマイクロソフトが開発したのがIEDiagnosticsAdapterというツールです。これはProxyとして動作するソフトウェアで、IEでChromeのRemote debug protocolを使えるようにするソフトウェアになります。つまりIEでGoogle ChromeのDevToolsが使えるのです。

まだリリースされて間もなく、バージョン0.1.3と絶賛開発中のソフトウェアですが、今回はIEDiagnosticsAdapterのファーストインプレッションとして紹介したいと思います。

IEDiagnosticsAdapterの構成

IEDiagnosticsAdapterは実行ファイルとDLLの2つのファイルからなっています。どちらもGitHubのリリースページにありますので、同じ階層にダウンロードするだけで利用できます。

なお、拡張保護モード下でも使いたい場合は、

icacls proxy.dll /grant "ALL APPLICATION PACKAGES":(RX)

というコマンドを管理者権限で実行する必要があります。

IEでブラウジング

IEDiagnosticsAdapterのダウンロードが終わったら、実行ファイルを起動します。そうすると http://localhost:9222/ でサーバが立ち上がります。そうしたらIEでデバッグしたいサイトを表示します。

Google Chromeからアクセス

次にGoogle Chromeで http://localhost:9222/ にアクセスします。そうすると、IEで表示しているセッションが一覧表示されます。

その中のセッションをクリックすると、DevTools風の画面が表示されます。

例えばこんな感じにDOMをハイライトさせることもできます。

ブレークポイントの設定もできるはずなのですが、執筆時点ではエラーが出てしまいました。

IEDiagnosticsAdapterを実践的に使っていくのはまだまだといった感がありますが、IEの開発者ツールを使わずにGoogle Chromeでできるというのは魅力的です。
また、デバッガのAPIが公式に外部公開されることで、IEをデバッグしたり連携したりするツールが増えることも期待されます。IEによるWeb業務システム開発が捗るツールが増えるとうれしいですね。

Microsoft/IEDiagnosticsAdapter