Geek asks and answers

How can you see which Javascript script created a specific html string?

I have a crazy application made almost 100% manipulating the DOM, and I find myself in an unsuccessful position to change something in it. Since there are probably about 100 different scripts that God knows, I do not know in which file I should look for my changes. So, I want to ask if there is a way (using Firebug, maybe something like that) to find out where the specific part of html was created? I am a C developer, so I'm not very good at it, it drives me crazy.

+3
source share
4 answers

Are all elements added when the page loads or partially in response to user input? (click, etc.)

:

<!doctype html>
<html>
   <head>
      <script type="text/javascript">

      // this should work in Firefox but it does not -- https://bugzilla.mozilla.org/show_bug.cgi?id=618379
      // works at least in Opera, probably Chrome too
      Node.prototype._appendChild = Node.prototype.appendChild;
      Node.prototype.appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this._appendChild(child); // call the original function with the original parameters
      }

      // this works in Firefox
      document._createElement = document.createElement;
      document.createElement = function(tagName){
         console.log("creating " + tagName);
         return this._createElement(tagName);
      }

      </script>
   </head>

   <body>
      <script type="text/javascript">
         var p = document.createElement("p");
         p.appendChild( document.createTextNode("abc"));
         document.body.appendChild(p);
      </script>
   </body>
</html>

Opera:

creating p                                                           appendChild.html:14
appending [object Text] to [object HTMLParagraphElement]             appendChild.html:7
appending [object HTMLParagraphElement] to [object HTMLBodyElement]  appendChild.html:7

Firefox ( appendChild), : HTML

<script>
      Node.prototype._appendChild = function(child) {
         console.log("appending " + child + " to " + this);
         return this.appendChild(child)
      };
</script>

- Fiddler, ( WMV, 9,9 ), .appendChild ._appendChild ( Notepad ++ "find replace " ). , . , , Fiddler, , . " " ( ) . ( , Fiddler, ; BTW "Generate file" , 200, CTRL-F5, ).

Fiddler

+2

Chrome . , - . , , ?

+2

, (, /) JS , , , DOM / node, ? , "appendChild" "createElement" / node.

script , . "" JS .

( ), .

+1
source

If you use the jQuery framework in your javascript to make DOM changes, you can find the fireQuery plugin for FireBug in a firefox browser that can provide you with the information you need.

Example: enter image description here

It adds additional information to the standard HTML view by overlaying additional information about the jquery element on the display to provide a deeper understanding of how your javascript modifies the contents of the page.

I hope this helps you.

0
source

More articles:


All Articles