3.1 基本操作

Consoleを開く

JavaScriptの実行

Consoleの入力欄（>マークの横）にJavaScriptを入力し、Enterで実行。現在のページのコンテキストで実行される。

基本的な使い方

// 計算
2 + 3
// → 5

// 変数の定義
let message = 'Hello, World!'
message
// → 'Hello, World!'

// DOMの操作
document.title
// → ページタイトル

document.querySelector('h1').textContent
// → h1要素のテキスト

複数行の入力

Shift+Enterで改行し、複数行のコードを入力できる。

// 関数の定義（Shift+Enterで改行）
function greet(name) {
    return `Hello, ${name}!`;
}

greet('Developer')
// → 'Hello, Developer!'

コマンド履歴

↑キーで過去に実行したコマンドを呼び出せる。

ログレベル

Consoleに出力されるメッセージは、種類（ログレベル）によって色分けされる。

console.log('通常のログ');
console.info('情報');
console.warn('警告: 非推奨の機能を使用しています');
console.error('エラー: ファイルが見つかりません');

ログレベルでフィルタリング

Console上部のフィルタボタンでログレベルを絞り込める。エラーのみを表示したい場合は「Errors」を選択。

ログのフィルタリング

テキストフィルタ

Console上部のフィルタ入力欄にテキストを入力すると、そのテキストを含むログのみ表示される。

正規表現フィルタ

/pattern/形式で正規表現によるフィルタリングが可能。

// 数字を含むログのみ表示
/\d+/

// "error"または"warning"を含むログ
/error|warning/i

URLフィルタ

特定のソースからのログのみ表示。

// 特定ドメインからのログ
url:example.com

// 特定ファイルからのログ
url:script.js

除外フィルタ

-（マイナス）を前に付けると除外。

// "debug"を含まないログのみ表示
-debug

エラーの読み方

JavaScriptエラーはConsoleに赤色で表示される。エラーメッセージの読み方を理解することがデバッグの第一歩。

エラーの構成要素

Uncaught TypeError: Cannot read properties of null (reading 'textContent')
    at getTitle (script.js:15:23)
    at main (script.js:42:5)
    at script.js:50:1

よくあるエラータイプ

Consoleのクリア

ログの保持設定

Console設定（歯車アイコン）で「Preserve log」にチェックを入れると、ページ遷移やリロードでもログが消えなくなる。複数ページにまたがるデバッグに便利。

実行コンテキスト

ConsoleでのJavaScript実行は、特定のコンテキスト（実行環境）で行われる。

コンテキストの切り替え

Console上部のドロップダウン（通常は「top」と表示）から、実行コンテキストを切り替えられる。

• top: メインページ
• iframe名: ページ内のiframe
• 拡張機能名: Chrome拡張機能のコンテキスト
• Service Worker: 登録されているService Worker

Console設定

Console右上の歯車アイコンから設定を変更できる。