要素を変更するJavaScriptのスニペットを見つける方法

Question

調査しようとしているページには、Javascript / AJAXが値を変更するページに非表示の<input type="hidden" name="Foo" value="123 />要素があります。私は、Javascriptのどこでこの値を時々変更するコードであるかを見つけようとしています。

その要素を使用/変更するjavascriptの場所を見つけるのに役立つツールはありますか？ Firebugはこれを提供しますか？

注：<！> quot; Foo <！> quot;を探してみた場合コード内で、一致するタイトルが見つかりませんでした。 JSONとMootoolsがロードされ、アプリケーション固有のコードがあり、数千行のコードが生成されます。要素はおそらく間接的にアクセスされます。

Answer 1

javascriptがこの値を変更していることをどうやって知るのですか？いつ呼び出されるかは既にわかっているように見えるので（変更を知っているため）、変更を開始する最初のイベント（おそらく他の要素のonclick属性）でFirebugにブレークポイントを提案します。

<！> quot; generic <！> quot;を伝えるのはちょっと難しいJavaScriptのどこでFooの値が変わっているかを知る方法。多くの異なるアプローチ、異なるライブラリがあり、それぞれに構文があります。

たとえば、<！> quot; Foo <！> quot;を検索しようとした場合、見つからなかった場合、スクリプトはDOMを走査して、入力値を<！> quot; something <！> quot;の最初の子として変更している可能性があります。入力の親要素の名前またはIDを検索し、そこからコードを理解しようとします。

通常は、Firebugのデバッグ手法で使用するすべてのスクリプトのJavaScriptロジックを理解しようとしますが、ライブラリを使用するスクリプトについてのみです。

Answer 2

Firebug 1.5には<！> quot; Break-on-Modify <！> quot;が含まれます。 HTMLパネルで。 http://getfirebug.com/doc/breakpoints/demo.html#html-DOM（HTML）ミューテーションイベントの中断。

Answer 3

Firebugで値の設定時にブレークポイントを定義できない場合、ページに次のようなものを挿入できます（Firefoxのみ）：

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

そして、Firebugの関数のブレークポイント、またはconsole.logなどを使用して、Firebugコンソールにスタックをダンプします。

Firebugの計画に関するプレゼンテーションをどこかで見たことを覚えています。これには、サポートされるさまざまな種類のブレークポイントに関するセクションが含まれていましたが、現時点ではリンクが見つかりません。

---

[edit]上記は、valueプロパティに割り当てることで値が設定される場合です：.value = ...。 属性が変更された瞬間（.setAttribute("value", ...)）をキャッチする必要がある場合は、DOMミューテーションリスナーを使用できます。