IEモード 開発者ツール(DevTools)でデバッグ作業をより効率的に行う方法とは?

業務効率化

悲しいことに未だにIE対応が必要な企業などのページがあります。一方で既にInternet Explorerは廃止され、WindowsではIEを開くことすら出来ません。

しかし、IEモードという未練がましい機能があり、IEにしか対応していないWebアプリケーションなどへの救済措置が取られています。フロントエンドエンジニアの中にはIEモードでデベロッパーツールを開き、コンソールエラーを確認したい場合が多々あります。

そこで今回は忌々しいIEモードで開発ツール(デベロッパーツール)を開く方法をご紹介します。

右クリックメニューやF12からでは開けない

IEモードで面倒なのはデベロッパーツールをF12キーや右クリックメニューから起動出来ないことでしょう。これはかなり手間がかかりますし、あるいはIEモードで開発ツールは開けないとあきらめている方もいると思われます。

しかし、IEモードでも開発ツールは使用出来ます。コンソールエラーの確認、適応されているCSSの確認にも重宝するので是非覚えるか、どこかメモ帳などに記載しておくことをおすすめします。

IEモードで閲覧中に別途プログラムを実行する

IEモード閲覧中にWindowsキー + Rで「ファイル名を指定して実行」ウィンドウを開きます。

使っているWindowsが32bitであれば、

%systemroot%\system32\f12\IEChooser.exe

64bitであれば、

%systemroot%\SysWOW64\F12\IEChooser.exe

と入力して実行すると下記のような画面が出現します。

この画面上で、検証したい画面の名前が書いてあるエリアをクリックすると開発ツールが開き、IEモードでも要素の検証、コンソールエラーの確認等ができるようになります。

ちなみに%systemroot%はご自身の環境に合わせてC:\Windowsようなパスに書き換えてもOKです。もしIEChooser.exeが起動しない場合はパスを調整してWin + Rから実行してみてください。

(参考)https://learn.microsoft.com/ja-jp/office/dev/add-ins/testing/debug-add-ins-using-f12-tools-ie

まとめ

EdgenoIEモードを実行させたい場合、「F12キー」も「右クリック→要素を検証」も使えないことがわかりましたね。IEモード中にデベロッパーツールを起動したい場合は、別途コマンドを実行する必要があります。この記事に記載したIEChooser.exeまでのパスをどこかにメモしておくと便利ですので是非ご利用ください。

タイトルとURLをコピーしました