cod2012 room t-1

Internet Explorer のデバッグ ツールCommunity Open Day 2012 村地　彰ブラウザー勉強会

About me 村地　彰 株式会社シーピーエス 代表取締役

hebikuzure@hebikuzure.com @hebikuzure http://www.hebikuzure.com/

Microsoft MVP (Client Operating System, Internet Explorer) Apr. 2011 ～

Agenda

F12 開発者ツール ビルトインのデバッグツール 手軽に実行できる便利な機能

Fiddler Web デバッグ ツールの定番 強力な機能、柔軟なカスタマイズ

STRACE / HTTPREPLAY HTTP/ HTTPS 通信のログ採取とオフライン解析 トラブル再現による状況の把握、調査

PAGE 3

Internet Explorer の Web デバッグ ツールを使ってみよう

F12 開発者ツール

F12 開発者ツールの概要 F12 キー押下で起動できる タブごとに起動できる 主な機能

HTML / CSS の解析 Javascript デバッグ ネットワーク リクエスト / レスポンス解析

PAGE 5

F12 開発者ツールの便利機能 キャッシュ / Cookie の制御

キャッシュ / Cookie の無効化・削除 デザイン確認に便利なツール

イメージ レポート / ルーラー / カラー ピッカー ウィンドウ サイズの指定 HTML / CSS / アクセシビリティの検証 ドキュメント モードの切り替え ブラウザー モードの切り替え

PAGE 6

ハンズ オン クリックで要素を選択 カラー ピッカー / イメージ レポート Javascript の書式設定 ブラウザー モードの変更 ドキュメント モードの変更 ネットワークのキャプチャ

PAGE 7

Fiddler

Fiddler の概要 ローカル プロキシとして動作 Internet Explorer 以外のアプリケーションの

通信もデバッグできる 主な機能

HTTP トラフィックのキャプチャと解析 リクエスト ビルダー リクエスト / レスポンスの置き換え 高度なカスタマイズ・自動化

PAGE 9

ハンズオン – 起動とキャプチャ Fiddler を起動すると自動的にキャプチャ開始 ローカル プロキシ設定の確認 トラフィックの見方

PAGE 10

ハンズオン – コンテンツの置き換え

1. AutoResponder タブで以下を有効にする Enable automatic responses Unmatched requests passthrough

2. Add ボタンをクリック Rule Editor でマッチさせたい URL パターンと置き

換える URL などを入力3. Save をクリック4. ブラウザー キャッシュを削除5. ページを表示

PAGE 11

ハンズオン – Compat Inspector の設置1. Rules - Customize Rules で Script Editor を起動2. Snippet 1 を snippet.txt からコピー

Go - OnBeforeResponse で OnBeforeResponse ハンドラを見つけ、その最後に追加

3. Snippet 2: を snippet.txt からコピー 一番最後の "}" の前に追加

4. File - Save で保存し、 Fidder Script Editor を終了5. Fiddler の Rules - Use Compat Inspector を選択6. 互換性をチェックしたいサイトに移動7. ドキュメント モードを IE9 標準に切り替える8. ページの右上に Compat Inspector が表示される

PAGE 12

Snippet 1 の挿入

PAGE 13

Snippet 2 の挿入

PAGE 14

STRACE / HTTPREPLAY

STRACE の概要 Windows Internet (WININET) コンポーネントの内

部情報をログとして記録するツール Internet Explorer 以外のアプリケーションの通信も

記録可能 HTTP / HTTPS の通信内容が記録できる

HTTPS のメッセージもデコードして記録する ログ ファイルとして出力されるので、採取環境とは

別の環境で解析できる ログ ファイルは可読性のあるテキスト ファイル

PAGE 16

HTTPREPLAY の概要 STRACE の出力したログ ファイルをわかりやすく

表示するツール ログの情報を元に、オフラインでブラウザー上の動

作を再現できる Wininet.dll のデバッグログ、 Fiddler のキャプ

チャ ログを解析・表示することもできる

PAGE 17

ハンズ オン STRACE でログ採取

STRACE.CMD を実行 IE が起動するので必要なページの表示、操作を行う IE を終了する

HTTPREPLAY でログからページを再現 C:\Program Files (x86)\HTTPREPLAY (x86 環境で

は Program Files) からコマンド プロンプトを起動 HTTPREPLAY.CMD logfilename を実行

( ログ ファイルをコマンド プロンプトウィンドウにドロップ )

PAGE 18

まとめ F12 開発者ツール

用意なしにすぐに利用できる 解析対象ページに直接アクセスする必要がある

Fiddler F12 開発者ツールより高度な HTTP デバッグ機能 IE 以外のアプリケーションに対応 使い方がやや難しい ( 高機能ゆえ )

STRACE / HTTPREPLAY オフライン解析ができる 他のツールのようなデバッグ機能は乏しい

( トラブル対応の事後解析向きかも )

PAGE 19