如何跟蹤像onclick onblur這樣的JavaScript事件？

Question

有沒有辦法調試或跟蹤Internet Explorer 7中的每個JavaScript事件？

我有一個錯誤，阻止文本選擇后滾動，我不知道哪個事件或操作創建了錯誤。 我真的想看看當我移動鼠標時觸發了哪些事件。

重新連接源是太多的工作，我希望有一些像嗅探器一樣向我展示所有被觸發的事件。

Answer 1

遍歷頁面上定義了onXYZ函數的所有元素，然后將跟蹤添加到它們：

var allElements = document.all; // Is this right? Anyway, you get the idea.

for (var i in allElements) {
    if (typeof allElements[i].onblur == "function") {
        var oldFunc = allElements[i].onblur;
        allElements[i].onblur = function() {
             alert("onblur called");
             oldFunc();
        };
    }
}

Answer 2

您可能希望嘗試使用Visual Studio 2008及其功能來調試JavaScript代碼。

如果問題不是特定於Internet Explorer 7但也發生在Firefox中，那么調試JavaScript代碼的另一個好方法是Firefox和帶有JavaScript調試器的Firebug插件。 然后你也可以在JavaScript代碼中放入console.log語句，然后你可以在Firebug的控制台窗口中查看輸出，而不是使用有時會搞亂事件鏈的警報。

Answer 3

@ [nickf] - 我很確定document.all是一個特定於Internet Explorer的擴展。

你需要附加一個事件處理程序，沒有辦法只是“觀察”事件。 像Microsoft Ajax庫的jQuery這樣的框架將很容易為您提供添加事件處理程序的方法。 jQuery很好，因為它的選擇器框架。

然后我使用Firebug（Firefox擴展）並輸入斷點。 我發現Firebug比Visual Studio 2008更易於設置和拆卸。

Answer 4

Borkdude說：

您可能希望嘗試使用Visual Studio 2008及其功能來調試JavaScript代碼。

我一直在討論事件處理多次，在我看來，雖然經典的步進調試器對跟蹤長代碼運行很有用，但它們並不能很好地跟蹤事件。 想象一下，在每個事件中聽老鼠移動事件並闖入另一個應用程序......所以在這種情況下，我強烈建議記錄。

如果問題不是特定於Internet Explorer 7但也發生在Firefox中，那么調試JavaScript代碼的另一個好方法是Firefox和帶有JavaScript調試器的Firebug插件。

還有用於Internet Explorer的Firebug Lite 。 我沒有機會使用它，但它存在。 :-)它的缺點是它不是一個完全成熟的調試器，但它有一個window.console對象，這正是你需要的。

Answer 5

它是基本的，但你可以在觸發某些東西時粘貼警報或document.write調用。

Answer 6

我不確定確切的代碼（自編寫復雜的JavaScript代碼以來已經有一段時間了），但您可以枚舉表單上的所有控件並附加一個事件，該事件在觸發事件時輸出內容。

您甚至可以使用匿名函數來包裝必要的信息，以識別觸發的事件。

Answer 7

顯而易見的方法是為各種事件設置一些警報，例如：

element.onclick = function () { alert('Click event'); }

否則，您可以選擇將警報插入到某處的dom中。

但是，認真考慮使用像jQuery這樣的庫來實現您的功能。 很多跨瀏覽器問題都解決了問題，您無需再次解決它們。 我不確定你想要實現的功能，但很可能有很多滾動和選擇你可以使用的jQuery插件。

Answer 8

我喜歡做的一件事是在JavaScript中創建一個綁定函數（就像在Prototype庫中可以找到的那樣），專門用於事件，以便它將“event”對象傳遞給綁定函數。 現在，如果你要這樣做，你可以簡單地拋出一個跟蹤調用，該調用將為每個使用它的處理程序調用。 然后在不需要時將其刪除。 一個地方。 簡單。

但是，無論您如何獲取要調用的trace語句，您仍然希望看到它。 最佳策略是使用單獨的窗格或窗口處理跟蹤調用。 Dojo Toolkit有一個在Internet Explorer中運行的內置控制台，還有其他類似的東西。 這樣做的經典方法是創建一個新窗口和document.write 。

• 我建議在每條跡線上附加日期時間。 過去幫助了我很多。
• 調試和警報通常對您沒有幫助，因為它會中斷正常的事件流。

Answer 9

Matt Berseth在使用Trace Console AjaxControlToolkit Control調試ASP.NET AJAX應用程序時可能會遇到一些問題。

它基於Yahoo YUI記錄器， YUI 2：Logger 。

Answer 10

我的建議是，將FireFox與FireBug一起使用並使用內置的Debug / Trace對象。 它們是一種魅力。