internet explorer 11 の f12 開発者ツール

F12 開発者ツール – Internet Explorer 11尾崎 義尚

2013/12/13

自己紹介

尾崎 義尚 – ネクストスケープ

Microsoft MVP for Internet Explorer & userAgents.ie

犬 と 猫2匹 を飼っています。猫A

猫C

プリンセス・D・イザベラ

自己紹介

尾崎 義尚 – ネクストスケープ

Microsoft MVP for Internet Explorer & userAgents.ie

特集：Web制作者＆開発者のためのIE10概説

http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html

Coding Guidelines for CSharp 3.0, 4.0 and 5.0

http://csharpguidelines.codeplex.com/releases/view/98254

Modernizrを使ってブラウザーの機能を調べるには

http://www.buildinsider.net/web/modernizr/01

Web制作者が知っておくべき、Internet Explorer 11（プレビュー版）の新機能および変更点

http://www.buildinsider.net/web/ie11preview/01

Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」「F12 開発者ツール」

http://www.forest.impress.co.jp/docs/special/20130829_613068.html

Web制作者は注意！ Internet Explorer 11で変更された「互換性」

http://www.buildinsider.net/web/ie11attention/01

Internet Explorer 11

対応 OS ： Windows 7、Windows 8.1

Windows 8は、サポートされません。

8月27日 RTM

9月9日 MSDN、TechNet 加入者向けに公開

10月18日 一般向けリリース

11月08日 Windows 7 版リリース

Windows 8のリリース (2012年10月26日) から1年弱

ブラウザ リリース スケジュール1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

eee e e e e e e e e12 3 4 5 6 7 8 9 10 11

Chrome

Firefox

Netscape

Safari

Opera

5年2ヶ月 2年5ヶ月 2年 1年7ヶ月 1年

IE11の主な新機能

http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspxhttp://technet.microsoft.com/ja-jp/ie/dn269977

IE11 の新機能 互換性

デバイスの向きのイベント

全画面 API

画面の向きの API

入力方式エディター API

F12 開発者ツール

Canvas の機能強化

高 DPI のサポート

WebGL

JavaScript機能追加

レイアウト

境界線の画像

ネットワーキングとナビゲーション

戻るナビゲーションのキャッシュ

ネットワークの優先順位付け

プリレンダリングとプリフェッチのサポート

Do Not Track (DNT) 例外

デスクトップ IE の拡張保護モード (EPM)

Web 暗号化 API

http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx

タッチ

ドラッグ アンド ドロップ タッチ サポート

ホバー タッチ サポート

各入力のスクロールとズーム

ビデオ

動的 TextTrack オブジェクト

Simple Delivery Profile (SDP) キャプション

XHR キャッシュ コントロールのストリーミング

電話番号の形式の認識

ピン留めされたサイトの機能強化

赤字：Windows 7非対応機能

Windows 7 ではサポートされない機能

電話番号の自動検出

デバイスの向きのイベント

ドラッグ アンド ドロップ タッチ サポート

効果の一括処理とストロークの向上

Encrypted Media Extensions

拡張保護モード (EPM)

F12 開発者ツールの UI の応答性

高 DPI のサポート

ホバー タッチ サポート

リンクの強調表示

Media Source Extensions

ピン留めされたサイトの機能強化

画面の向きの API

タッチ入力やその他の入力によるスクロールとズーム

さまざまなデバイスにわたる同期

TCP 接続共有 (SPDY)

http://msdn.microsoft.com/ja-jp/library/ie/dn394063(v=vs.85).aspx

F12

Chrome との違い

みんな大好き完全日本語！

メニュー

F12 開発者ツールF12 Developer Tools

Chromeは、「Chrome Developer Tools」

名前が潔い

機能

Internet Explorer

F12 開発者ツール

なんでもできるわけではないけど便利でよく使う機能を

簡単に使えるようにまとめました。

Internet Explorer 11 (Press F12 key)

DOM ExplorerコンソールデバッガーネットワークUIの応答プロファイラーメモリエミュレーション

