HTML5 ビギナーズでお話したIE11のF12開発者ツールに関する資料です。

1. F12 開発者ツール – Internet Explorer 11
尾崎 義尚
2013/12/13

2. 自己紹介

尾崎 義尚 – ネクストスケープ

Microsoft MVP for Internet Explorer & userAgents.ie

犬 と 猫2匹 を飼っています。
猫A
猫C
プリンセス・D・
イザベラ

3. 自己紹介

特集：Web制作者＆開発者のためのIE10概説
尾崎 義尚 – ネクストスケープ



Microsoft MVP for Internet Explorer & userAgents.ie
Coding Guidelines for CSharp 3.0, 4.0 and 5.0


http://www.buildinsider.net/web/ie11preview/01
Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」「F12 開発者ツール」


http://www.buildinsider.net/web/modernizr/01
Web制作者が知っておくべき、Internet Explorer 11（プレビュー版）の新機能および変更点


http://csharpguidelines.codeplex.com/releases/view/98254
Modernizrを使ってブラウザーの機能を調べるには


http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html
http://www.forest.impress.co.jp/docs/special/20130829_613068.html
Web制作者は注意！ Internet Explorer 11で変更された「互換性」

http://www.buildinsider.net/web/ie11attention/01

4. Internet Explorer 11
8月27日 RTM
9月9日 MSDN、TechNet 加入者向けに公開
10月18日 一般向けリリース
11月08日 Windows 7 版リリース

Windows 8のリリース (2012年10月26日) から1年弱

対応 OS ： Windows 7、Windows 8.1

Windows 8は、サポートされません。

5. ブラウザ リリース スケジュール
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
e e e e
ee
12 3
4
5
2006
2007
2008
e
6
2010
2011
8
2年5ヶ月
9
2013
2年
10 11
1年7ヶ月
Chrome
Netscape
Firefox
Safari
Opera
2012
e eee
7
5年2ヶ月
2009
1年

6. IE11の主な新機能

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

8. 赤字：Windows 7非対応機能
IE11 の新機能

互換性

レイアウト

タッチ

デバイスの向きのイベント

境界線の画像

ドラッグ アンド ドロップ タッチ サポート

全画面 API

ネットワーキングとナビゲーション

ホバー タッチ サポート

画面の向きの API

戻るナビゲーションのキャッシュ

各入力のスクロールとズーム

入力方式エディター API

ネットワークの優先順位付け

ビデオ

F12 開発者ツール

プリレンダリングとプリフェッチのサポート

動的 TextTrack オブジェクト

Canvas の機能強化

Do Not Track (DNT) 例外

Simple Delivery Profile (SDP) キャプション

高 DPI のサポート

デスクトップ IE の拡張保護モード (EPM)

XHR キャッシュ コントロールのストリーミング

WebGL

Web 暗号化 API

電話番号の形式の認識

JavaScript機能追加

ピン留めされたサイトの機能強化
http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx

9. Windows 7 ではサポートされない機能

電話番号の自動検出

リンクの強調表示

デバイスの向きのイベント

Media Source Extensions

ドラッグ アンド ドロップ タッチ サポート

ピン留めされたサイトの機能強化

効果の一括処理とストロークの向上

画面の向きの API

Encrypted Media Extensions


拡張保護モード (EPM)
タッチ入力やその他の入力によるスクロー
ルとズーム

さまざまなデバイスにわたる同期

TCP 接続共有 (SPDY)

F12 開発者ツールの UI の応答性

高 DPI のサポート

ホバー タッチ サポート
http://msdn.microsoft.com/ja-jp/library/ie/dn394063(v=vs.85).aspx

10. F12

11. Chrome との違い

12. メニュー
みんな大好き完全日本語！

13. 名前が潔い
F12 開発者ツール
F12 Developer Tools
Chromeは、「Chrome Developer Tools」

