Chrome開発者ツールでHTTP通信を見る

はじめに

Webページを開くとき、ブラウザの裏側ではさまざまなHTTP通信が行われています。

たとえば、HTMLを取得する通信、CSSファイルを取得する通信、JavaScriptファイルを取得する通信、画像を読み込む通信、APIからJSONデータを取得する通信などです。私たちが普段見ているWebページは、こうした複数の通信によって組み立てられています。

基本情報技術者試験でも、HTTPは重要なテーマのひとつです。

HTTPリクエスト、HTTPレスポンス、GETやPOSTといったメソッド、ステータスコード、ヘッダーなどの用語は、試験でも実務でもよく登場します。ただし、用語だけを暗記していると、実際にWebアプリケーションを開発するときにイメージしにくいかもしれません。

そこで役立つのが、Chrome開発者ツールのNetworkタブです。

Networkタブを使うと、ブラウザがどのURLにリクエストを送っているのか、サーバからどのようなレスポンスが返ってきたのか、ステータスコードは何か、レスポンスの中身はどうなっているのか、といった情報を実際に確認できます。

この記事では、Chrome開発者ツールを使ってHTTP通信を見る方法を、基本情報技術者試験の知識と結びつけながら解説します。

JavaScriptのfetchを使った通信や、PHPでJSONレスポンスを返す簡単な例も扱いながら、「HTTP通信はブラウザ上で実際に確認できるもの」という感覚をつかんでいきましょう。

Chrome開発者ツールとは

Chrome開発者ツールとは、Google Chromeに標準で搭載されている開発者向けのツールです。

WebページのHTML構造を確認したり、CSSの適用状況を調べたり、JavaScriptのエラーを確認したり、ページの表示速度を調査したりできます。Webアプリケーションを開発するときだけでなく、表示崩れや通信エラーの原因を調べるときにもよく使われます。

Chrome開発者ツールは、Webエンジニアにとって基本的な調査ツールのひとつです。

開き方はいくつかあります。

• ページ上で右クリックして「検証」を選ぶ
• Macの場合は Command + Option + I
• Windowsの場合は Ctrl + Shift + I
• Chromeのメニューから「その他のツール」→「デベロッパーツール」を選ぶ
  

開発者ツールを開くと、上部にいくつかのタブが表示されます。

代表的なものには、次のようなタブがあります。

• Elements：HTMLやCSSを確認する
• Console：JavaScriptのログやエラーを確認する
• Sources：読み込まれたJavaScriptなどのソースを確認する
• Network：HTTP通信を確認する
• Application：Cookie、LocalStorage、SessionStorageなどを確認する
  

この記事で主に使うのは、この中の Network タブです。

Networkタブを使うと、ブラウザがWebサーバに送ったHTTPリクエストや、サーバから返ってきたHTTPレスポンスを確認できます。

たとえば、ページを表示するときに読み込まれたHTML、CSS、JavaScript、画像、API通信などが一覧で表示されます。さらに、それぞれの通信について、リクエストURL、ステータスコード、ヘッダー、レスポンス本文、通信時間なども確認できます。

基本情報技術者試験では、HTTPの仕組みを用語として学ぶことが多いですが、Chrome開発者ツールを使うと、それらを実際の通信として見ることができます。

つまり、Networkタブは「HTTPリクエストとHTTPレスポンスを目で確認するための道具」と考えるとわかりやすいです。

NetworkタブでHTTP通信を見る

Chrome開発者ツールでHTTP通信を確認するときは、Network タブを使います。

開発者ツールを開いたら、上部にある「Network」を選択します。ただし、Networkタブを開いただけでは、まだ通信が表示されていないことがあります。

その場合は、Networkタブを開いた状態でページを再読み込みしてみましょう。

ページを再読み込みすると、ブラウザがサーバに対して行った通信が一覧で表示されます。HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイル、API通信などが並んで表示されます。

この一覧に表示されている1行1行が、基本的には1つのHTTP通信です。

