Sep 17, 2010

DOM要素に対して起こったイベントのロギング

transitionendをトリガーとしてタブを閉じる処理が完了されるはずなのに、それが実行されなくて閉じられないタブが残ってしまう問題について、実際にどのアニメーションが成功したのか・失敗したのか、何がトリガーになっているのか、というのをデバッグしたかったんだけど、「閉じられないタブ」が発生した後からそれを調べる方法がなかったので、じゃあ先にログを収集しておこうという事でこういうコードを書いてみた。

var startDOMLogging = function(aElement) {
      var log = aElement.DOMLog = Array.slice(aElement.DOMLog || []);
      aElement.addEventListener('DOMAttrModified', function(aEvent) {
        if (aEvent.originalTarget != aEvent.currentTarget) return;
        log.push({
          type      : aEvent.type,
          attrName  : aEvent.attrName,
          prevValue : aEvent.prevValue,
          newValue  : aEvent.newValue,
          timeStamp : Date.now()
        });
      }, false);
      aElement.addEventListener('transitionend', function(aEvent) {
        if (aEvent.originalTarget != aEvent.currentTarget) return;
        log.push({
          type         : aEvent.type,
          propertyName : aEvent.propertyName,
          elapsedTime  : aEvent.elapsedTime,
          timeStamp    : Date.now()
        });
      }, false);
    };

gBrowser.tabContainer.addEventListener('TabOpen', function(aEvent) {
  startDOMLogging(aEvent.originalTarget);
}, false);

DOM InspectorでJavaScript Objectを表示してSubjectのEvaluate JavaScriptで alert(JSON.stringify(target.DOMLog)) とすれば、そのDOM要素で何が起こっていたのかが分かる。

エラーコンソールとかデバッグ系のツールで最初からこういう事ができるといいのにね。UxUにそういうユーティリティを追加してみようかな。

分類：Mozilla > XUL, , , , , 時刻：08:41 | この記事へのリンク | Comments/Trackbacks (0) | Edit
エントリを編集します。

wikieditish message: Ready to edit this entry.











拡張機能