Chrome / Edge / Safari など主要ブラウザには DevTools(開発者ツール)が組み込まれています。 QA エンジニアにとって Network タブは最も使う機能のひとつです。
開き方(任意のページで):
F12 または Ctrl + Shift + ICmd + Option + I開いたら上部タブから Network を選択。 この状態でページを再読み込みすると、ブラウザが投げた全リクエストが時系列に並びます:
| Name | Status | Type | Size | Time |
|---|---|---|---|---|
| shop.example.com | 200 | document | 12 KB | 245 ms |
| main.css | 200 | stylesheet | 8 KB | 34 ms |
| app.js | 200 | script | 120 KB | 68 ms |
| products?page=1 | 200 | fetch | 4 KB | 102 ms |
| cart← 怪しい! | 401 | fetch | 0.3 KB | 18 ms |
| logo.png | 304 | png | 0 KB | 12 ms |
📌 QA 視点:上のような一覧から 4xx / 5xx を見つけられれば、 「画面に出ない情報」をピンポイントで特定できます。「画面が真っ白」より「Network で /api/cart が 401」のほうが原因特定が一気に進みます。
ページを開いてから Network タブを開いたが何も表示されない。どうする?