たとえば、あるWebページを開いたとき、最初にHTMLを取得する通信が発生します。そのHTMLの中にCSSやJavaScript、画像への参照が書かれていれば、ブラウザはそれらのファイルも追加で取得します。

つまり、私たちが1つのページを開いているように見えても、裏側では複数のHTTP通信が行われているということです。

Networkタブの一覧には、主に次のような項目が表示されます。

• Name：取得したファイル名やリクエスト先
• Status：HTTPステータスコード
• Type：HTML、CSS、JavaScript、画像、fetch通信などの種類
• Size：通信で取得したデータサイズ
• Time：通信にかかった時間
  

特に最初のうちは、Name、Status、Type の3つを見るだけでも十分です。

Nameを見ると、どのURLやファイルにアクセスしたのかが分かります。Statusを見ると、その通信が成功したのか、リダイレクトされたのか、エラーになったのかが分かります。Typeを見ると、HTMLなのか、CSSなのか、JavaScriptなのか、API通信なのかを判断できます。

また、Networkタブには通信の種類で絞り込む機能もあります。

たとえば、上部にある「Fetch/XHR」を選ぶと、JavaScriptのfetchやAjaxによるAPI通信を中心に確認できます。「JS」を選ぶとJavaScriptファイル、「CSS」を選ぶとCSSファイル、「Img」を選ぶと画像ファイルに絞って表示できます。

通信が多いページでは、すべての通信を一度に見ると分かりにくくなります。そのため、調べたい内容に応じて絞り込みを使うと便利です。

基本情報技術者試験では、HTTP通信を「クライアントがリクエストを送り、サーバがレスポンスを返す」という形で学びます。

Networkタブを使うと、このリクエストとレスポンスのやり取りを、実際のWebページ上で確認できます。まずは、ページを再読み込みしたときにどのような通信が発生しているのかを眺めてみるだけでも、HTTPのイメージがつかみやすくなります。

HTTPリクエストを確認する

Networkタブに表示された通信をクリックすると、その通信の詳しい内容を確認できます。

ここでまず見ておきたいのが、ブラウザからサーバへ送られた HTTPリクエスト です。

HTTPリクエストとは、クライアントであるブラウザが、サーバに対して「このデータをください」「この情報を送信します」と伝えるための通信です。

たとえば、Webページを開くとき、ブラウザはWebサーバに対してHTMLファイルを要求します。画像を表示するときは画像ファイルを要求します。フォームを送信するときやAPIからデータを取得するときにも、HTTPリクエストが送られます。

Networkタブで通信の1行をクリックすると、右側または下側に詳細画面が表示されます。そこで Headers タブを開くと、リクエストに関する情報を確認できます。

特に見ることが多いのは、次のような項目です。

• Request URL
• Request Method
• Status Code
• Request Headers
• Query String Parameters
• Payload
  

Request URL は、ブラウザがアクセスしたURLです。
どのサーバの、どのパスに対して通信しているのかを確認できます。

Request Method は、HTTPメソッドを表します。
代表的なものは GET と POST です。

GET は、主にサーバからデータを取得するときに使われます。Webページを開いたり、検索結果を取得したりする場合によく使われます。

一方、POST は、主にサーバへデータを送信するときに使われます。ログインフォームの送信や、お問い合わせフォームの送信、データ登録処理などで使われます。

Request Headers には、ブラウザがサーバへ送る付加情報が入っています。

たとえば、次のような情報があります。

• User-Agent：使用しているブラウザやOSの情報
• Accept：受け取りたいデータ形式
• Accept-Language：優先する言語
• Cookie：ブラウザに保存されているCookie情報
• Referer：どのページから遷移してきたかを示す情報

これらのヘッダーは、リクエスト本文そのものではありませんが、サーバが処理を判断するための重要な情報になります。

また、URLに ?keyword=html&page=1 のようなクエリ文字列が付いている場合は、Query String Parameters として確認できます。

