Your SlideShare is downloading. ×
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Internet Explorer 11 の F12 開発者ツール
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Internet Explorer 11 の F12 開発者ツール

2,534

Published on

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

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

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,534
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 の応答 プロファイラー メモリ エミュレーション

×