4.1 Elements・Console

DevToolsの起動方法

Elementsパネル

ページのDOM構造とCSSスタイルを検査・編集するツール。リアルタイムでページを変更して動作確認ができる。

DOM操作の基本

右クリックメニューの活用

• Copy → Copy selector: CSSセレクタをコピー
• Copy → Copy JS path: document.querySelector()形式
• Copy → Copy XPath: XPathをコピー
• Force state: :hover, :active, :focusを強制適用
• Break on: DOM変更時にブレークポイント設定
• Store as global variable: Consoleでtemp1として参照可能に
• Scroll into view: 要素位置までスクロール

Stylesペイン

選択要素のCSSを確認・編集できる。上から優先度順に表示され、打ち消し線はオーバーライドされたプロパティ。

スタイル編集

関連タブ

• Computed: 最終計算値とその出所
• Layout: Flexbox/Gridの視覚的デバッグ
• Event Listeners: 要素にバインドされたイベント
• DOM Breakpoints: 設定済みのブレークポイント

Consoleパネル

JavaScriptの実行、ログ確認、エラー調査を行う。Escで他パネル下部にドロワー表示も可能。

ログレベル

高度なログ出力

// テーブル表示
console.table([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]);

// グループ化
console.group('処理名');
console.log('ステップ1');
console.log('ステップ2');
console.groupEnd();

// 処理時間計測
console.time('処理A');
// ... 処理 ...
console.timeEnd('処理A');

// 条件付きログ
console.assert(x > 0, 'xは正の値である必要があります');

// スタックトレース
console.trace('呼び出し元を追跡');

// オブジェクト詳細
console.dir(document.body);

Console特殊変数

// 選択中の要素のスタイルを確認
getComputedStyle($0)

// 要素のイベントリスナーを確認
getEventListeners($0)

// 関数の実行を監視
monitor(functionName)

// イベントを監視
monitorEvents($0, 'click')

Consoleのフィルタリング

• ログレベルでフィルタ: サイドバーでError/Warning等を選択
• テキストフィルタ: フィルタ入力欄に文字列を入力
• 正規表現: /pattern/形式で検索
• URLフィルタ: url:example.comで特定ソースのログのみ
• コンテキストフィルタ: ドロップダウンで拡張機能/iframeを選択