2013-03-08 11 views
14

まず、これは「変異観察者の作成方法」ではありません。私はAPIを見てきました。トリガされたMutationObserverのスタックトレースはどのように取得されますか?

誰かが突然変異が起こったときの「ソース」を表示する方法を知っているのだろうかと思っていました。これはおそらく回避策の一種かもしれません - 私はAPIのドキュメントでこれの言及を見ることができません。

displaystyleに設定されている要素がnoneに設定されているかどうかを調べようとしています。私は、サーバーの変異イベントがあり、彼らはこの線に沿って見て

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function (mutation) { 
     if (mutation.attributeName === "style") { 
      var extendedMutation = _.extend({}, mutation, { 
       newValue: $(mutation.target).attr("style") 
      }); 

      console.log(extendedMutation); 
     } 
     }); 
}); 

observer.observe(row.element[0], { attributes: true, attributeOldValue: true }); 

私のコードは次のようになり

{ 
    addedNodes: NodeList[] 

    attributeName: "style" 

    attributeNamespace: null 

    newValue: "display: none;" 

    nextSibling: null 

    oldValue: "" 

    previousSibling: null 

    removedNodes: NodeList[] 

    target: li#d526d311-e6e0-4ef1-a3a1-f8686bbb468f.group 

    type: "attributes" 

} 

私はどこJSソースで知りたいのですがそれはから来ている!何か案は?

私はctrl + fを試しましたが、役に立たないことに注意してください。 (また、Chrome向けWebkitMutationObserverを試みたが、同じ結果)

デバッガ/例外出力:

http://i.imgur.com/jYeqCPX.png

答えて

4

MutationObserver APIは単にAjaxのように、非同期です。 Chromeでan exampleを考えてみましょう:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/"); 
xhr.onload = function() { debugger; }; 
xhr.send(); 

あなたはおそらく認識しているとおり、現在の関数の実行が完了した後onloadがいつかまで実行されません。したがって、onloaddebuggerコールが実行されると、関数呼び出しスタックは必ずクリアされ、onloadハンドラは新しいスタックで実行されます。

プロパティの突然変異がどこで発生するのか知りたいが、onloadハンドラの観点からは、xhr.send()がどこで呼び出されたかを知ろうとするようなスタックトレースからその情報を取得することはできません。

+0

実行の「鎖」が非同期であるという理由だけで、その「履歴」、すなわち呼び出された時点よりも前に起こったことのスナップショットを追跡するのが困難である必要があるということを意味するわけではありません。 Ajax呼び出しでは、Ajax呼び出しまでのスタックトレース文字列を(例えば)AjaxオブジェクトをラップするPromiseにアタッチすることができます。 MutationObserverではこれは不可能に思えます。煩わしい。 –

9

私はこのスレッドがかなり古くなっていることは知っていますが、今日はChromeから非同期呼び出しをトレースするためのツールがあるので、私はそれについて言及したいと思います。

Chromeコールスタック非同期呼び出しのバックトレースを実現すると思われる非同期オプション。このオプションは、[開発ツール] - > [コールスタック]タブにあります。 Asyncオプションをオンにし、MutationObserverコールバック関数にブレークポイントを設定することで、完全なコールスタックを見ることができます。

希望します。

+0

IMO、これは最上位のものよりも良い答えです。 – candrews

+0

おっと!この「非同期」チェックボックスは現在Chrome DevToolsには表示されないようです(v 60.0 ...)。多分それはどこか別の場所に行きましたか? FFのためのこのようなものは何ですか?私はChromeが嫌いです。 –

関連する問題