internet explorer 11 の f12 開発者ツール
DESCRIPTION
HTML5 ビギナーズでお話したIE11のF12開発者ツールに関する資料です。TRANSCRIPT
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の応答
プロファイラー
メモリ
エミュレーション