フォーム送信やAPI通信でデータを送っている場合は、Payload に送信内容が表示されることがあります。たとえば、ログイン処理であれば、入力されたメールアドレスなどの送信データを確認できる場合があります。

ただし、パスワードや個人情報を扱う通信では、内容の取り扱いに注意が必要です。開発中の確認には便利ですが、実際のユーザー情報を不用意に共有したり、スクリーンショットに含めたりしないようにしましょう。

基本情報技術者試験では、HTTPを「クライアントからサーバへリクエストを送る仕組み」として学びます。

NetworkタブのHeadersを確認すると、そのリクエストが実際にどのURLへ送られ、どのHTTPメソッドを使い、どのようなヘッダーを含んでいるのかを具体的に見ることができます。

HTTPレスポンスを確認する

HTTPリクエストを送ると、サーバはそれに対して HTTPレスポンス を返します。

HTTPレスポンスとは、サーバからブラウザへ返される応答のことです。たとえば、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイル、JSONデータなどは、HTTPレスポンスとしてブラウザに返されます。

Networkタブでは、このHTTPレスポンスの内容も確認できます。

確認したい通信をクリックし、詳細画面で Headers タブを開くと、レスポンスに関する情報が表示されます。特に見ることが多いのは Response Headers です。

Response Headersには、サーバがブラウザへ返した付加情報が入っています。

たとえば、次のような情報があります。

• Content-Type：返されたデータの種類
• Content-Length：返されたデータのサイズ
• Cache-Control：キャッシュに関する設定
• Set-Cookie：ブラウザに保存させるCookie情報
• Server：サーバソフトウェアに関する情報

Content-Type は、レスポンスの種類を表す重要なヘッダーです。

たとえば、HTMLであれば text/html、CSSであれば text/css、JavaScriptであれば application/javascript、JSONであれば application/json のような値が返されます。

ブラウザはこのContent-Typeを見て、返ってきたデータをどのように扱うべきか判断します。

また、API通信を確認するときは、Response タブや Preview タブもよく使います。

Response タブでは、サーバから返ってきたレスポンス本文をそのまま確認できます。HTMLであればHTMLの内容、JSONであればJSON文字列が表示されます。

一方、Preview タブでは、JSONなどのデータが見やすい形で表示されることがあります。APIのレスポンスを確認するときは、Previewタブの方が読みやすい場合もあります。

たとえば、JavaScriptからAPIを呼び出している場合、Networkタブでその通信をクリックすると、サーバから返ってきたJSONデータを確認できます。

{
  "message": "success",
  "user": {
    "id": 1,
    "name": "Taro"
  }
}

このように、HTTPレスポンスを見ることで、「サーバがどのようなデータを返しているのか」をブラウザ上で確認できます。

実務では、画面にデータが表示されないときに、まずNetworkタブでレスポンスを確認することがあります。

たとえば、API通信自体は成功しているのにレスポンスのJSON形式が想定と違っている場合、JavaScript側の処理でエラーになることがあります。逆に、レスポンスが空だったり、エラーメッセージが返っていたりすれば、サーバ側の処理を確認する必要があります。

基本情報技術者試験では、HTTP通信を「リクエスト」と「レスポンス」の組み合わせとして理解することが重要です。

ブラウザはサーバへHTTPリクエストを送り、サーバはそれに対してHTTPレスポンスを返します。Networkタブを使うと、この一連の流れを実際の通信として確認できます。

ステータスコードを確認する

HTTP通信では、サーバがレスポンスを返すときに ステータスコード も一緒に返します。

ステータスコードとは、そのHTTP通信の結果を表す3桁の番号です。
Networkタブでは、通信一覧の Status 列で確認できます。

たとえば、ページを再読み込みしたときにStatus列を見ると、200、304、404 などの数字が表示されていることがあります。これらがHTTPステータスコードです。

ステータスコードを見ると、その通信が成功したのか、リダイレクトされたのか、エラーになったのかを判断できます。

代表的なステータスコードには、次のようなものがあります。

