JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Chromeで要素に発生したイベントを確認・表示する方法

Chrome DevToolsで要素のイベントを確認する手順

Webページ上の特定の要素でどんなイベントが発生しているかを調べたいとき、Google Chromeのデベロッパーツールにある「イベントリスナーブレークポイント」機能を利用すると便利です。以下の手順に従って、要素上で発火するイベントを簡単に監視できます。

1. デベロッパーツールを開く

Google Chromeを起動し、F12キーを押してデベロッパーツール（Dev Tools）を開きます。Windowsなら「Ctrl + Shift + I」、Macなら「Cmd + Option + I」でも開けます。

2. 「Sources」タブに移動する

デベロッパーツール上部のメニューからSources（ソース）タブをクリックします。

Chromeで要素に発生したイベントを確認・表示する方法

3. イベントリスナーブレークポイントを表示する

画面右側のペインにあるEvent Listener Breakpoints（イベントリスナーブレークポイント）セクションを探して展開します。

Chromeで要素に発生したイベントを確認・表示する方法

4. 監視したいイベントを選択して操作する

リストから監視したいイベントカテゴリ（Mouse、Keyboard、Controlなど）にチェックを入れます。その後、調査したい対象要素に対してクリックや入力などの操作を行ってください。

該当するイベントが発火すると、デバッガーが自動的にブレークポイントで一時停止し、どのJavaScriptコードが実行されたのかをステップごとに確認できるようになります。

補足：その他の確認方法

コンソールで getEventListeners(document.querySelector('セレクタ')) を実行すれば、特定の要素に登録済みのイベントリスナを一覧表示することも可能です。また、「Elements」パネルの「Event Listeners」セクションからも登録されているイベントを確認できます。用途に応じて使い分けると、デバッグ作業がより効率的になります。

  1. 【保存版】Mac の Safari・Chrome・Firefox で「要素を検証」する方法を徹底解説

    Mac の Safari・Chrome・Firefox で「要素を検証(Inspect Element)」を使う方法 「我々は今や、巨大な脳の神経細胞(ニューロン)のように、インターネットへと接続されている」〜 スティーヴン・ホーキング まさにその通りです。現代においてインターネットの力は計り知れません。Web 上には何百万というサイトと膨大な情報があふれており、調査のための情報収集はもちろん、エンターテインメントの鑑賞や SNS の利用まで、私たちの毎日は Web サイトと切り離せないものになっています。 画像出典:YouTube Web サイトを見ているとき、「要素を検証(Inspect

  2. Chromeで保存したパスワードを表示・確認する3つの方法

    Google Chromeには標準でパスワード管理機能が組み込まれており、日々のネットライフを大きく快適にしてくれています。よく訪問するサイトのメールアドレスやパスワードをChromeに保存しておけば、ログインのたびにいちいち入力する必要がなくなり、認証作業がぐっと楽になります。 しかし、この便利な機能には落とし穴もあります。毎回パスワードを打ち込む習慣がなくなるため、あっさりとパスワードを忘れてしまうことです。AndroidやiOS端末からサイトにログインしようとしたのに、パスワードがどうしても思い出せない——そんな経験はありませんか? 実はGoogle Chromeには、保存済みのパスワー