NetworkタブでWebの裏側を透視する

今回のテーマは エンジニアの透視能力 です。普段使っているWebサイトで、ボタンを押しても全然反応しない時ってありますよね。 自分のネット回線を疑ってしまいますが、実はサイトの裏側で何が起きているか、通信の中身を丸裸にする方法があるんです。 今日はブラウザの ネットワークタブ を使って、そのデータのやり取りを一緒に覗いてみようと思います。 まさにWebサイトの裏側で交わされている会話を盗み聞きするようなものですね。ボタンをクリックした瞬間、PCからサーバーへ「データください」という リクエスト が飛びます。 サーバーはそれを見て「はいどうぞ」とデータを返す。これが レスポンス です。この一連のキャッチボールを可視化するのがネットワークタブの役割です。 大事なのは、今のWebサイトはこの小さなキャッチボールを何十回、何百回と繰り返して成り立っているということなんです。 面白いですね。では早速実況風に見ていきましょうか。あなたが今ログインボタンをクリックしました。さあ、今リクエストが飛びました！ ネットワークタブに新しい行が表示されて、ステータスの列に 200 と出ました。これは成功ですよね？ その通りです。200 はOK、つまり通信がちゃんと成功したという合図です。ですが、いつも上手くいくとは限りません。 例えばサービスを利用するための合言葉みたいな APIキー というものがあるんですが、それをうっかり付け忘れてリクエストを送ってしまうことがあります。 その場合、サーバーは「あなたは誰ですか？帰ってください」とリクエストを拒否します。その時に返ってくるステータスが 401、認証エラーです。 面白いのが、これとよく似た 403 というエラーもあって。401は「あなたが誰か不明」ですが、403は「誰かは分かっているけど見る権限がありません」という具体的な拒絶なんです。 この違いが分かるだけでも問題解決のスピードがぐっと上がります。ステータスコード という数字がサーバーからのメッセージ、つまり最初のヒントになるわけですね。 原因を特定するには他にどこを見ればいいんでしょう？名探偵みたいに証拠を集めるには、あと2つの場所をチェックします。1つは送信データ、ペイロードタブ です。 これは私たちがサーバーに送ったリクエストの中身そのものです。送った内容に間違いがないか確認するわけですね。 私も昔、半日ぐらい悩んだバグがあって、結局自分がおくったデータの中の些細なタイプミスが原因だったりとか。このタブは嘘をつきませんからね。 それは悔しいですが、自分のミスを客観的に確認できるのは重要ですね。もう1つは何ですか？もう1つは受信データ、レスポンス・タブ です。 これはサーバーが返してきたレスポンスの本体です。ステータスコードがエラーを示している場合、ここにもっと具体的なエラーメッセージが書かれていることが多いんです。 なので、ステータス、ペイロード、レスポンス。この3つを順に追えば、大抵の問題の原因にはたどり着けます。 本当に探偵のようだと言っていた意味が分かりました。ところでこのツールってエラー探し専門なんですか？サイトの表示がやけに重い時とかにも役立つんでしょうか？ もちろんです。むしろそっちも主要な使い道の1つですね。ネットワークタブには個々の通信に何秒かかったかが正確に表示されます。 それを見れば、画像の読み込みに5秒もかかっているなとか、外部サービスの応答が遅いせいでページ全体が待たされているんだなとか、パフォーマンスのボトルネック が一目で分かります。 Webサイトの健康診断にも使えるわけですよ。見えないものが見えてくると、ただの利用者から一歩踏み込んで、仕組みや設計思想まで透けて見える感覚になりますね。 その視点を持つことでデジタルな世界との関わり方が深まるはずです。最後にリスナーのあなたにも問いかけです。普段使っているアプリの裏側でどんなデータが飛んでいるのか、想像してみてください。