検証ツールを開く

検証ツール（開発者ツール、DevTools）は、Webページの構造を調査したり、動作をデバッグしたりするためのブラウザ組み込みツールです。

検証ツールとは？

E2Eテストを書く際に必須のツールです。以下のことができます：

💡 なぜ必要？
E2Eテストでは、操作したい要素のセレクタ（ID、クラス、属性など）を知る必要があります。検証ツールを使えば、簡単に調べられます。

1. ブラウザでページを開く
2. F12 キーを押す
3. 検証ツールが開く

1. ページ上で右クリック
2. "検証" または "Inspect" を選択
3. 検証ツールが開く（クリックした要素が選択された状態）

1. 右上のメニュー（⋮）をクリック
2. "その他のツール" → "デベロッパーツール" を選択

1. 右上のメニュー（≡）をクリック
2. "ウェブ開発" → "開発ツールを表示" を選択

Safariでは、まず開発者メニューを有効にする必要があります：

1. Safari → 環境設定 を開く
2. "詳細" タブを選択
3. "メニューバーに"開発"メニューを表示" にチェック
4. メニューバーの "開発" → "Webインスペクタを表示" を選択

1. 右上のメニュー（...）をクリック
2. "その他のツール" → "開発者ツール" を選択

🎯 おすすめ
F12 キーが最も簡単です。覚えておきましょう。

検証ツールは、表示位置を変更できます。

検証ツール右上のメニュー（⋮または⚙）をクリック：

おすすめ: 画面が広い場合は「右側」、狭い場合は「下側」

開くと、いくつかのタブが表示されます。

タブ	用途
Elements	HTML/CSS構造の確認・編集
Console	JavaScriptの実行、エラー確認
Sources	ソースコード、ブレークポイント
Network	ネットワーク通信の確認
Performance	パフォーマンス分析
Application	Cookie、localStorage、sessionStorage
Security	セキュリティ情報（HTTPS）

タブ	用途
インスペクター	HTML/CSS構造の確認・編集
コンソール	JavaScriptの実行、エラー確認
デバッガー	ソースコード、ブレークポイント
ネットワーク	ネットワーク通信の確認
ストレージ	Cookie、localStorage、sessionStorage

📌 E2Eテストでよく使うタブ

1. ブラウザで https://www.google.com を開く
2. F12 を押す
3. 検証ツールが開く

1. Elementsタブを選択（デフォルトで選択されているはず）
2. HTMLのツリー構造が表示される
3. <html> → <body> と展開してみる

1. 検証ツール左上の "要素を選択" アイコン（矢印）をクリック
2. ページ上の検索ボックスをクリック
3. Elementsタブでその要素のHTMLが表示される

1. Consoleタブを選択
2. 以下を入力して Enter:
   console.log('Hello, DevTools!');
3. メッセージが表示される

検証ツール左上のアイコン（矢印マーク）：

1. アイコンをクリック（またはショートカット: Ctrl+Shift+C / Cmd+Shift+C）
2. ページ上の要素にカーソルを合わせる
3. 要素がハイライトされる
4. クリックすると、Elementsタブでそのコードが表示される

1. ページ上の要素を右クリック
2. "検証" を選択
3. 検証ツールが開き、その要素が選択された状態になる

🎯 実践的な使い方
テストを書く前に：

方法	手順
ショートカット	`F12` または `Ctrl+Shift+I` / `Cmd+Option+I`
✕ボタン	検証ツールの右上の✕をクリック

次のチャプターでは、Elementsタブの使い方を詳しく学びます。