税込 0円

F12開発者ツール

生まれ変わった UI

Surface RT（ARM ）でも動作する！

IE11の新しいメニュー

DOM Explorer

コンソール

デバッガー

ネットワーク

UIの応答

プロファイラー

メモリ

エミュレーション

IE10のメニュー

IE11の新しいメニュー

DOM Explorer

コンソール

デバッガー

ネットワーク

UIの応答

プロファイラー

メモリ

エミュレーション

リクエスト レスポンス HTML描画スクリプト実行

表示

生まれ変わった UI

HTML 5時代の新しい要件に対応

HTML

ようこそあなたは 000010 人目のお客様です

Sorry, this page is Japanese only.

about

散文詩 工事中<m(__)m>

HTML5

CSS3

以前は… HTML5時代

上から下に流れるレイアウト 複雑に絡み合うレイアウト

生まれ変わった UI

HTML 5時代の新しい要件に対応

コンソールを表示

IEを前面に表示

ピン留めする

要素を選択 選択した要素を強調

要素の階層

DOM Explorer

HTML, CSSを確認・調整

リアルタイムに状況を確認可能に

パンくずでエレメント階層にアクセス可能

ドラッグ＆ドロップでエレメントの移動が可能

インテリセンスで入力が容易に

コンソール

対話によるコードの実行、情報の取得

どのツールからでもコンソールにアクセス可能にコンソールデバッグAPIにいくつかのメソッドが追加http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85)インテリセンス（オートコンプリート）

どこからでもアクセス可能

インテリセンスが利用可能

オブジェクト階層が展開可能

複数行に切り替え可能

デバッガー

ブレークポイントの反映にリフレッシュは不要にタブ表示により複数のスクリプトの管理が容易にブレークポイントの位置がスクロールバーに表示されるように

ウォッチ

ブレイクポイントブレイクポイント

コールスタックブレークポイント

ミニファイされたコードの整形Web Workersのデバッグ

ネットワークページ表示までの時間 通信の詳細（要求、応答のヘッダー、本文）

通信の詳細時間（要求、待機、応答）

リクエストタイミング情報が改善圧縮情報キャプチャの改善

UI の応答

UIの応答性を計測

フレームレート、CPU利用率をグラフィカルに表示

UI の応答

アプリ ライフサイクルとユーザーマークの表示performance.mark(markName);

視覚スループット（FPS）

タイムラインの詳細

CPU使用率とその内訳

タイムライン詳細の内訳「HTMLの解析」の裏で動いている処理をグラフ化

UI の応答

Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI

[デバッグ] – [パフォーマンスと診断]

*1 2013年10月のMicrosoft Store の価格です。

プロファイラーfunction の処理時間と回数を調査

機能＝function

回数＝呼び出し回数

包括時間（ミリ秒）＝ 子 function を含む時間

排他時間（ミリ秒）＝ 子 function を含まない

呼び出しツリーはfunctionが階層で表示される

Web ワーカーで実行されたfunctionのトラッキング

メモリ変数やHTMLエレメントのメモリ使用量を調査

メモリ、オブジェクトの増減を抽出

スナップショットを作成

差分の詳細を確認

デタッチされたDOMノードの識別メモリの増加ポイントを識別オブジェクトが使用しているメモリを計測

エミュレーション

複数の画面タイプにおけるレスポンシブデザインのテストモバイルサイトにおける位置識別機能のテスト

<meta http-equiv="X-UA-Compatible" content="IE=8">の記述がないときちんと表示されない場合もある。

IE以外のUAも指定可能

ディスプレイの向き（縦・横）解像度を指定して表示の確認が可能→レスポンシブUIの確認

緯度・経度を指定して位置情報を使ったアプリの動作確認が可能

パフォーマンス・ダッシュボード

状況をページ内に表示してリアルタイムに確認可能

まとめ

DOM Explorer

コンソール

デバッガー

ネットワーク

UIの応答

プロファイラー

メモリ

エミュレーション