これまでに紹介した開発者ツールは次の通りです。
今回はWindowsと言えば、ということでIEについて紹介します。
開発者ツールの立ち上げ
IEの開発者ツールの立ち上げも他のブラウザと同じくF12で開きます。
DOM Explorer下にある二重四角のアイコンを有効にしておくとマウスオーバーで該当するDOMがハイライト表示されます。
コンソールでは入力補完も行われます。
オブジェクトの中身や関数もコンソールで確認できます。
エラーが出た際には細かく追いかけられるようになっています。
ブレイクポイントの追加や一覧表示も便利です。
ブレイクポイントで実行が止まったところ。一時停止のアイコンが大きく表示されているので止まったことがよく分かります。
ネットワークタブでは各リソースの読み込み、実行などのタイミングが分かるようになっています。
さらにリソース単位で細かく追いかけることもできます。
リソースを読み込むときのヘッダ情報も確認できます。
レスポンスコンテンツの確認。
UIのレンダリングなどについてはUIの応答タブにまとまっています。GCであったり、スタイル指定、イメージのデコードなど細かく追えるようになっています。
プロファイラタブではJavaScriptが実行している関数をより細かく追いかけられるようになっています。実行回数であったり、実行時間を見ることで時間のかかっている処理が可視化されます。
メモリタブはその名の通り、メモリ使用量を追いかけられます。SPAであったり画面遷移をしないAjaxアプリケーションの場合は特に注意が必要でしょう。
気になったポイントでスクリーンショットを残しておくことができます。
最後はエミュレーションタブです。ブラウザのプロファイルを変更して表示や処理の確認ができます。
GPSを擬似的に与えることもできます。
ディスプレイの向きやデバイスの種類を変更してアクセスできます。
このように多様なデバイスが用意されています。なお、これらはユーザエージェントや画面サイズを変更するものであってレンダリングエンジンは変わりません。
IEもHTML5対応する中で高度な開発者ツールを提供するようになっています。IEはVisual StudioなどのMicrosoft系プロダクトとの相性が良いので、そういったIDEやOfficeなどを使う際の開発には便利そうです。
シェアは落ちつつあるとは言え、やはりIEのシェアは相当大きいのが実情です。そのためIEでのテストは欠かせません。そしてエラーが出た際にはIEの開発者ツールで効率的なデバッグをしてください。
