POST/GET(フォーム)データのChromeデベロッパーツールによる確認方法!

この記事からわかること

  • デベロッパーツールの使い方
  • POST情報の確認方法
  • POSTだけでなくGETの情報方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

phpで扱えるスーパグローバル変数の$_GETや$_POST。お問い合わせ機能やチャット機能など汎用性の高い変数にフォームで格納した情報をデベロッパーツールで確認する方法を解説します。

デベロッパーツールでのPOST情報の確認方法

GoogleのChromeに標準装備されているデベロッパーツールはキーボードの「F12」を押すかChromeの自アイコンの右側の「 」をクリックし「その他のツール」 > 「デベロッパーツール」で起動できます。

開いたら次の手順でセットアップしていきます。

デベロッパーツールでNetworkタブを開く

これでネットワークの情報を確認することができるようになりました。

次はPOSTを実際に送信して確認していきます。

デベロッパーツールで「Header」タブをクリック デベロッパーツールで「Form Data」をクリック

流れの細かい説明

NetWorkタブ

最初に「NetWork」タブを表示します。他にも「Elements(HTMLの構造を確認)」「Console(jsのエラーを確認)」「Sources(読み込んだファイルを確認)」などそれぞれに万能な機能を持ち合わせたタブがたくさんあります。

その中でも「NetWork」タブは通信状況を確認することができます。

Webページはクライアント(私たち側)とサーバ側(提供側)に分かれて通信を行いwebページを表示しています。POSTやGETもその情報の中の1つです。

そしてその際にクライアント側はサーバに対してリクエスト情報を、サーバ側はリクエストに応答してレスポンス情報を送信します。それらの情報もNetWorkタブで確認することができます。

リクエスト情報とレスポンス情報

先程の「Form Data」があった場所には他の項目も用意されています。それが「General」/「Request Headers」/「Response Headers」です。

General」は訳すと「全般的」という意味になります。ここにはレスポンスやリクエストの主要な情報だけがまとめて表示されます。

Request Headers(リクエストヘッダ)」/「Response Headers(レスポンスヘッダ)」は先ほども説明した通りクライアントとサーバのやりとり情報が表示されます。

リクエストヘッダにはサーバに対する要求やクライアントの情報、GETを使ったかPOSTを使ったかも表示されています。

リクエストヘッダ

レスポンスヘッダにはサーバの情報や実際に表示するWebページの情報が格納されています。HTTPステータスもここで確認することができます。

レスポンスヘッダ

HTTPステータスはサーバの処理結果を表す番号です。代表的なものをまとめておきます。

ステータス 意味
200 成功
302 リダイレクト
404 リソースが見つからない
500 サーバーエラー

デベロッパーツールでGET情報を確認する

フォームのメソッドを「post」ではなく「get」にして再度同じ手順を踏んでみましょう。

//<form action="chat.php" method="post">
  <form action="chat.php" method="get">

すると先程の「Form Data」の部分が「Query String Parameters」に変わっています。

ファイル名も何やら長ったらしくなっていますね!

デベロッパーツールで「Query String Parameters」をクリック

GETはURLの末尾に情報を格納して渡す仕組みになっています。なのでURLが情報の分だけ長くなってしまうんですね!正しくGETされている証拠です。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

関連記事:【スマホ】ブラウザのキャッシュを削除してCSSが効かない問題を解決!

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index