@QA

@QA ARTICLE

QAがChrome DevToolsで最初に見る5つの場所

Webサービスのテストで原因を切り分けるために、Chrome DevToolsのDevice Mode、Elements、Console、Network、Applicationを初心者向けに解説します。

調べる

Webサービスをテストしていると、「画面に何も表示されない」「保存したはずなのに反映されない」「特定の幅だけレイアウトが崩れる」といった問題に出会います。

画面を見ただけでは、表示の問題なのか、通信に失敗しているのか、ブラウザに残ったデータが影響しているのか分からないことがあります。そのようなときに役立つのが、Google Chromeに組み込まれている Chrome DevTools です。

DevToolsには多くの機能がありますが、最初からすべてを覚える必要はありません。この記事では、QAが原因を切り分けるときにまず見たい五つの場所を紹介します。

Chrome DevToolsを開く

確認したいページをChromeで開き、次のいずれかの方法でDevToolsを表示します。

  • 画面上で右クリックし、「検証」を選ぶ
  • macOS：Command + Option + I
  • Windows／Linux：Ctrl + Shift + I

Consoleを直接開きたい場合は、macOSでは Command + Option + J、Windows／Linuxでは Ctrl + Shift + J を使えます。

画面の右側や下側に、複数のパネルを持つ領域が表示されたら準備完了です。

1. Device Mode：画面幅を変えて表示を確認する

Device Modeでは、ブラウザ内の表示領域をスマートフォンやタブレットに近い幅へ変更できます。

たとえば、次のような確認に便利です。

  • 画面幅を狭くしたときに文字やボタンがはみ出さないか
  • PC用のメニューがモバイル用のメニューへ切り替わるか
  • 縦向きと横向きでレイアウトが崩れないか
  • 通信速度が遅い場合の表示を確認できるか

ただし、Device Modeは実機そのものではありません。画面サイズや一部の環境を再現する機能であり、端末固有のブラウザ動作、タッチ操作、性能まで完全に同じにはなりません。

Device Modeで問題を見つけたら、必要に応じて実機でも確認します。

2. Elements：表示されている要素を確認する

Elementsパネルでは、画面を構成するHTMLと、適用されているCSSを確認できます。

画面上の要素を選択する機能を使うと、確認したい文字やボタンがHTMLのどこに対応しているかが分かります。QAでは、次のような調査に使えます。

  • 要素自体が存在しないのか、存在するが見えないのか
  • 指定した文字列がHTMLへ出力されているか
  • ボタンが無効な状態になっていないか
  • 幅、高さ、余白などに不自然な指定がないか

Elements上では、文字やスタイルを一時的に変更できます。更新すると元に戻るため、長い文字列を入れた場合の見え方や、余白を変えた場合のレイアウトを試すのに便利です。

ここで変更できたことは、プロダクトのデータや実装を修正したことにはなりません。あくまで、手元のブラウザ表示を一時的に変えた結果です。

3. Console：ブラウザで発生したエラーを見る

Consoleパネルには、ページ上のJavaScriptで発生したエラーや、開発者が調査用に出力した情報が表示されます。

ボタンを押しても反応しない、画面の一部だけ表示されない、といった問題では、操作した直後に赤いエラーが出ていないか確認します。

不具合報告へ添える場合は、次の情報が分かるようにします。

  • どの操作をしたときに表示されたか
  • エラーメッセージ
  • エラーが出た時刻
  • 毎回出るか、特定の条件だけで出るか

Consoleには内部情報が含まれる場合があります。スクリーンショットや内容を社外へ共有する前に、個人情報、認証情報、公開してはいけないURLなどが写っていないか確認してください。

4. Network：画面とサーバーの通信を確認する

Networkパネルでは、ページがサーバーと行った通信を確認できます。

「保存ボタンを押しても反映されない」という事象なら、次のように切り分けられます。

  1. ボタンを押したときに通信が発生しているか
  2. 通信先やHTTPメソッドは想定どおりか
  3. ステータスコードは成功か、エラーか
  4. 送信した内容と返ってきた内容は何か
  5. 応答までにどの程度時間がかかったか

Networkパネルは、開いている間に発生した通信を記録します。確認したい操作の前にパネルを開き、必要であればページを再読み込みしてから再現します。

リクエストやレスポンスには、Cookie、トークン、個人情報などが含まれることがあります。そのままチケットやチャットへ貼り付けず、共有範囲と必要な情報を確認しましょう。

5. Application：ブラウザに保存されたデータを見る

Applicationパネルでは、Cookie、Local Storage、Session Storage、IndexedDB、キャッシュなど、Webアプリがブラウザへ保存した情報を確認できます。

次のような事象を調べるときに役立ちます。

  • ログイン状態が想定どおり保持されない
  • 一度選んだ設定が再読み込み後に戻る
  • 古いデータが残っているときだけ問題が起きる
  • キャッシュを消すと問題が解消する

保存データを削除・変更すると、ログアウトしたり、手元の状態を失ったりすることがあります。まず内容を確認し、操作する場合はテスト用アカウントとテスト環境で行います。

調査結果は「分かったこと」だけを書く

DevToolsでエラーや失敗した通信を見つけても、それだけで原因が確定するとは限りません。

たとえば、「Networkで500エラーを確認した」は事実ですが、「データベースが原因である」は追加の調査が必要な推測です。

不具合報告では、次のように分けます。

  • 事実：保存操作の通信が500エラーになっている
  • 影響：入力内容が保存されない
  • 未確認：サーバー内で失敗した原因

DevToolsは、開発者の代わりに原因を断定するための道具ではありません。画面だけでは分からない情報を集め、チームが調査を始めやすくするための道具です。

まとめ

最初は、次の五つを使えるだけでも調査の幅が広がります。

  1. Device Modeで画面幅を変える
  2. ElementsでHTMLとCSSを見る
  3. Consoleでブラウザのエラーを見る
  4. Networkで通信を見る
  5. Applicationでブラウザ内の保存データを見る

一度に覚えようとせず、実際の不具合を調べながら少しずつ使ってみてください。

詳しい操作は、Chrome DevTools公式ドキュメントでも確認できます。