ChromeでPOSTで送信したデータを確認する方法!

ChromeでPOST通信で送信したデータ(パラメータ)を確認する方法を紹介します。GET通信であればURLにパラメータを確認できますが、POST通信の場合はデベロッパーツールから簡単に確認することが出来ます。

コンテンツ [表示]

  1. 1ChromeでPOSTで送信したデータを確認したい
  2. 2ChromeでPOSTで送信したデータを確認する方法

ChromeでPOSTで送信したデータを確認したい

GET通信であれば、URLにパラメータが付くため、URLを見れば付加されているパラメータを確認することが出来ます。

GET通信の際のパラメータの確認
このようにGET通信であれば、URLの「?」の後ろにパラメータがついているのが確認出来ます。

一方でPOST通信の場合はURLにパラメータが隠れているため、URLを見てもパラメータの確認が行なえません。

そこで今回はChromeのデベロッパーツールを使って、POST通信時に送信したパラメータを確認する方法を紹介します。

Photo bylmonk72

ChromeでPOSTで送信したデータを確認する方法

それではまずはChromeのデベロッパーツールを開きましょう。以下のキーボードショートカットでChromeのデベロッパーツールを開くことが出来ます。

デベロッパーツールを起動するキーボードショートカット

[WindowsのChrome]
Ctrl + Shift + I
または
F12

[MacのChrome]
Command + Option + I
あわせて読みたい
Chromeでデベロッパーツールをショートカットで開く方法!のイメージ
Chromeでデベロッパーツールをショートカットで開く方法!
Chromeでデベロッパーツールをショートカットキーで開く方法を紹介します。先にショートカットのやり方の結論を伝え、また検証から開く方法やメニューから開く方法もあわせて解説します。

デベロッパーツールが開いている状態で、フォームに情報を入力し、POST通信させてみましょう。

デベロッパーツールでPOST通信時のパラメータ
デベロッパーツールが開いている状態でPOST通信をしたら、Networkタブで1件データが追加されます。
※「Doc」で絞り込みさせておくと見やすいです。

それをクリックすると通信時のヘッダーの中身などを確認することが出来ます。その最下部にPOST通信時のパラメータがあり、確認することが出来ます。
GeekHive採用サイト

関連記事