F12 開発者ツール – Internet Explorer 11
尾崎 義尚
2013/12/13
自己紹介


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



Microsoft MVP for Internet Explorer & userAgents.ie



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

猫A

猫C

プリンセス・D・
イザ...
自己紹介


特集:Web制作者&開発者のためのIE10概説
尾崎 義尚 – ネクストスケープ





Microsoft MVP for Internet Explorer & userAgents.ie

Coding Guid...
Internet Explorer 11
8月27日 RTM
9月9日 MSDN、TechNet 加入者向けに公開

10月18日 一般向けリリース
11月08日 Windows 7 版リリース


Windows 8のリリース (2012年...
ブラウザ リリース スケジュール
1995

1996

1997

1998

1999

2000

2001

2002

2003

2004

2005

e e e e
ee
12 3

4

5

2006

2007

2008...
IE11の主な新機能
http://technet.microsoft.com/ja-jp/ie/dn269977

http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
赤字:Windows 7非対応機能

IE11 の新機能


互換性



レイアウト



タッチ



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



境界線の画像



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



全画面 API

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

電話番号の自動検出



リンクの強調表示



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



Media Source Extensions



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

...
F12
Chrome との違い
メニュー

みんな大好き完全日本語!
名前が潔い

F12 開発者ツール
F12 Developer Tools

Chromeは、「Chrome Developer Tools」
機能

Internet Explorer
F12 開発者ツール
なんでもできるわけではないけど
便利でよく使う機能を
簡単に使えるようにまとめました。
Internet Explorer 11 (Press F12 key)
DOM Expl...
F12開発者ツール
生まれ変わった UI

Surface RT( ARM )でも動作する!
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク

UI の応答
プロファイラー
メモリ
エミュレーション

IE10のメニュー
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク

UI の応答
プロファイラー
メモリ
エミュレーション
リクエスト

レスポンス

HTML描画

スクリプト
実行

表示
生まれ変わった UI


HTML 5時代の新しい要件に対応
以前は…

HTML5時代
ようこそ

あなたは 000010 人目のお客様です
Sorry, this page is Japanese only.

HTML

HTML5

...
生まれ変わった UI


HTML 5時代の新しい要件に対応
要素を選択

選択した要素を強調

コンソールを表示
IEを前面に表示

要素の階層

ピン留めする
DOM Explorer



HTML, CSSを確認・調整



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



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



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



インテリセンスで入力が容易に
コンソール


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

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

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

インテリセンスが利用可能
複数行に切り替え可能

どのツールからでもコンソールにアクセス可能に
コンソール デバッグ APIにいく...
デバッガー

Web Workersのデバッグ

ミニファイされたコードの整形

ウォッチ

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

ブレークポイントの反映にリフレッシュは不要に
タブ表示により複数のスクリプトの管理が容易に
ブレ...
ネットワーク
ページ表示までの時間

通信の詳細(要求、応答のヘッダー、本文)

通信の詳細時間(要求、待機、応答)

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

UIの応答性を計測



フレームレート、CPU利用率をグラフィカルに表示
アプリ ライフサイクルとユーザーマークの表示
performance.mark(markName);

UI の応答

CPU使用率とその内訳

視覚スループット
(FPS)

タイムラインの詳細

タイムライン詳細の内訳
「HTMLの解析」の...
UI の応答


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



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

*1 2013年10月の Microsoft Store の価格です。
プロファイラー
function の処理時間と回数を調査


機能=function


回数=呼び出し回数



包括時間(ミリ秒)= 子 function を含む時間



排他時間(ミリ秒)= 子 function を含まない

...
メモリ
変数やHTMLエレメントのメモリ使用量を調査
差分の詳細を確認

スナップショット
を作成
メモリ、オブジェクトの増減を抽出

デタッチされたDOMノードの識別
メモリの増加ポイントを識別
オブジェクトが使用しているメモリを計測
エミュレーション
<meta http-equiv="X-UA-Compatible" content="IE=8">
の記述がないときちんと表示されない場合もある。
IE以外のUAも指定可能
ディスプレイの向き(縦・横)
解像度を指定して表示...
パフォーマンス・ダッシュボード

状況をページ内に表示してリアルタイムに確認可能
まとめ
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ

エミュレーション
Upcoming SlideShare
Loading in …5
×

Internet Explorer 11 の F12 開発者ツール

4,248 views

Published on

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

Published in: Technology

Internet Explorer 11 の F12 開発者ツール

  1. 1. F12 開発者ツール – Internet Explorer 11 尾崎 義尚 2013/12/13
  2. 2. 自己紹介  尾崎 義尚 – ネクストスケープ  Microsoft MVP for Internet Explorer & userAgents.ie  犬 と 猫2匹 を飼っています。 猫A 猫C プリンセス・D・ イザベラ
  3. 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. 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. 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. 6. IE11の主な新機能
  7. 7. http://technet.microsoft.com/ja-jp/ie/dn269977 http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
  8. 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. 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. 10. F12
  11. 11. Chrome との違い
  12. 12. メニュー みんな大好き完全日本語!
  13. 13. 名前が潔い F12 開発者ツール F12 Developer Tools Chromeは、「Chrome Developer Tools」
  14. 14. 機能 Internet Explorer F12 開発者ツール なんでもできるわけではないけど 便利でよく使う機能を 簡単に使えるようにまとめました。 Internet Explorer 11 (Press F12 key) DOM Explorer コンソール デバッガー ネットワーク UIの応答 プロファイラー メモリ エミュレーション 税込 0円
  15. 15. F12開発者ツール
  16. 16. 生まれ変わった UI Surface RT( ARM )でも動作する!
  17. 17. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション IE10のメニュー
  18. 18. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション リクエスト レスポンス HTML描画 スクリプト 実行 表示
  19. 19. 生まれ変わった UI  HTML 5時代の新しい要件に対応 以前は… HTML5時代 ようこそ あなたは 000010 人目のお客様です Sorry, this page is Japanese only. HTML HTML5 about 散文詩 工事中<m(__)m> 上から下に流れるレイアウト CSS3 複雑に絡み合うレイアウト
  20. 20. 生まれ変わった UI  HTML 5時代の新しい要件に対応
  21. 21. 要素を選択 選択した要素を強調 コンソールを表示 IEを前面に表示 要素の階層 ピン留めする
  22. 22. DOM Explorer  HTML, CSSを確認・調整  リアルタイムに状況を確認可能に  パンくずでエレメント階層にアクセス可能  ドラッグ&ドロップでエレメントの移動が可能  インテリセンスで入力が容易に
  23. 23. コンソール  対話によるコードの実行、情報の取得 どこからでもアクセス可能 オブジェクト階層が展開可能 インテリセンスが利用可能 複数行に切り替え可能 どのツールからでもコンソールにアクセス可能に コンソール デバッグ APIにいくつかのメソッドが追加 http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85) インテリセンス(オートコンプリート)
  24. 24. デバッガー Web Workersのデバッグ ミニファイされたコードの整形 ウォッチ ブレイクポイント コールスタック ブレークポイント ブレークポイントの反映にリフレッシュは不要に タブ表示により複数のスクリプトの管理が容易に ブレークポイントの位置がスクロールバーに表示されるように
  25. 25. ネットワーク ページ表示までの時間 通信の詳細(要求、応答のヘッダー、本文) 通信の詳細時間(要求、待機、応答) リクエスト タイミング情報が改善 圧縮情報キャプチャの改善
  26. 26. UI の応答  UIの応答性を計測  フレームレート、CPU利用率をグラフィカルに表示
  27. 27. アプリ ライフサイクルとユーザーマークの表示 performance.mark(markName); UI の応答 CPU使用率とその内訳 視覚スループット (FPS) タイムラインの詳細 タイムライン詳細の内訳 「HTMLの解析」の裏で動いている処理をグラフ化
  28. 28. UI の応答  Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI  [デバッグ] – [パフォーマンスと診断] *1 2013年10月の Microsoft Store の価格です。
  29. 29. プロファイラー function の処理時間と回数を調査  機能=function  回数=呼び出し回数  包括時間(ミリ秒)= 子 function を含む時間  排他時間(ミリ秒)= 子 function を含まない 呼び出しツリーはfunctionが階層で表示される Web ワーカーで実行されたfunctionのトラッキング
  30. 30. メモリ 変数やHTMLエレメントのメモリ使用量を調査 差分の詳細を確認 スナップショット を作成 メモリ、オブジェクトの増減を抽出 デタッチされたDOMノードの識別 メモリの増加ポイントを識別 オブジェクトが使用しているメモリを計測
  31. 31. エミュレーション <meta http-equiv="X-UA-Compatible" content="IE=8"> の記述がないときちんと表示されない場合もある。 IE以外のUAも指定可能 ディスプレイの向き(縦・横) 解像度を指定して表示の確認が可能 →レスポンシブUIの確認 緯度・経度を指定して位置情報を使ったアプリの動作確認 が可能 複数の画面タイプにおけるレスポンシブ デザインのテスト
  32. 32. パフォーマンス・ダッシュボード 状況をページ内に表示してリアルタイムに確認可能
  33. 33. まとめ DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション

×