トップページに戻る

Webブラウザ開発者ツール

　Google Chrome, Microsoft Edgeなど、現代のモダンWebブラウザは、Webアプリのデバッグを支援する開発者ツールがあります。

開発者ツールの起動

• Windows: F12
• macOS: Command + Option + I
• Linux: Ctrl + Shift + I
• 　
• Google Chrome: 
  1. メニューバーの「表示」→「開発/デベロッパーツール」
  2. または、ウェブページ上で右クリックして「検証」を選択
• Firefox:
  1. メニューバーの「ツール」→「Web開発」→「開発者ツール」
• Safari:
  1. メニューバーから「Safari」→「設定」→「詳細」タブ
  2. 「メニューバーに“開発”メニューを表示」にチェック
  3. メニューバーの「開発」→「Webインスペクタを表示」を選択

主なタブの役割と使い方

Elements (要素): HTMLとCSSをリアルタイムで確認・編集可能

　要素を右クリックして「検証」を選ぶと、その要素が選択できる

Console: JavaScriptのコマンド入力・デバッグに使用。エラーメッセージの確認や簡単なスクリプトの実行

Network: ページのリソース（画像やJS、CSSファイルなど）のロード状況を確認

Sources: ページで使用されているスクリプトファイルを確認、ブレークポイントを設定してデバッグ。

Performance: ページのパフォーマンスを詳細に測定

Application: クッキーやストレージのデータを確認・管理。サイトのデータベースやキャッシュも確認可能。

　Lighthouse (Chromeのみ) サイトのパフォーマンスやSEOなどのレポートを生成。

よく使う操作例

• 要素のデザイン変更: 
  「Elements」タブで編集したい要素を選択。
  CSSプロパティを追加・修正してデザインの変更を確認。
  　
• JavaScriptエラーの確認:
  「Console」タブを開く。
  エラーメッセージを読んで原因を特定。
  　
• 画像やリソースの読み込み状況確認:
  「Network」タブを開く。
  ロードされるリソースやその速度をチェック。

Consoleタブで使える関数

一般的な関数

• console.log() 任意のメッセージやオブジェクトをコンソールに出力
• console.error() / console.warn() エラーメッセージや警告を表示
• console.table() 配列やオブジェクトを表形式で見やすく表示
• console.dir() オブジェクトのプロパティや内容をリスト形式で確認

DOMの操作

• $() document.querySelector()のショートカットとして動作します。例: $('div')で最初の<div>要素を取得
• $$() document.querySelectorAll()のショートカットとして動作し、該当要素を全て取得
• inspect() 特定の要素をインスペクタ（要素ツール）でハイライト

プロファイリング・デバッグ

• debug(function) 指定した関数のデバッグを開始
• monitor(function) / unmonitor(function) 指定した関数が呼び出されるたびにログを出力
• profile('name') / profileEnd() パフォーマンスプロファイリングを開始/終了

履歴やショートカット

• $_ コンソールで最後に評価された結果を返す
• $0, $1, ... $4 インスペクタで選択中の要素（$0）や、以前選択していた要素（$1～$4）を取得

メモリやタイミング

• performance.now() 現在の高精度タイマーの値を返します。コードの実行時間を計測
• clear() コンソールの出力をすべて消去

その他関数

• getEventListeners(element):  指定した要素に登録されているすべてのイベントリスナーを取得する
  例:
  getEventListeners(document.querySelector('button'))
  　
• monitorEvents(element): 指定した要素で発生するすべてのイベントを監視してログに出力
  例：
  monitorEvents(document.querySelector('button'))
  　
• unmonitorEvents(element): 上記で監視を開始した要素について、イベントの監視を停止
  例：
  unmonitorEvents(document.querySelector('button'))