このページを開くために、ブラウザは何を取りに行った？

文章は読めるのに、写真の場所だけ空いている。「ネットが悪いのかな」と再読み込みしても同じ。ここで画面を一枚の完成品ではなく、別々に届く材料の集まりとして見ると、調べ方が変わります。

ブラウザは文書を受け取り、必要な画像や、見た目・動きを作るファイルも集めます。文書は届いたが写真は届かなかった、ということも起きるわけです。では、その写真を取りに行ったやり取りを見られるのでしょうか。^[2]

写真だけ出ないページで、再読み込みを何度も押したくなる気持ちは分かります。けれど、同じ画面を見るだけでは、何を取り直したかが分からない。そこでPCの開発者ツールからNetwork／ネットワークを開き、もう一度読み込みます。すると、ブラウザが取りに行った材料が一行ずつ並ぶんです。^[5]

最初は数字の多さに圧倒されるかもしれません。見るのは全部ではなく、画像を表す一行だけ。種類で画像へ絞るか、ファイル名の一部を探し、名前を選びます。画面の空いた場所と、一つの取得先がつながれば、調べる対象が「ネット全体」から「この画像」へ小さくなりました。^[5]

その行のステータスが404なら、相手から「その資源が見つからない」というHTTPの応答を受け取っています。ここからは、URLの綴り、ファイルの公開先、リンクの更新漏れなどが調べる候補になる。原因を絞るにはもう一歩調べたいところですが、返事が来たことは確認できるんですね。^[2]

403のようにアクセスを拒まれた応答なら、ファイルの存在だけでなく、閲覧の権限やログイン状態を調べる候補へ進みます。返事を受け取れたからこそ、その中身へ次の問いを進められるわけです。^[2]

一方、HTTPのステータス自体が見えず失敗していたら、ブラウザが示すエラーも読みます。返ってきた拒否と、応答に届く前の失敗。同じ「見られない」でも、次に集めたい材料が変わりました。^[5]

では、200ならもう安心でしょうか。HTTPとして成功しても、返った中身が欲しい写真とは限りません。画像のつもりで開いたら別のページが返る、といった場合もあるので、プレビューや応答の種類まで見ます。数字と中身を組にすると、画面とのつながりが追いやすくなるでしょう。^[2][5]

見えた事実は、「本文は表示される。写真のこのURLには404が返る」と一文にできます。「サイトが壊れた」より、次の人も同じ一行を探しやすい報告です。自分がすぐ修理できなくても、どこで止まったかを残せる。これが、仕組みを知る最初の使い道なんですね。

要求の一覧を共有するときは、そのまま全画面を渡す前に内容を確認してください。ログイン用の情報や個別の識別子が含まれることもあります。今回の観察なら、共有してよいURLの範囲、ステータス、再現操作と時刻に絞って、相手が調べる材料を選べます。^[5]

要求の前後も、少しのぞいてみましょう。DNSはサイト名から相手を探す手掛かりを得る仕組み、HTTPは要求と返事をやり取りする仕組みです。TCPを使う通信では、アプリへデータを順序よく届ける役割も働きます。名前を探す段階と、返事を受け取る段階で、調べる先が変わるんですね。^[1][2][3]

一方、よく聞くpingはICMPを使う確認です。pingの応答だけでWebアプリの処理が成功したとは判断できませんし、設定で応答しない場合もあります。HTTPのエラー応答が見えているなら、少なくともその要求については応答を受け取れています。「返事がない」のか、「失敗という返事が来た」のか。この区別が、次に調べる先を選ぶ手掛かりです。^[4][2]

つまり、「ネットにつながる」と「Webの処理が成功する」は別の確認なんです。まずは、要求に応答が返っているか。その返事は成功か、エラーか。大きな症状を分けると、次に調べる先が選びやすくなります。

新しいサービスでアバターが表示されない、AIの回答が待ち状態になる。そうした症状を見たときも、「画面全体が動かないのか」「ある材料やデータだけ来ないのか」と分ける見方は使えます。アプリによって使う通信方式が違うため、HTTP一覧で見えるのは通信の一部分です。まず、その一覧で追える材料から調べます。^[2][5]

「画像の要求は404だった」と言えれば、どの材料で止まったかを伝えられます。すぐ原因を言い当てなくても、次に調べる一行が残る。それが、仕組みを知ると増える選択肢です。

「動きません」から、「画像の要求だけ404で、本文は表示される」へ。再現した操作、時刻、どの要求かを添えると、次の人が見る場所を絞れます。要求一覧には認証情報なども含まれるため、一覧全体をそのまま貼る前に共有する項目を選びましょう。^[5]

次に学ぶなら、その一行が相手へ届くまでを追ってみる。名前、アドレス、経路、応答がつながると、いつものページが調べられるやり取りとして面白くなってくるでしょう。

PCのFirefox・Chrome・Edgeなど、自分のブラウザで普段の公開ページを開きます。ブラウザのメニューから開発者ツールを開き、Network／ネットワークを選んでからページを再読み込みします。スマホで読んでいる方は、PCで試すときの手順として保存しておけます。

準備と、確かめる順番

文書、画像、スクリプトなど、種類が異なる要求を探します。ページによって、並ぶ種類は変わります。一つ選び、画面のどの材料に対応するか考えます。

URLとステータスを確認します。200はHTTP要求の成功を示します。次は返った内容と、画面や処理が期待どおりに動いたかを見ます。見えない項目はブラウザの要求詳細を開きます。

再読み込み前後で、キャッシュの表示や行がどう変わるか見ます。要求件数はパケット数や接続数とは違います。Cookieや認証ヘッダーをコピーして共有しないでください。

「画像だけ出ない」を、一つの要求の結果として話せたら一歩前進です。次は、その要求が相手へ届く仕組みをコースでつなぎます。