Chrome DevTools を使用して要素で発生したイベントを表示するにはどうすればよいですか?

Chrome DevTools を使用して要素で発生したイベントを表示する

Web ページでのイベント処理のトラブルシューティングと最適化を行うには、Chrome DevTools を使用して検査できます。特定の要素でトリガーされるイベント。

Chrome Web Developer を使用して次の手順を実行します:

1. 要素を検査します:

   • ターゲット要素を右クリックして [検査] を選択するか、DevTools の [要素] タブに移動します。

2. イベントの監視:

   • monitorEvents の使用:

     • 「コンソール」タブを開きます。
     • 「コンソール」タブに「monitorEvents($0)」と入力します。ここで、$0 は選択された要素を表します。

   • イベント タイプの指定:

     • オプションで、イベント タイプを指定します。 MonitorEvents の 2 番目の引数として監視したい場合、たとえば、monitorEvents(document.body, 'mouse')。

検査対象の要素との相互作用は、イベント名と関連データが表示されます。

3. 監視の停止:

   • イベントの監視を中止するには、「unmonitorEvents($0)」と入力します。

利用可能なイベント タイプ (2023-01-30 時点)

を指​​定することで監視対象のイベントを絞り込むことができます次のタイプ:

• mouse: マウス イベント (下、上、クリックなど)
• key: キーボード イベント ( down、up、press など)
• touch: タッチイベント (開始、移動、終了など)
• control: 要素コントロールイベント (サイズ変更、フォーカス、変更など)

以上がChrome DevTools を使用して要素で発生したイベントを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。