• 200 OK
  • リクエストが成功し、サーバから正常にレスポンスが返された状態
• 301 Moved Permanently
  • リクエスト先のURLが恒久的に変更された状態
• 302 Found
  • 一時的に別のURLへリダイレクトされた状態
• 304 Not Modified
  • キャッシュを利用できるため、サーバから本文を再取得しなかった状態
• 404 Not Found
  • 指定したURLのリソースが見つからなかった状態
• 500 Internal Server Error
  • サーバ内部でエラーが発生した状態

最初のうちは、細かいコードをすべて覚える必要はありません。
まずは、百の位によって大まかな意味が分かれることを押さえると理解しやすいです。

• 2xx：成功
• 3xx：リダイレクト
• 4xx：クライアント側のエラー
• 5xx：サーバ側のエラー

たとえば、200 は成功を表すので、HTMLや画像、APIのJSONなどが正常に取得できたことを意味します。

404 は、URLが間違っている、ファイルが存在しない、ルーティングが設定されていない、といった場合によく発生します。画像が表示されないときや、リンク先が存在しないときに見ることがあります。

500 は、サーバ側の処理でエラーが起きている状態です。PHPのプログラムで例外が発生したり、データベース接続に失敗したりした場合などに返されることがあります。

API通信を調査するときも、ステータスコードは重要です。

たとえば、JavaScriptのfetchでAPIを呼び出して画面にデータを表示する場合、まずNetworkタブでStatus列を確認します。200であれば通信自体は成功しています。一方、404であればURLやルーティング、500であればサーバ側の処理を確認する必要があります。

また、ログインが必要なAPIでは、401 Unauthorized や 403 Forbidden が返ることもあります。これは、認証情報が不足していたり、アクセス権限がなかったりする場合に使われます。

基本情報技術者試験では、HTTPステータスコードの意味が問われることがあります。

ただ暗記するだけでなく、Chrome開発者ツールのNetworkタブで実際のStatus列を見ておくと、「この数字は通信結果を表している」というイメージがつかみやすくなります。

実務でも、画面が正しく表示されないときやAPI通信が失敗したときは、まずNetworkタブでステータスコードを確認するのが基本です。

JavaScriptのfetchで通信を発生させてみる

ここまで、Networkタブを使ってHTTPリクエスト、HTTPレスポンス、ステータスコードを確認する方法を見てきました。

次は、JavaScriptから実際にHTTP通信を発生させて、Networkタブで確認してみましょう。

JavaScriptでは、fetchを使うとサーバやAPIに対してHTTPリクエストを送ることができます。実務でも、画面を再読み込みせずにデータを取得したり、フォームの内容をAPIに送信したりするときによく使われます。

たとえば、次のようなHTMLを用意します。

<button id="loadButton">データ取得</button>

<script>
document.getElementById('loadButton').addEventListener('click', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();

  console.log(data);
});
</script>

このコードでは、ボタンをクリックしたときにfetchでAPIへリクエストを送っています。

fetch('https://jsonplaceholder.typicode.com/posts/1')の部分で、指定したURLにHTTPリクエストを送信しています。今回はデータを取得するだけなので、HTTPメソッドは基本的にGETになります。

レスポンスが返ってくると、response.json()でJSON形式のデータとして読み取り、最後にconsole.log(data)でConsoleタブへ表示しています。

この動きをChrome開発者ツールで確認してみましょう。

まず、Chrome開発者ツールを開き、Networkタブを表示します。次に、上部の絞り込みから Fetch/XHR を選択しておくと、JavaScriptによるAPI通信を見つけやすくなります。

その状態で「データ取得」ボタンをクリックすると、Networkタブに新しい通信が表示されます。

表示された通信をクリックすると、次のような情報を確認できます。

• Request URL
• Request Method
• Status Code
• Response Headers
• Response本文

Request URLを見ると、fetchで指定したURLにアクセスしていることが分かります。

Request Methodを見ると、GETでリクエストしていることが分かります。

