読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

Firebugでブラウザの通信内容を監視すると文字化けするが,Chrome開発ツールなら大丈夫

ブラウザ 通信 MozillaFirefox GoogleChrome Firebug

ブラウザ上での通信を監視する際に,どのようなツールを使うか。

通信内容が外国語だと,Firebugでは苦労する

あるWebアプリの,ブラウザ上での通信内容を監視していた。

通信の中身はAjaxによるXmlHttpRequestで,中国語の繁体字が含まれている。


FirefoxからFirebugのNetタブでHTTPレスポンスを閲覧していると,
ときどき文字化けが発生する。

ブラウザに出力される通信結果そのものは正しいのだが,
Firebug上に表示される通信監視結果が文字化けしてしまい,うまくキャプチャできないのだ。

なお文字コードはUTF-8でエンコーディングしてある。

Wiresharkでチマチマとパケットを収集する労力は避けたかった。

Firebugを使うのをやめてみた

そこで,ブラウザをGoogle Chromeに切り替えた。

Chrome Developer Toolsを開き,ネットワークパネルからキャプチャを実行すると,
どのような場合でも文字化けは回避できた。

こうして解決。

参考資料

Chromeの開発ツールのNetworkについて
http://tokuda109.blogspot.jp/2011/12/...

  • リクエストヘッダやレスポンスヘッダ等を検証することができます


ブラウザの開発ツールとFiddler2でHTTP通信をキャプチャーしてみる |
http://celtislab.net/archives/2013041...

  • Chrome の Developer tools や firefox の firebug にもネットワークパネルがあり、これを使用すればHTTP通信をキャプチャすることが出来ます


ADC MEETUP ROUND02 レポート SESSION5:Chromeで変わるWebサイト開発:Developer Toolsのご紹介 | デベロッパーセンター
http://www.adobe.com/jp/devnet/dreamw...

  • サーバー側のAPIにアクセスするときや、通信内容の中身が見たいときに使うと便利
  • 通信の内容を見たいときは、リソースをクリックすることで表示が切り替わり、httpヘッダーやresponseヘッダーの中身を確認できる。contentというタブでは、画像などのプレビューもできる


意外と知らないChrome Developer Toolsの便利な機能 - Qiita [キータ]
http://qiita.com/grapswiz@github/item...

  • 「Preserve Log upon Navigation」ボタンを押すと、HTTPリクエストを、たとえリロードがかかってもどんどん貯めることができる