HTTP通信のキャプチャをとるツールFiddlerをWindowsにインストールする


#Fiddlerとは？
Windowsマシンで動作するhttpやhttpsなどのプロトコルに特化したプロキシサーバ―です。Fiddlerを使うとすべてのアプリの対象プロトコルを使用する要求がFiddler越しで送られるようになります。Fiddlerでそれらの要求を閲覧したり、書き換えて送ったり、独自に作成した要求を送る、などができるらしいです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/03fbea74-184b-2767-c9fd-844bd36629d8.png)
引用：https://www.telerik.com/download/fiddler

#手順
##ダウンロード
[ダウンロードサイト](https://www.telerik.com/download/fiddler)で任意の情報を入力して[Download for Windows] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/811c9e6d-e5ac-7fd0-0ca2-4fce1c0866e2.png)
こんな画面に遷移しますが私は×で消しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/f1d60d4c-a243-7267-66be-3cff635e4a5f.png)
ダウンロードされます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/e7b24ff4-1e22-4d6d-85dc-a2bba25b73a2.png)

##インストール
ダウンロードした FiddlerSetup.exe をダブルクリックし、[Agree]をクリックしてインストールウィザードを進めます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/1d62865b-2342-df37-4091-3578d0ff788a.png)
私はデフォルトのフォルダのままで[Install] を選択しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/0521b7a4-e637-462a-910e-65cc76702a4a.png)
インストールが完了したら、ブラウザとインストールウィザードを終了します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/8ceefe1c-c84b-1bfe-87a3-21a14dfe60f1.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/e8ddf937-5451-36ab-b253-3471d02acf1d.png)

##セットアップ
スタートなどからFiddler4を起動して
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/f0c8b06a-2bff-4335-3fdc-8c7f02810f15.png)
警告ダイアログが出力される場合がありますが、キャンセルでOKです。
起動後から、トラフィックのキャプチャが開始されています
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/42a60811-7266-dcab-a978-ea902fe0155b.png)
 [File] – [Capture Traffic] のチェックを外し、一旦キャプチャを停止します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/78ee6659-e379-8ffa-52c4-283ce565a133.png)
[Tools] – [Option] を開き、HTTPS タブを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/564d6309-9d4b-92c5-eeb9-bf7fce01d9ac.png)
Decrypt HTTPS traffic にチェックを入れます。
以下のダイアログが表示されますので、[Yes]をクリックして
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/d3aa5902-8e9a-0853-994f-ccc9b279aa66.png)
[はい] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/5cc7eefc-4b0d-0f10-476c-5842cfb4110e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/304a796e-8d66-71e9-3dec-d7f77af93a2f.png)
Ignore server certificate errors にチェックを入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/24c38b70-94e0-8733-f6ed-af5e79149d89.png)
OK をクリックし、キャプチャの準備は完了です。

##パケットデータを削除しておく
[×] - Remove allを押下することで、情報をクリアできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/c9886dd5-c02a-f4fa-7101-1bc06f28ddcb.png)

##パケットの開始・終了・保存
[File] – [Capture Traffic] のチェックを入れることでキャプチャが開始され、チェックを外すことで停止します。
キャプチャ停止後は、左ペインに事象再現時の HTTP (S) の通信が記録されている状態で、[File] – [Save] – [All Sessions] を選択し、OK を押して任意のファイルパスに .saz ファイルを保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/f43a602b-d0ea-d1e0-d517-47713fb1327f.png)

##特定のブラウザ通信やページのみにフィルタする
極力他の通信が発生しない状態でキャプチャ採取する方がよいと思いますがどうしても複数のブラウザやページを開いた状態になる場合などはフィルタ設定して採取することができるみたいです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/5f9e5d3f-26a9-bec2-8949-5bd24030e376.png)

##リクエストの内容を書き換える
同じFiltersタブのBreakpoints設定ではブラウザから送信される内容をFiddlerで受け取り、それを書き換えた上でサーバに送るということができるようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/1f1b15ac-bae8-0e64-c8f2-f388796c0d37.png)
各項目にチェックを入れることで、ブラウザからのリクエストをFiddlerが受け取ったときにいったんサーバへの送信を止めることができるようになります。
>
- Break request on POST - ブラウザからPOSTされたときに止まります
- Break request on GET with query string - クエリストリング付きのGETリクエストの発行時に止まります
- Break on XMLHttpRequest - ブラウザからのリクエストヘッダに X-Requested-With: XMLHttpRequest が含まれているときに止まります。
- Break response on Content-Type - サーバからのレスポンスが指定されたContent-Typeであった場合に止まります。この設定のみリクエストではなくレスポンス時に止まります。


他にもたくさん設定があって色んなことができそうです。

#引用及び参考URL
Fiddlerの少し便利な使い方：
　https://e-algorithm.xyz/fiddler/
fiddler入門！fiddler2ダウンロード＆使い方
　https://www.securesky-tech.com/column/naruhodo/07.html
Webデバッグができるツール「Fiddler」の紹介
　https://amg-solution.jp/blog/1018