Status Codeが200であれば、API通信は成功しています。もしURLを間違えた場合は、404などのエラーになることがあります。

また、Responseタブを開くと、APIから返ってきたJSONデータを確認できます。

{
  "userId": 1,
  "id": 1,
  "title": "...",
  "body": "..."
}

このように、JavaScriptのfetchで発生した通信も、通常のページ読み込みと同じようにNetworkタブで確認できます。

実務では、「JavaScriptの処理がうまく動かない」と思ったときに、まずNetworkタブでAPI通信を確認することがよくあります。

たとえば、次のような観点で調査します。

• そもそもAPIにリクエストが送られているか
• リクエスト先のURLは正しいか
• HTTPメソッドは正しいか
• ステータスコードは成功しているか
• レスポンスのJSONは想定どおりか

画面にデータが表示されない場合でも、API通信自体は成功していることがあります。その場合は、JavaScript側でレスポンスの扱い方を間違えているかもしれません。

逆に、Networkタブで404や500が表示されていれば、URLやサーバ側の処理を確認する必要があります。

基本情報技術者試験では、HTTP通信を仕組みとして学びますが、実務ではこのようにDevToolsを使って実際の通信を確認します。fetchとNetworkタブを組み合わせると、HTTPリクエストとHTTPレスポンスの流れをかなり具体的に理解できます。

PHPでレスポンスヘッダーを返してみる

HTTP通信では、ブラウザがリクエストを送るだけでなく、サーバがレスポンスを返します。

ここでは、PHPを使って簡単なJSONレスポンスを返し、その内容をChrome開発者ツールのNetworkタブで確認してみましょう。

たとえば、次のようなPHPファイルを用意します。

<?php
header('Content-Type: application/json; charset=UTF-8');

echo json_encode([
    'message' => 'Hello from PHP',
    'status' => 'success',
]);

このコードでは、まずheader()関数を使って、レスポンスヘッダーを指定しています。

header('Content-Type: application/json; charset=UTF-8');

Content-Typeは、サーバが返すデータの種類をブラウザに伝えるためのヘッダーです。

ここではapplication/jsonを指定しているため、「このレスポンス本文はJSON形式のデータです」とブラウザに伝えています。また、charset=UTF-8を付けることで、文字コードがUTF-8であることも示しています。

次に、json_encode()を使って、PHPの配列をJSON文字列に変換しています。

echo json_encode([
    'message' => 'Hello from PHP',
    'status' => 'success',
]);

ブラウザからこのPHPファイルにアクセスすると、サーバは次のようなJSONを返します。

{
  "message": "Hello from PHP",
  "status": "success"
}

この通信をNetworkタブで確認してみましょう。

Chrome開発者ツールを開いた状態でPHPファイルにアクセスし、Networkタブの一覧から対象の通信をクリックします。

Headersタブを見ると、Response Headersの中に次のような情報が表示されます。

Content-Type: application/json; charset=UTF-8

これは、PHP側でheader()関数を使って指定した内容です。

また、Responseタブを開くと、PHPから返されたJSON本文を確認できます。

このように、Networkタブを使うと、サーバ側のPHPがどのようなヘッダーを返しているのか、レスポンス本文として何を返しているのかを確認できます。

実務では、APIを作るときにContent-Typeの指定は重要です。

たとえば、JSONを返しているつもりでも、Content-Typeが正しく設定されていないと、ブラウザやJavaScript側で扱いにくくなることがあります。特にAPI通信では、レスポンス本文だけでなく、レスポンスヘッダーも含めて確認する習慣をつけておくとよいです。

また、PHPでエラーが発生している場合、期待していたJSONではなく、HTML形式のエラーページが返ってくることもあります。

そのようなときも、NetworkタブのResponseタブを確認すると、サーバから実際に何が返ってきているのかが分かります。画面上では「データが表示されない」としか見えなくても、Networkタブを見れば、JSONが返っているのか、エラーHTMLが返っているのか、空のレスポンスなのかを切り分けられます。

