Event Listeners、event listenerを持つすべての要素の概要を種類 (クリック、ホバー、スクロール、タッチ、キーボード、フォーム) ごとに色分けして表示し、各ハンドラーがどこから来たのかを示し、DOM の変更に応じて要素を点滅させます。
何かが反応する理由、または反応しない理由を解明することは、通常、ページでは答えられない質問から始まります。つまり、この要素にはクリック ハンドラーが存在するのでしょうか?実際にホバー動作を所有する要素はどれですか?スクロールを聞いてページが途切れる原因は何ですか?選択する要素がすでにわかっている場合、ブラウザDevTools一度に 1 つの要素のlistenersリストできます。
このツールは、ページ全体の質問に一度に回答します。listenerを持つすべての要素には、その種類の色 (クリック、ホバー、スクロール、タッチ アンド ドラッグ、キーボード、またはフォームとフォーカス) のアウトラインが表示され、要素にホバーすると、正確なイベントと、それぞれの発生元 (インライン属性、オンプロパティ、ReactまたはVueハンドラー、jQuery、またはaddEventListener) が表示されます。カテゴリ タイルは各種類のオンとオフを切り替えます。また、その下のリストには各要素の名前が付けられているため、ワンクリックでその要素までスクロールできます。
フレームワークは適切に処理されます。React listenersルートにアタッチし、内部でイベントをディスパッチします。これにより、アプリ全体がクリック可能に見えるようになります。このツールは、これらのルート登録を脇に置き、それらを宣言する要素のReactハンドラーを表示します。クイック スキャンはリロードを必要とせず、インライン ハンドラー、React、Vue、jQueryをカバーします。ツールを開く前にプレーンのaddEventListenerで追加されたListeners、ページの読み込みの開始時からのみ表示されるため、Reload & recordでは、記録をオンにしてページを 1 回再読み込みします。その後、ツールは、含まれるすべてのlistener ( windowとdocument上のページレベルのリスナーも含む) とともに自動的に再度開きます。
2 番目のタブは DOM 自体を監視します。追加または削除されたすべてのノード、属性の変更、およびテキストの変更がページ上で点滅し、カウンターは 1 秒あたりの変更を示し、リストには関連する属性とともに、最も変化する要素がランク付けされます。誰もページに触れていない間に安定したストリームが発生するということは、通常、タイマー、JavaScript 駆動のアニメーション、またはフレームワークが必要以上に再レンダリングすることを意味し、まさにバッテリーを消耗させ、ページを途切れさせます。
クリック、ホバー、スクロール、タッチ、キーボード、フォームlistenersを備えた要素は、それぞれの種類を表示または非表示にするためのタイルで独自の色で輪郭が示されます。
インライン属性、プロパティ上、ReactおよびVueハンドラー、jQueryイベント、およびaddEventListener呼び出し。すべての要素にラベルが付けられます。
Reactのルートレベルのlisteners脇に置かれ、そのハンドラーはアプリ全体ではなく、それらを宣言する要素に表示されます。
Reload & recordその 1 回の読み込みについてのみ、windowやdocument listenersを含む、ページ読み込みの開始からのすべてのaddEventListener呼び出しを捕捉します。
追加および削除されたノード、属性の変更、およびテキストの変更は、1 秒あたりの変異数カウンターとともにページ上でフラッシュされます。
最も変化する要素と関連する属性のランク付けされたリストは、暴走した再レンダリングを直接示しています。
ボタンに実際にlistenerがあるかどうか、またはハンドラーが代わりにラッパー要素に存在するかどうかが一目でわかります。
windowおよびdocumentのlistenersを含む、スクロール、ホイール、または touchmove をリッスンするすべての要素を検索します。
どのコントロールがキーボード イベントに応答し、どのコントロールがマウスにのみ応答するかを確認します。
ページがアイドル状態の間、突然変異カウンターを監視します。変化し続ける要素は、追加の作業を実行するタイマーまたはフレームワークを指します。
見慣れないサイトにカーソルを合わせて、どの部分がインタラクティブであるか、どのフレームワークがそれらを接続しているかを確認します。
DevSuite ProドックでEvent Listenersアイコンをクリックします。クイック スキャンがすぐに実行され、見つかったすべての要素の概要が表示されます。
アウトラインで囲まれた要素にマウスを置くと、そのイベントとそのソースが表示されます。カテゴリ タイルを使用して、クリック、ホバー、またはスクロールlistenersのみを表示します。
Reload & recordを押すと、記録がオンになった状態でページが 1 回再ロードされます。ツールは自動的に再度開き、すべてのaddEventListener呼び出しが含まれるようになります。
リスト内の行をクリックしてページをその要素までスクロールし、フラッシュします。Copy report完全なリストがテキストとして表示されます。
DOM mutationsタブを開いて、このページを使用します。変更中の要素が点滅し、最も忙しい要素がリストの一番上に表示されます。
