23

私はJavascriptでかなり大きなアプリケーションを構築しています。さまざまなビューを変更できる単一のページです。すべてのビューには、独自の変数、イベント、リスナー、要素などがあります。

大規模なコレクションや複数のイベントを処理する場合、ページで何が起こっているのかを正確に把握しておくと便利な場合があります。

すべてのブラウザに開発者ツールがあることは知っていますが、すべての要素などをクリックするのが難しい場合があります。また、いくつかのオプションが見つかりません。

私が興味を持っていることの1つは、ページで現在リッスンしているイベントの数を知ることです。このようにして、ゾンビを作成していないことを確認できます。

ソリューションが開発者ツールである場合は、どこを見て何をすべきかを教えてください。そして最も重要なのは、どのブラウザを選択するかです。

4

3 に答える 3

28

APIgetEventListenersを使用して、すべてのイベントの情報を取得するだけです。このリンクを参照してくださいChrome開発ツール：ページで使用されているすべてのイベントリスナーを表示します

この回答の内容：

ChromeDevtoolではこれを行うことはできません。しかし、あなたはあなたのコンソールでそれらを調べることができますAPIchromeは以下を提供します：getEventListeners

このコードをdev-toolのコンソールに配置するだけで、ページ内のすべてのバインディングクリックイベント番号を取得できます。

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var clks = getEventListeners(dom).click;
    pre += clks ? clks.length || 0 : 0;
    return pre
  }, 0)

結果は次のようになります。

3249

それはそこにたくさんのクリックバインディングでした。パフォーマンスのためのプロジェクトの良い例ではありません。

ページ内のすべての要素でバインドされているイベントと、各イベントのリスナーの数を確認する場合は、次のコードをdev-toolのコンソールに配置するだけです。

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var evtObj = getEventListeners(dom)
    Object.keys(evtObj).forEach(function (evt) {
      if (typeof pre[evt] === 'undefined') {
        pre[evt] = 0
      }
      pre[evt] += evtObj[evt].length
    })
    return pre
  }, {})

結果は次のようになります。

{
  touchstart: 6,
  error: 2,
  click: 3249,
  longpress: 2997,
  tap: 2997,
  touchmove: 4,
  touchend: 4,
  touchcancel: 4,
  load: 1
}

そして、このAPIから取得できる他の多くの情報。ただ即興。

于 2017-08-23T14:32:42.643 に答える
16

Chromeでこれを行う最良の方法getEventListenersは、devtoolsAPIの一部であるを使用することです。（注：これは、devtoolsの開発者のみがアクセスでき、ページの通常のスクリプトにはアクセスできません。）

document.querySelectorAll('*')ページ上のすべての要素を取得し、それらを実行しgetEventListenersてイベントリスナーを取得するために使用できます。レインドロップ氏による別の回答には、これを実際に行う方法に関するいくつかの提案とアプローチがあります。

于 2012-04-23T17:30:51.060 に答える
6

monitorEvents関数を使用して、Chromeデベロッパーツールでイベントを監視できます。詳細については、 http：//www.briangrinstead.com/blog/chrome-developer-tools-monitoreventsを参照してください。

于 2012-04-23T17:35:34.223 に答える