QA Dojo
ハンズオン
進捗 0/47

DevTools Network タブを開く

スライド 1 of 3
このレッスンは PC ブラウザで開きながら読むと理解が深まります。

Chrome / Edge / Safari など主要ブラウザには DevTools(開発者ツール)が組み込まれています。 QA エンジニアにとって Network タブは最も使う機能のひとつです。

開き方(任意のページで):

  • Windows / Linux:F12 または Ctrl + Shift + I
  • Mac:Cmd + Option + I
  • 右クリック →「検証」/「要素の検証」

開いたら上部タブから Network を選択。 この状態でページを再読み込みすると、ブラウザが投げた全リクエストが時系列に並びます:

DevTools › Network
NameStatusType
shop.example.com200document
main.css200stylesheet
app.js200script
products?page=1200fetch
cart怪しい!401fetch
logo.png304png

📌 QA 視点:上のような一覧から 4xx / 5xx を見つけられれば、 「画面に出ない情報」をピンポイントで特定できます。「画面が真っ白」より「Network で /api/cart が 401」のほうが原因特定が一気に進みます

ページを開いてから Network タブを開いたが何も表示されない。どうする?