internet explorer 11 august updateのf12 開発者ツール

18

Upload: ozaki-yoshihisa

Post on 28-Nov-2014

665 views

Category:

Technology


5 download

DESCRIPTION

Internet Explorer 11 August Updateで改善された F12 開発者ツールの機能についてまとめました

TRANSCRIPT

Page 1: Internet Explorer 11 August UpdateのF12 開発者ツール
Page 2: Internet Explorer 11 August UpdateのF12 開発者ツール

はじめに

• INTERNET EXPLORER 11 AUGUST UPDATE についてまとめました。

• それより前については以下を参照してください。

Internet Explorer 11http://www.slideshare.net/yoshioms/ie11-f12

Internet Explorer 11 Update 1http://www.slideshare.net/yoshioms/ie11-f12update

Page 3: Internet Explorer 11 August UpdateのF12 開発者ツール

IE11 がアップデート

2014 年 8 月のアップデートで IE11 にアップデート

Page 4: Internet Explorer 11 August UpdateのF12 開発者ツール

ウィンドウの変更点

アイコンが饒舌に

• プロファイラー• メモリのアイコンが変更

ドキュメントモードの変更が簡単に

Page 5: Internet Explorer 11 August UpdateのF12 開発者ツール

DOM EXPLORERイベント

イベントペインで、タグに関連づけられている JavaScript 処理を確認可能に

Page 6: Internet Explorer 11 August UpdateのF12 開発者ツール

DOM EXPLORER属性

変更

追加

削除

属性ペインに変更前後が表示されるように

Page 7: Internet Explorer 11 August UpdateのF12 開発者ツール

DOM EXPLORERカラーピッカー

スポイトブラウザー外からも抽出可能

カラーホイールスライダーで色を生成

カラースイッチCSS に書かれている色から選択

Page 8: Internet Explorer 11 August UpdateのF12 開発者ツール

デバッガーソースマップの選択

前回の Update で、コメントにマップファイルが書かれている場合、AltJsのデバッグが可能になった。今回は、コメントがなくても、ローカルのマップを選択可能に

Page 9: Internet Explorer 11 August UpdateのF12 開発者ツール

デバッガー戻り値の検査

デバッガでファンクションの終端までステップを進めると、戻り値を確認することができるように

Page 10: Internet Explorer 11 August UpdateのF12 開発者ツール

デバッガーイベントブレークポイント、トレースポイント

イベントトレースポイントの追加

イベントブレークポイントの追加

コードにトレースポイント/ブレークポイントを設定するのではなく、イベントに設定することができるようになった。

ブレークポイントには、条件を設定可能。

Page 11: Internet Explorer 11 August UpdateのF12 開発者ツール

UIの応答インポート/エクスポート

プロファイリングセッションのインポート

プロファイリングセッションのエクスポート

Page 12: Internet Explorer 11 August UpdateのF12 開発者ツール

UI の応答選択範囲のサマリー

選択範囲のサマリーを表示

Page 13: Internet Explorer 11 August UpdateのF12 開発者ツール

UI の応答画像のプレビュー

画像の HTTP リクエストのプレビューが可能に

Page 14: Internet Explorer 11 August UpdateのF12 開発者ツール

UI の応答フィルターボタンが大きく、詳細に

フィルター名 説明

イベント名フィルター 入力された文字列が含まれるイベント名でフィルター

イベント継続時間 1ms 以上のイベント時間でフィルターすることが可能

これまで これから

Page 15: Internet Explorer 11 August UpdateのF12 開発者ツール

UIの応答フレームごとにグループ化 最上位のイベントをフレームごとにグループ化

Page 16: Internet Explorer 11 August UpdateのF12 開発者ツール

UI の応答スクリプトイベント

Mutation Observer とメディアクエリリスナーのイベントを識別できるようになった

Page 17: Internet Explorer 11 August UpdateのF12 開発者ツール

メモリインポート/エクスポート

プロファイリングセッションのインポート

プロファイリングセッションのエクスポート

Page 18: Internet Explorer 11 August UpdateのF12 開発者ツール

エミュレーション設定の保持

エミュレーション設定の保持の有効化

エミュレーション設定の保持のリセット

次回開いた時もエミュレーション設定を維持することができるように