COD 2012 東京会場 Room T-1 のハンズオンの資料スライド

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

2. About me
 村地 彰
 株式会社シーピーエス 代表取締役
 hebikuzure@hebikuzure.com
 @hebikuzure
 http://www.hebikuzure.com/
 Microsoft MVP (Client Operating System, Internet Explorer) Apr. 2011 ～

3. Agenda
Internet Explorer の Web デバッグ ツールを使ってみよう
 F12 開発者ツール
 ビルトインのデバッグツール
 手軽に実行できる便利な機能
 Fiddler
 Web デバッグ ツールの定番
 強力な機能、柔軟なカスタマイズ
 STRACE / HTTPREPLAY
 HTTP/ HTTPS 通信のログ採取とオフライン解析
 トラブル再現による状況の把握、調査
PAGE 3

4. F12 開発者ツール

5. F12 開発者ツールの概要
 F12 キー押下で起動できる
 タブごとに起動できる
 主な機能
 HTML / CSS の解析
 Javascript デバッグ
 ネットワーク リクエスト / レスポンス解析
PAGE 5

6. F12 開発者ツールの便利機能
 キャッシュ / Cookie の制御
 キャッシュ / Cookie の無効化・削除
 デザイン確認に便利なツール
 イメージ レポート / ルーラー / カラー ピッ
カー
 ウィンドウ サイズの指定
 HTML / CSS / アクセシビリティの検証
 ドキュメント モードの切り替え
 ブラウザー モードの切り替え
PAGE 6

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

8. Fiddler

9. Fiddler の概要
 ローカル プロキシとして動作
 Internet Explorer 以外のアプリケーションの通信
もデバッグできる
 主な機能
 HTTP トラフィックのキャプチャと解析
 リクエスト ビルダー
 リクエスト / レスポンスの置き換え
 高度なカスタマイズ・自動化
PAGE 9

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

11. ハンズオン – コンテンツの置き換え
1. AutoResponder タブで以下を有効にする
 Enable automatic responses
 Unmatched requests passthrough
2. Add ボタンをクリック
 Rule Editor でマッチさせたい URL パターンと置き換え
る URL などを入力
3. Save をクリック
4. ブラウザー キャッシュを削除
5. ページを表示
PAGE 11

12. ハンズオン – 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

13. Snippet 1 の挿入
PAGE 13

14. Snippet 2 の挿入
PAGE 14

15. STRACE / HTTPREPLAY

16. STRACE の概要
 Windows Internet (WININET) コンポーネントの内部情
報をログとして記録するツール
 Internet Explorer 以外のアプリケーションの通信も記録
可能
 HTTP / HTTPS の通信内容が記録できる
 HTTPS のメッセージもデコードして記録する
 ログ ファイルとして出力されるので、採取環境とは
別の環境で解析できる
 ログ ファイルは可読性のあるテキスト ファイル
PAGE 16

17. HTTPREPLAY の概要
 STRACE の出力したログ ファイルをわかりやすく表示
するツール
 ログの情報を元に、オフラインでブラウザー上の動作
を再現できる
 Wininet.dll のデバッグログ、Fiddler のキャプチャ ロ
グを解析・表示することもできる
PAGE 17

18. ハンズ オン
 STRACE でログ採取
 STRACE.CMD を実行
 IE が起動するので必要なページの表示、操作を行う
 IE を終了する
 HTTPREPLAY でログからページを再現
 C:Program Files (x86)HTTPREPLAY (x86 環境では
Program Files) からコマンド プロンプトを起動
 HTTPREPLAY.CMD logfilename を実行
(ログ ファイルをコマンド プロンプトウィンドウにド
ロップ)
PAGE 18

19. まとめ
 F12 開発者ツール
 用意なしにすぐに利用できる
 解析対象ページに直接アクセスする必要がある
 Fiddler
 F12 開発者ツールより高度な HTTP デバッグ機能
 IE 以外のアプリケーションに対応
 使い方がやや難しい (高機能ゆえ)
 STRACE / HTTPREPLAY
 オフライン解析ができる
 他のツールのようなデバッグ機能は乏しい
(トラブル対応の事後解析向きかも)
PAGE 19