0

特定のdomノードをクリックするたびにログイベントなどを発行するグローバルjavascriptリスナーを登録することにより、自動テスト中にデバッグしたいWebアプリケーションがあります。ソリューションが純粋な JavaScript であるか、フレームワークの 1 つを使用しているかは気にしません。これを行うための軽量な方法はありますか？

4

2 に答える 2

1

何をログに記録したいのか、どこに記録したいのか正確にはわかりませんが、おそらくこれが必要なものです。

window.addEventListener('click',function(e)
{
    console.log(e);
    //or
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'url/to/logscript', true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//or application/json
    var data = {node: (e.target || e.srcElement).tagName,
                other: (e.target || e.srcElement).baseURI};
    xhr.onreadystatechange = callback;//<-- define your own, or leave as is
    xhr.send(data);//serialize or JSON.stringify
},false);

ログスクリプトには、必要なイベント データを保存できます。
jQueryでは、これを行うことができます：

$(window).on('click', function(e)
{
    e = e instanceof jQuery ? e[0] : e;//get the real event, I believe jQ wraps the event object...
    $.ajax({method: 'post',
            data: e,
            url: 'path/to/logscript',
            success: function(response)
            {
                //this is the callback function from the vanilla JS snippet
            }
    });
}

(DOM 構造による) 循環参照が含まれているため、出力を JSON 化して (別の例のコードを使用して) 検閲する jquery 関数のわずかに変更されたバージョンを使用して終了しました。

$(window).on('click', function(e) { e = e instanceof jQuery ? e[0] : e;//実際のイベントを取得します。jQ はイベント オブジェクトをラップすると思います...

    $.ajax({method: 'post',
            data: JSON.stringify(e, censor(e)),
            url: 'debug',
            success: function(response) {
                //this is the callback function from the vanilla JS snippet
            }
    });
});

function censor(censor) {
  return (function() {
    var i = 0;

    return function(key, value) {
      if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
        return '[Circular]';

      if(i >= 29) 
        return '[Unknown]';

      ++i; 

      return value;
    }
  })(censor);
}

バックエンドの Rails コントローラーは次のようになります。

class DebugController < ApplicationController
  def index
    puts params['data']
  end
end
于 2013-06-12T13:13:11.213 に答える
0

これは、特定のノードがクリックされたときにコンソールにログを記録し、イベント委任 (イベント バブリング) を使用するため、単一 (またはグローバル) のイベント リスナーのみが存在します。

var node = document.getElementsByTagName("p")[0];

window.addEventListener("click", function (evt) {
    if (evt.target === node) {
        console.log("clicked");
    };
}, false);

jsfiddleについて

jsfiddle で質問をクリックして、console.log を参照してください。

于 2013-06-12T13:18:30.890 に答える