如何找到修改元素的JavaScript代碼片段？

我試圖檢查的頁面在頁面上有一個隱藏的<input type="hidden" name="Foo" value="123 />元素，其中Javascript/AJAX修改值。我試圖找到JavaScript中的地方是不時修改此值的代碼。如何找到修改元素的JavaScript代碼片段？

有沒有一種工具可以幫助我找到JavaScript中使用/修改該元素的位置？如果是的話，Firebug會提供這個功能嗎？

注意：如果嘗試在代碼中查找「Foo」，但我沒有找到任何匹配的標題。有JSON和Mootools加載，+特定於應用程序的代碼，這導致數千行代碼。該元素可能是間接訪問的。

來源

2009-10-26 AmericanDad

你怎麼知道javascript正在修改這個值？由於它看起來已經知道它何時被調用（因爲你知道它發生了變化），所以我會在第一個啓動變化的事件（可能是其他元素中的onclick屬性）中的Firebug中建議一個斷點。

這是一種很難告訴你一種「通用」的方式來知道JavaScript在哪裏改變Foo的價值，因爲有很多不同的方法，不同的庫，每一個都有它的語法。

例如，如果您嘗試搜索「Foo」並且未找到它，該腳本可能會遍歷DOM並將輸入值更改爲「某物的第一個孩子」。我會嘗試搜索輸入的父元素的名稱或ID，並從那裏瞭解代碼。

我通常只是試着理解來自我使用Firebug的調試技術的每個腳本的JavaScript邏輯 - 但只是使用這些庫的腳本。

來源

2009-10-26 02:28:44 GmonC

+1爲通用方式'grep'的候選人進行更改。如其他答案中所述，希望應該有更好的方法來設置斷點。 – GuruM 2012-09-23 08:00:51

如果螢火蟲不會讓你定義上設置一些價值斷點，你可以插入這樣的事情在頁面（火狐只）：

$("textarea")[0].__defineSetter__("value", function(val) { 
    alert("called"); 
})

，要麼在Firebug或使用該函數斷點console.log或任何將堆棧轉儲到螢火蟲控制檯。

我記得在某個地方看到過有關Firebug計劃的演示文稿，其中包括有關各種要支持的斷點的部分，但我現在找不到它的鏈接。

[編輯]以上是值是通過分配給值屬性設置的情況下：.value = ...。如果您需要趕上屬性發生更改（.setAttribute("value", ...)），您可以使用DOM變異監聽器。

來源

2009-10-27 08:58:30 Nickolay

+1信息。你能分享__how__上的信息來使用DOM變異監聽器嗎？也許有一兩個鏈接？謝謝。 – GuruM 2012-09-23 08:04:02

@GuruM：將addEventListener與事件名稱DOMAttrModified一起使用，請參閱https://developer.mozilla.org/en-US/docs/DOM/Mutation_events。請注意，突變監聽器正在被逐漸淘汰，以支持不同的機制，即突變觀察者（也在該MDN頁面上提到） – Nickolay 2012-09-23 11:44:54

+1 @Nickolay。感謝您的鏈接。 – GuruM 2012-09-24 08:49:32

Firebug 1.5將在HTML面板上出現「Break-on-Modify」。請參閱http://getfirebug.com/doc/breakpoints/demo.html#html - 斷開DOM（HTML）突變事件。

來源

2009-10-28 19:36:46 robcee

+1。確實存在設置斷點的修改功能。但是，當我嘗試設置這樣一個斷點時，它不起作用，即它沒有在代碼中斷，使得更改說按鈕標題/狀態得到改變。所以不知道除了設置斷點之外還需要做什麼。 – GuruM 2012-09-23 08:02:43

如何找到修改元素的JavaScript代碼片段？

回答

相關問題