基本情報技術者試験では、HTTPレスポンスにはステータスコードやヘッダー、本文が含まれることを学びます。

PHPでレスポンスを返し、それをNetworkタブで確認すると、「サーバがレスポンスを返す」という仕組みを実際のコードと結びつけて理解できます。

キャッシュと304 Not Modifiedを確認する

Networkタブを見ていると、Status列に 304 と表示されることがあります。

304 Not Modified は、「前回取得したデータから変更されていないため、ブラウザ側のキャッシュを使ってよい」という意味のステータスコードです。

キャッシュとは、一度取得したデータをブラウザなどに保存しておき、次回以降の表示を速くするための仕組みです。

たとえば、Webページでは、CSSファイル、JavaScriptファイル、画像ファイルなどが何度も読み込まれます。毎回すべてのファイルをサーバから取得していると、通信量が増え、表示にも時間がかかります。

そこでブラウザは、一度取得したファイルを一時的に保存しておきます。次に同じファイルが必要になったとき、サーバに「このファイルは前回から変更されていますか？」と確認し、変更されていなければ保存済みのデータを利用します。

このときに返される代表的なステータスコードが 304 Not Modified です。

Networkタブでは、同じページを何度か再読み込みすると、304 が表示されたり、Size列に disk cache や memory cache と表示されたりすることがあります。

disk cache は、ディスク上に保存されたキャッシュから読み込まれたことを表します。
memory cache は、メモリ上に保存されたキャッシュから読み込まれたことを表します。

どちらも、サーバから毎回すべてのデータを取得しているわけではない、という点が重要です。

キャッシュの動きは、Response Headersに含まれる Cache-Control などのヘッダーによって制御されます。

たとえば、次のようなヘッダーが返されることがあります。

Cache-Control: max-age=3600

これは、「一定時間、このレスポンスをキャッシュとして利用できる」という意味です。max-age=3600 の場合、3600秒、つまり1時間を表します。

キャッシュはページ表示を速くするために便利な仕組みですが、開発中には少し注意が必要です。

たとえば、CSSやJavaScriptを修正したのに、ブラウザ上では古い内容が表示され続けることがあります。これは、ブラウザがキャッシュされた古いファイルを使っているためです。

そのようなときは、Networkタブの上部にある Disable cache にチェックを入れると、開発者ツールを開いている間だけキャッシュを無効化できます。

また、再読み込みボタンを長押し、または右クリックして「キャッシュの消去とハード再読み込み」を行う方法もあります。

基本情報技術者試験では、キャッシュは「よく使うデータを一時的に保存し、アクセスを高速化する仕組み」として登場します。

Networkタブで 304 Not Modified や disk cache、memory cache を確認すると、キャッシュがHTTP通信の中で実際に使われていることが分かります。

HTTP通信を見るときは、単にリクエストとレスポンスだけでなく、「毎回サーバから取得しているのか」「キャッシュが使われているのか」も確認できるようになると、実務での調査に役立ちます。

実務での使いどころ

Chrome開発者ツールのNetworkタブは、HTTP通信の仕組みを学ぶためだけでなく、実務でもよく使う調査ツールです。

Webアプリケーションを開発していると、「画面にデータが表示されない」「ボタンを押しても反応しない」「画像が読み込まれない」「ログインできない」といった問題に出会うことがあります。

このようなとき、まず確認したいのがNetworkタブです。

たとえば、APIから取得したデータを画面に表示する処理を考えてみましょう。

JavaScriptのコードだけを見ていると、どこで失敗しているのか分かりにくいことがあります。しかしNetworkタブを見ると、そもそもAPIにリクエストが送られているのか、リクエスト先のURLは正しいのか、サーバからどのようなレスポンスが返ってきたのかを確認できます。

API通信を調査するときは、次のような点を確認します。

