Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cod2012 Room T-1

1,109 views

Published on

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

Published in: Technology
  • Be the first to comment

Cod2012 Room T-1

  1. 1. Internet Explorer のデバッグ ツールCommunity Open Day 2012村地 彰ブラウザー勉強会
  2. 2. About me 村地 彰 株式会社シーピーエス 代表取締役 hebikuzure@hebikuzure.com @hebikuzure http://www.hebikuzure.com/ Microsoft MVP (Client Operating System, Internet Explorer) Apr. 2011 ~
  3. 3. AgendaInternet Explorer の Web デバッグ ツールを使ってみよう  F12 開発者ツール  ビルトインのデバッグツール  手軽に実行できる便利な機能  Fiddler  Web デバッグ ツールの定番  強力な機能、柔軟なカスタマイズ  STRACE / HTTPREPLAY  HTTP/ HTTPS 通信のログ採取とオフライン解析  トラブル再現による状況の把握、調査PAGE 3
  4. 4. F12 開発者ツール
  5. 5. F12 開発者ツールの概要  F12 キー押下で起動できる  タブごとに起動できる  主な機能  HTML / CSS の解析  Javascript デバッグ  ネットワーク リクエスト / レスポンス解析PAGE 5
  6. 6. F12 開発者ツールの便利機能  キャッシュ / Cookie の制御  キャッシュ / Cookie の無効化・削除  デザイン確認に便利なツール  イメージ レポート / ルーラー / カラー ピッ カー  ウィンドウ サイズの指定  HTML / CSS / アクセシビリティの検証  ドキュメント モードの切り替え  ブラウザー モードの切り替えPAGE 6
  7. 7. ハンズ オン  クリックで要素を選択  カラー ピッカー / イメージ レポート  Javascript の書式設定  ブラウザー モードの変更  ドキュメント モードの変更  ネットワークのキャプチャPAGE 7
  8. 8. Fiddler
  9. 9. Fiddler の概要  ローカル プロキシとして動作  Internet Explorer 以外のアプリケーションの通信 もデバッグできる  主な機能  HTTP トラフィックのキャプチャと解析  リクエスト ビルダー  リクエスト / レスポンスの置き換え  高度なカスタマイズ・自動化PAGE 9
  10. 10. ハンズオン – 起動とキャプチャ  Fiddler を起動すると自動的にキャプチャ開始  ローカル プロキシ設定の確認  トラフィックの見方PAGE 10
  11. 11. ハンズオン – コンテンツの置き換え 1. AutoResponder タブで以下を有効にする  Enable automatic responses  Unmatched requests passthrough 2. Add ボタンをクリック  Rule Editor でマッチさせたい URL パターンと置き換え る URL などを入力 3. Save をクリック 4. ブラウザー キャッシュを削除 5. ページを表示PAGE 11
  12. 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. 13. Snippet 1 の挿入PAGE 13
  14. 14. Snippet 2 の挿入PAGE 14
  15. 15. STRACE / HTTPREPLAY
  16. 16. STRACE の概要  Windows Internet (WININET) コンポーネントの内部情 報をログとして記録するツール  Internet Explorer 以外のアプリケーションの通信も記録 可能  HTTP / HTTPS の通信内容が記録できる  HTTPS のメッセージもデコードして記録する  ログ ファイルとして出力されるので、採取環境とは 別の環境で解析できる  ログ ファイルは可読性のあるテキスト ファイルPAGE 16
  17. 17. HTTPREPLAY の概要  STRACE の出力したログ ファイルをわかりやすく表示 するツール  ログの情報を元に、オフラインでブラウザー上の動作 を再現できる  Wininet.dll のデバッグログ、Fiddler のキャプチャ ロ グを解析・表示することもできるPAGE 17
  18. 18. ハンズ オン  STRACE でログ採取  STRACE.CMD を実行  IE が起動するので必要なページの表示、操作を行う  IE を終了する  HTTPREPLAY でログからページを再現  C:Program Files (x86)HTTPREPLAY (x86 環境では Program Files) からコマンド プロンプトを起動  HTTPREPLAY.CMD logfilename を実行 (ログ ファイルをコマンド プロンプトウィンドウにド ロップ)PAGE 18
  19. 19. まとめ  F12 開発者ツール  用意なしにすぐに利用できる  解析対象ページに直接アクセスする必要がある  Fiddler  F12 開発者ツールより高度な HTTP デバッグ機能  IE 以外のアプリケーションに対応  使い方がやや難しい (高機能ゆえ)  STRACE / HTTPREPLAY  オフライン解析ができる  他のツールのようなデバッグ機能は乏しい (トラブル対応の事後解析向きかも)PAGE 19

×