POST通信のリクエストURLとForm内容をChromeで簡単に確認する方法

Web開発者向けにPOST通信の裏で流れているデータを最も簡単でいて早く確認する方法を説明しようと思います。

クローリングやスクレイピングなどを実装したい時、POSTするリクエストURLやFormのデータ内容を取得したい時があります。この際ブラウザなどを使って直接HTMLコードからForm内容を確認しようとすると読み取るのが大変ですし、そもそもHTMLコードを見ることも出来ないサイトもあります。

そこでChromeのデベロッパーツールを使いましょう。デベロッパーツールはデフォルトでChromeに搭載されており、Web開発に欠かせないツールです。起動はChrome上で右クリックして「検証」という項目をクリックすればOKです。

以下にクロネコヤマトの荷物問い合わせサイトを例にリクエストURLとForm内容を確認する手順を記載します。

 

①デベロッパーツールの「Network」タブを開いときます。

Chrome_1

 

②サイトの「お問い合わせ開始」ボタンを押してPOST通信させると「Network」ウィンドウに通信履歴がずらっと出てきますが、一番上の履歴をクリックしましょう(「Network」タブの上部にある「Preserve log」をチェックしていると過去の通信履歴が残るのでこの場合は一番上ではなくなります)。すると「Headers」タブにリクエストの内容が表示されています。「General」という項目でリクエストURLを確認することが出来ます。

Chrome_2

 

③「Headers」タブをスクロールすると「Form Data」という項目があるので、ここでリクエストした全てのFormの項目名と値を確認することが出来ます。

Chrome_3

 

sponsor