• リクエストが発生しているか
• Request URLは正しいか
• Request Methodは正しいか
• Status Codeは成功しているか
• Payloadに送信したいデータが含まれているか
• Responseに想定どおりのJSONが返っているか

たとえば、Status Codeが404であれば、URLやルーティングの設定が間違っている可能性があります。500であれば、サーバ側の処理でエラーが発生している可能性があります。401や403であれば、ログイン状態やアクセス権限を確認する必要があります。

フォーム送信の調査でもNetworkタブは役立ちます。

お問い合わせフォームやログインフォームでエラーが起きた場合、Payloadを見ることで、入力した値がサーバへ正しく送信されているかを確認できます。また、Responseを見ることで、サーバ側からどのようなエラーメッセージが返っているのかも分かります。

画像やCSS、JavaScriptファイルが読み込まれないときにも、Networkタブを使います。

たとえば、画像が表示されない場合、該当する画像ファイルの通信を探してStatus Codeを確認します。404になっていれば、画像ファイルのパスが間違っているか、ファイルが存在していない可能性があります。

CSSが反映されない場合も、CSSファイルの通信を確認します。ファイル自体が読み込まれていないのか、読み込まれているがCSSの指定が間違っているのかを切り分けることができます。

また、ページ表示が遅い原因を調べるときにもNetworkタブは使われます。

Time列を見ると、それぞれの通信にどれくらい時間がかかっているかが分かります。画像ファイルが大きすぎる、APIのレスポンスが遅い、不要なJavaScriptファイルを多く読み込んでいる、といった問題に気づくきっかけになります。

Cookieや認証情報の確認にも使えます。

ログインが必要なAPIでは、CookieやAuthorizationヘッダーなどの認証情報がリクエストに含まれているかが重要です。NetworkタブのRequest Headersを見ると、これらの情報が送信されているかを確認できます。

ただし、Cookieや認証トークンには重要な情報が含まれることがあります。スクリーンショットを共有するときや、ログを外部に貼り付けるときは、個人情報や認証情報が含まれていないか注意しましょう。

このように、Networkタブは「通信が成功しているか」「何を送っているか」「何が返ってきているか」を確認するための基本ツールです。

基本情報技術者試験では、HTTPリクエスト、HTTPレスポンス、ステータスコード、ヘッダーといった用語を学びます。実務では、それらをNetworkタブで確認しながら、問題の原因を切り分けていきます。

つまりNetworkタブは、試験で学ぶHTTPの知識を、Web開発の現場で使える知識に変えるための入り口と言えます。

基本情報で押さえたいポイント

ここまで、Chrome開発者ツールのNetworkタブを使って、HTTP通信を実際に確認してきました。

基本情報技術者試験では、Chrome開発者ツールそのものの操作方法が問われるわけではありません。重要なのは、Networkタブで見える内容が、試験で学ぶHTTPの知識とつながっていることです。

まず押さえておきたいのは、HTTPが クライアントとサーバの間で使われる通信プロトコル であるという点です。

Webの世界では、ブラウザがクライアント、Webサーバがサーバにあたります。ブラウザはサーバに対してHTTPリクエストを送り、サーバはそれに対してHTTPレスポンスを返します。

この「リクエスト」と「レスポンス」の関係は、HTTPを理解するうえで基本になります。

Networkタブで通信を1つ選ぶと、Request URL、Request Method、Request Headers、Response Headers、Response本文などを確認できます。これは、HTTP通信が単に「URLにアクセスしている」だけではなく、メソッド、ヘッダー、本文などの情報を含んでいることを示しています。

HTTPメソッドでは、特に GET と POST を押さえておきましょう。

GET は、主にサーバから情報を取得するときに使われます。Webページを開く、画像を取得する、検索結果を取得する、といった場面で使われます。

POST は、主にサーバへデータを送信するときに使われます。ログインフォーム、お問い合わせフォーム、データ登録処理などでよく使われます。

また、HTTPステータスコードも重要です。

ステータスコードは、サーバが返す処理結果を表す3桁の番号です。基本情報では、細かいコードをすべて覚えるというより、まずは分類を理解しておくとよいです。

