Consoleタブの使い方

Consoleタブは、JavaScriptを実行したり、エラーメッセージを確認したりできるタブです。E2Eテストのデバッグやセレクタの動作確認に役立ちます。

Consoleタブとは？

Consoleタブでできること：

1. JavaScriptコードをその場で実行
2. エラーメッセージの確認
3. console.log()などのログ出力の確認
4. DOMの操作を試す

Consoleタブを開く

方法1: 検証ツールから

1. F12 で検証ツールを開く
2. "Console" タブをクリック

方法2: ショートカット

Consoleタブが直接開きます。

基本的な使い方

JavaScriptを実行する

Consoleの入力欄（>の右側）にコードを入力してEnterを押すと実行されます。

// 計算
2 + 3
// 結果: 5

// 文字列
'Hello, Console!'
// 結果: "Hello, Console!"

// 変数
const name = 'Taro';
console.log(name);
// 結果: Taro

console.log()

ページのJavaScriptから出力されるログを確認できます。

// ページのJavaScriptコード
console.log('ページが読み込まれました');
console.log('ユーザー名:', username);

これらがConsoleタブに表示されます。

複数行のコード

Shift+Enterで改行し、複数行のコードを書けます。

// Shift+Enter で改行
const user = {
  name: 'Taro',
  age: 25
};
console.log(user);
// Enter で実行

エラーの確認

JavaScriptエラーは自動的にConsoleに表示されます。

エラーメッセージの例

Uncaught TypeError: Cannot read property 'value' of null
    at script.js:15

エラーの種類

DOM要素の取得と操作

Consoleで、ページの要素を取得・操作できます。

要素を取得

// IDで取得
document.getElementById('submit-btn')

// セレクタで取得
document.querySelector('#submit-btn')
document.querySelector('.btn-primary')
document.querySelectorAll('.item')

// $() はquerySelectorのショートカット（Console専用）
$('#submit-btn')

// $$() はquerySelectorAllのショートカット（Console専用）
$$('.item')

要素の情報を確認

// ボタンのテキスト
$('#submit-btn').textContent

// 入力欄の値
$('#email').value

// 属性を取得
$('#submit-btn').getAttribute('data-testid')

// クラスリストを取得
$('#submit-btn').classList

要素を操作

// テキストを変更
$('h1').textContent = '新しいタイトル';

// 入力欄に値を設定
$('#email').value = 'test@example.com';

// クリック
$('#submit-btn').click();

// スタイルを変更
$('#submit-btn').style.backgroundColor = 'red';

// nullが返ってきたら、セレクタが間違っている
$('#submit-btn')  // ...

便利なConsole API

console.log()

値を出力します。

console.log('メッセージ');
console.log('ユーザー名:', username);
console.log({ name: 'Taro', age: 25 });

console.error()

エラーメッセージを赤色で出力します。

console.error('エラーが発生しました');

console.warn()

警告メッセージを黄色で出力します。

console.warn('警告: この機能は非推奨です');

console.table()

配列やオブジェクトを表形式で表示します。

const users = [
  { name: 'Taro', age: 25 },
  { name: 'Hanako', age: 30 }
];
console.table(users);

結果：

┌─────────┬──────────┬─────┐
│ (index) │   name   │ age │
├─────────┼──────────┼─────┤
│    0    │ 'Taro'   │ 25  │
│    1    │ 'Hanako' │ 30  │
└─────────┴──────────┴─────┘

console.clear()

Consoleをクリアします。

console.clear();

console.dir()

オブジェクトの詳細を表示します。

const element = $('#submit-btn');
console.dir(element); // DOM要素のすべてのプロパティを表示

Consoleのフィルタリング

Consoleの上部にあるフィルタで、表示するメッセージを絞り込めます。

検索ボックスで、テキストでフィルタリングもできます。

実践例

例1: セレクタの確認

// ボタンが取得できるか確認
$('#submit-btn')
// 結果: <button id="submit-btn">送信</button>

// 取得できない場合は null
$('#wrong-id')
// 結果: null

例2: 複数要素の確認

// すべてのリスト項目を取得
$$('li')
// 結果: [li, li, li, ...]

// 数を確認
$$('li').length
// 結果: 5

// 最初の要素
$$('li')[0]
// 結果: <li>項目1</li>

例3: フォームの値を確認

// すべての入力欄の値を取得
$$('input').forEach(input => {
  console.log(input.name, ':', input.value);
});

// 結果:
// email : user@example.com
// password : ********

例4: イベントのデバッグ

// クリックイベントを確認
$('#submit-btn').addEventListener('click', () => {
  console.log('ボタンがクリックされました');
});

例5: API レスポンスの確認

Playwrightテストで、API レスポンスをConsoleに出力して確認：

test('APIレスポンス確認', async ({ page }) => {
  // Consoleログをキャプチャ
  page.on('console', msg => {
    console.log('ブラウザConsole:', msg.text());
  });

  await page.goto('/');

  // ページのJavaScriptで console.log() されたものが
  // Playwrightのログに表示される
});

よくあるユースケース

1. Playwrightのセレクタを試す

Playwright のコードを書く前に：

// Consoleで試す
document.querySelector('button[type="submit"]')

// 動作したら、Playwrightで使う
await page.locator('button[type="submit"]').click();

2. 要素の状態を確認

// 要素が存在するか
$('#element') !== null

// 表示されているか
$('#element').offsetParent !== null

// 無効化されているか
$('#button').disabled

3. ページの変数を確認

// グローバル変数を確認
window.userName
window.config

// ローカルストレージ
localStorage.getItem('token')

// セッションストレージ
sessionStorage.getItem('sessionId')

コマンド履歴

Consoleで入力したコマンドは履歴として保存されます。

• ↑（上矢印）: 前のコマンド
• ↓（下矢印）: 次のコマンド

Consoleの設定

Consoleの右上の歯車アイコン（設定）で、以下を変更できます：

• ログレベル
• タイムスタンプの表示
• グループの展開/折りたたみ

まとめ

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