都内で働くSEの技術的なひとりごと

都内でサラリーマンやってます。マイクロソフト系(たまに、OSS系などマイクロソフト以外の技術も...)の技術的なことについて書いています。日々の仕事の中で、気になったことを技術要素関係なく気まぐれに選んでいるので記事内容は開発言語、インフラ等ばらばらです。なお、当ブログで発信、発言は私個人のものであり、所属する組織、企業、団体等とは何のかかわりもございません。ブログの内容もきちんと検証して使用してください。よろしくお願いします♪

Internet Explorer11 の F12 開発者ツールを使ってみた

 Internet Explorer10 ( IE 9 から? ) より、開発者ツールというものが追加されましたね。Internet Explorer 起動後に『F12』キーを押すことで起動する開発者用便利ツールです。( 今回の画面は、IE11 のものです。)

f:id:koogucc11:20131027115850p:plain

 上図の赤枠部分は、ピン止めを外して、別画面にすることも可能です。

f:id:koogucc11:20131027155114p:plain

 コンソールで JavaScript のデバックできます。

f:id:koogucc11:20131027155545p:plain

 エラー発生個所をクリックすると、問題の個所に飛べます。ステップ実行、ウォッチ式、ブレークポイントの設定など高機能です。

f:id:koogucc11:20131027155705p:plain

 ブラウザからの通信をキャプチャできます。

f:id:koogucc11:20131027155927p:plain

 ある一定時間のUI応答性をチェックできます。フレームレート、CPU使用率などを確認することができます。

f:id:koogucc11:20131027160554p:plain

 一定時間内のパフォーマンス情報をプロファイリングできます。

 f:id:koogucc11:20131027160912p:plain

 ブラウザのメモリ使用量を確認できます。

f:id:koogucc11:20131027161316p:plain

 他ブラウザエミュレーションできます。位置情報のエミュレーションなど、スマートフォンを意識した設定も可能です。

f:id:koogucc11:20131027184947p:plain

 例えば、ブラウザプロファイルを Windows Phone にすると、下図のようにエミューレーションしてくれます。

f:id:koogucc11:20131027185412p:plain

 他にもいろいろありますね。パフォーマンスダッシュボード。ツール → パフォーマンスダッシュボード から起動できます。

f:id:koogucc11:20131027191114p:plain

 描画時間、フレーム率、メモリ、CPU の部分をクリックすると、時系列表示に切り替わります。メモリをクリックすると下図のようになります。

f:id:koogucc11:20131027191534p:plain

 Internet Explorer も開発者にとっていろいろ便利になりましたね。