• 2xx：成功
• 3xx：リダイレクト
• 4xx：クライアント側のエラー
• 5xx：サーバ側のエラー
  

たとえば、200 OK は成功、404 Not Found はリソースが見つからない、500 Internal Server Error はサーバ内部のエラーを表します。

ヘッダーについても、基本的な役割を理解しておきましょう。

HTTPヘッダーは、リクエストやレスポンスに付け加えられる情報です。たとえば、ブラウザがどのような形式のデータを受け取りたいか、サーバがどの種類のデータを返しているか、キャッシュをどう扱うか、といった情報が含まれます。

Response Headersにある Content-Type は、返ってきたデータの種類を表します。HTMLであれば text/html、JSONであれば application/json のように指定されます。

また、キャッシュの考え方も試験と実務の両方で重要です。

キャッシュは、一度取得したデータを一時的に保存して、次回以降のアクセスを速くする仕組みです。Networkタブで 304 Not Modified や disk cache、memory cache を見ると、キャッシュが実際のHTTP通信の中で使われていることが分かります。

最後に、Webページは1回の通信だけで表示されるわけではない、という点も押さえておきましょう。

1つのページを開いたときでも、HTML、CSS、JavaScript、画像、API通信など、複数のHTTP通信が発生します。Networkタブにたくさんの行が表示されるのは、それぞれのファイルやデータを個別に取得しているためです。

基本情報の学習では、HTTPを用語として覚えるだけで終わりがちです。

しかし、Networkタブで実際の通信を確認すると、HTTPリクエスト、HTTPレスポンス、ステータスコード、ヘッダー、キャッシュといった知識が、Webページの表示やAPI通信とつながっていることが分かります。

試験対策としてはもちろん、Webエンジニアとして実務でトラブル調査をするときにも役立つ知識です。

まとめ

この記事では、Chrome開発者ツールのNetworkタブを使って、HTTP通信を確認する方法を見てきました。

HTTP通信は、Webページを表示するときにブラウザとサーバの間で行われるやり取りです。ブラウザはサーバにHTTPリクエストを送り、サーバはHTTPレスポンスを返します。

基本情報技術者試験では、HTTPリクエスト、HTTPレスポンス、HTTPメソッド、ステータスコード、ヘッダー、キャッシュなどの用語が登場します。

これらは文字だけで覚えようとすると少し抽象的ですが、Chrome開発者ツールのNetworkタブを使うと、実際のWebページ上で確認できます。

Networkタブでは、次のような情報を見ることができます。

・どのURLにリクエストしているか
・GET や POST など、どのHTTPメソッドを使っているか
・200、404、500 など、どのステータスコードが返っているか
・リクエストヘッダーやレスポンスヘッダーに何が含まれているか
・サーバからどのようなHTMLやJSONが返っているか
・キャッシュが使われているか

特に、Webアプリケーションを開発するときは、Networkタブが問題調査の入口になります。

画面にデータが表示されないとき、フォーム送信がうまくいかないとき、画像やCSSが読み込まれないとき、まずNetworkタブを見ることで、通信が成功しているのか、どこで失敗しているのかを切り分けやすくなります。

JavaScriptのfetchでAPI通信を行う場合も、PHPでJSONレスポンスを返す場合も、Networkタブを使えば、実際に送られたリクエストと返ってきたレスポンスを確認できます。

基本情報の学習では、HTTPを「試験に出る用語」として覚えるだけでなく、「ブラウザで実際に確認できる通信」として理解することが大切です。

Chrome開発者ツールを使ってHTTP通信を見てみると、試験で学ぶ知識が、Web開発の実務でどのように使われているのかが分かります。

HTTPの仕組みを理解したいときは、まず身近なWebページを開き、Networkタブで通信を眺めてみましょう。
それだけでも、Webページがどのようにサーバとやり取りして表示されているのかが、かなり具体的に見えてくるはずです。