学ぶ目的
3桁の数字が答えを持っている
Network パネルの Status 列には、3 桁の数字が並んでいます。これはサーバーからの返事で、最初の 1 桁を見るだけで状況がつかめます。
桁で覚える
200 番台は成功です。300 番台は転送で、別の URL に送られています。400 番台はリクエスト側の問題で、代表が 404(その URL は存在しない)、403 は権限不足です。500 番台はサーバー側が壊れています。
404 と 500 は意味が違う
この 2 つの区別が実務では一番大事です。404 は「探している場所が違う」ので、リンクの設定ミスやページの削除が疑われます。編集者側で直せることもあります。500 はサーバーの中で例外が起きているので、これは間違いなく開発者の仕事です。すぐに伝えてください。
赤い行を探す
Network の一覧では、失敗した通信が赤く表示されます。上部のフィルタで Fetch/XHR を選ぶと、画像などを除いてデータのやり取りだけを見られます。不具合調査では、まずここに赤い行がないかを見るのが近道です。
このレクチャーで学ぶこと
- 200・300・400・500番台の意味
- 404と500で報告先が変わる
- 赤い行を見つける
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
#1
未完了
DevToolsとは ― 「なんか動かない」を事実に変える道具
#2
未完了
DevToolsを開いてみよう ― パネルの全体像
#3
未完了
Elementsパネル ― 画面の中身を見る
#4
未完了
Stylesを触ってみよう ― 色と余白をその場で試す
#5
未完了
Consoleパネル ― エラーメッセージを読む
#6
未完了
Networkパネル ― サーバーとのやり取りを見る
#7
未完了
ステータスコード ― 404と500で誰の問題か分ける
#8
未完了
デバイスモード ― スマホ表示を確かめる
#9
未完了
Applicationパネル ― Cookieと計測タグを確かめる
#10
未完了