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