14. 機能
Internet Explorer
F12 開発者ツール
なんでもできるわけではないけど
便利でよく使う機能を
簡単に使えるようにまとめました。
Internet Explorer 11 (Press F12 key)
DOM Explorer
コンソール
デバッガー
ネットワーク
UIの応答
プロファイラー
メモリ
エミュレーション
税込
0円

15. F12開発者ツール

16. 生まれ変わった UI
Surface RT（ ARM ）でも動作する！

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

18. IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ
エミュレーション
リクエスト
レスポンス
HTML描画
スクリプト
実行
表示

19. 生まれ変わった UI

HTML 5時代の新しい要件に対応
以前は…
HTML5時代
ようこそ
あなたは 000010 人目のお客様です
Sorry, this page is Japanese only.
HTML
HTML5
about
散文詩
工事中<m(__)m>
上から下に流れるレイアウト
CSS3
複雑に絡み合うレイアウト

20. 生まれ変わった UI

HTML 5時代の新しい要件に対応

21. 要素を選択
選択した要素を強調
コンソールを表示
IEを前面に表示
要素の階層
ピン留めする

22. DOM Explorer

HTML, CSSを確認・調整

リアルタイムに状況を確認可能に

パンくずでエレメント階層にアクセス可能

ドラッグ＆ドロップでエレメントの移動が可能

インテリセンスで入力が容易に

23. コンソール

対話によるコードの実行、情報の取得
どこからでもアクセス可能
オブジェクト階層が展開可能
インテリセンスが利用可能
複数行に切り替え可能
どのツールからでもコンソールにアクセス可能に
コンソール デバッグ APIにいくつかのメソッドが追加
http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85)
インテリセンス（オートコンプリート）

24. デバッガー
Web Workersのデバッグ
ミニファイされたコードの整形
ウォッチ
ブレイクポイント
コールスタック
ブレークポイント
ブレークポイントの反映にリフレッシュは不要に
タブ表示により複数のスクリプトの管理が容易に
ブレークポイントの位置がスクロールバーに表示されるように

25. ネットワーク
ページ表示までの時間
通信の詳細（要求、応答のヘッダー、本文）
通信の詳細時間（要求、待機、応答）
リクエスト タイミング情報が改善
圧縮情報キャプチャの改善

26. UI の応答

UIの応答性を計測

フレームレート、CPU利用率をグラフィカルに表示

27. アプリ ライフサイクルとユーザーマークの表示
performance.mark(markName);
UI の応答
CPU使用率とその内訳
視覚スループット
（FPS）
タイムラインの詳細
タイムライン詳細の内訳
「HTMLの解析」の裏で動いている処理をグラフ化

28. UI の応答

Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI

[デバッグ] – [パフォーマンスと診断]
*1 2013年10月の Microsoft Store の価格です。

29. プロファイラー
function の処理時間と回数を調査

機能＝function

回数＝呼び出し回数

包括時間（ミリ秒）＝ 子 function を含む時間

排他時間（ミリ秒）＝ 子 function を含まない
呼び出しツリーはfunctionが階層で表示される
Web ワーカーで実行されたfunctionのトラッキング

30. メモリ
変数やHTMLエレメントのメモリ使用量を調査
差分の詳細を確認
スナップショット
を作成
メモリ、オブジェクトの増減を抽出
デタッチされたDOMノードの識別
メモリの増加ポイントを識別
オブジェクトが使用しているメモリを計測

31. エミュレーション
<meta http-equiv="X-UA-Compatible" content="IE=8">
の記述がないときちんと表示されない場合もある。
IE以外のUAも指定可能
ディスプレイの向き（縦・横）
解像度を指定して表示の確認が可能
→レスポンシブUIの確認
緯度・経度を指定して位置情報を使ったアプリの動作確認
が可能
複数の画面タイプにおけるレスポンシブ デザインのテスト

32. パフォーマンス・ダッシュボード
状況をページ内に表示してリアルタイムに確認可能

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