Chrome DevTools で DOM イベントを監視するにはどうすればよいですか?

Chrome DevTools を使用した DOM イベントのモニタリング: 総合ガイド

Web ページ上のカスタマイズ可能なフォーム要素の動作を理解することは、効果的なパフォーマンスを実現するために重要です。イベント処理。 Chrome デベロッパー ツールには、要素で発生したイベントを監視し、その発生に関する洞察を提供する機能が用意されています。

monitorEvents 関数の使用

特定の要素で発生したイベントを監視するには:

1. Chrome を使用して目的の要素を検査しますDevTools.
2. 「コンソール」タブを開きます。
3. コンソールに「monitorEvents($0)」と入力します。$0 は選択した要素を表します。

要素を操作するとき(マウスを動かす、クリックするなど)、発生したイベントの名前とデータがconsole.

イベントの監視解除

イベントの監視を停止するには、コンソールに unmonitorEvents($0) と入力します。

イベント タイプの指定

種類を指定して監視するイベントを絞り込むことができます2 番目のパラメータとして:

monitorEvents(document.body, 'mouse');

これは、「mousedown」、「mouseup」、「mousemove」などのマウス関連イベントのみを監視します。

利用可能なイベント タイプ (としての2023-01-30)

• mouse: "mousedown"、"mouseup"、"click"、"dblclick"、"mousemove"、"mouseover"、 「マウスアウト」、 "マウスホイール"
• key: "keydown"、"keyup"、"keypress"、"textInput"
• touch: "touchstart"、 "タッチムーブ"、"タッチエンド"、 "タッチキャンセル"
• コントロール: "サイズ変更"、"スクロール"、"ズーム"、"フォーカス"、"ぼかし"、"選択"、"変更"、"送信"、"リセット"

の例使用法

次のアニメーション GIF は、monitorEvents 関数の使用法を示しています。

[要素上のイベントの監視を示す GIF の画像]

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