【Chrome DevTools】発生したJavaScriptイベントを確認する方法

JavaScriptイベントの発火を確認する手順

Web開発をしていると、「この要素で実際にどのJavaScriptイベントが発火しているのか知りたい」という場面に出くわすことがあります。本記事では、Google Chromeのデベロッパーツール（DevTools）を使って、発生したJavaScriptイベントを簡単に特定する方法を解説します。

手順1：DevToolsを開く

まず、Google Chromeを開き、F12キーを押してDevTools（デベロッパーツール）を起動します。Windowsでは「Ctrl + Shift + I」、Macでは「Cmd + Option + I」でも開くことができます。

手順2：「Sources」タブに移動する

DevTools上部のメニューからSourcesタブをクリックします。

手順3：Event Listener Breakpointsを開く

画面右側のペインにあるEvent Listener Breakpointsを探して展開します。

手順4：監視したいイベントを選択して要素を操作する

確認したいイベントのカテゴリ（Mouse、Keyboard、Touchなど）にチェックを入れます。その後、ページ上の対象要素に対してクリックやキー入力などの操作を行ってください。

手順5：ブレークポイントで発火を確認する

チェックしたイベントが発火すると、デバッガーが自動的に一時停止し、該当箇所でブレークポイントがかかった状態になります。これにより、どのイベントハンドラが実行されたのかを正確に把握できます。

補足：Consoleから手軽にイベントを監視する方法

もっと手軽に確認したい場合は、ConsoleタブでmonitorEvents(document.body)のようなコマンドを実行する方法もあります。指定した要素で発生したイベントがコンソールに随時ログ出力され、unmonitorEvents(document.body)を実行すれば監視を解除できます。状況に応じて使い分けると、デバッグ作業がぐっと効率化します。