1

Is there a way to find out what script is being used with certain elements of the HTML.

For example if I want to find out what script went into creating a drop down menu, I know how to find the HTML and CSS for the menu, but not the JavaScript (or whatever script was used).

I am using the Web Developer chrome extension to get the JavaScript of pages I'm interested in, however these are huge documents, how do I know which functions/variables/etc link to which part of the HTML?

Ben
  • 20,737
  • 12
  • 71
  • 115
Justin
  • 37
  • 9
  • 2
    sorry, unless the javascript is well documented with useful comments (pardon me while a take a moment to laugh) there is no "way" except reading and comprehending the code – Jaromanda X Jul 11 '15 at 12:25
  • @JaromandaX that's not entirely true.. kind of depend on the context... if something created a piece of html (eg. dropdown menu), there's likely a change handler listening to it.. you could try digging up that info and find out which script is listening.. this SO question has a few options listed http://stackoverflow.com/questions/7338193/using-chrome-how-to-find-whos-binded-to-an-event – Ben Jul 11 '15 at 12:28
  • If it's not too difficult to explain, could you elaborate on "reading and comprehending the code"? I understand most parts of the source code/js that I'm pulling up, so I kind of feel like I've been reading and comprehending, but I'm just not seeing the link between the HTML and js :/ – Justin Jul 11 '15 at 12:28
  • 1
    @Ben - if the javascript is well written, then you have a better chance of putting the pieces together, excuse me while I pause to laugh again at `well written`. Your link to the other SO question would show where events are handled in code, and that's probably a good portion of the code covered right there, but even that probably wont be easy with the majority of "code" out there in the wild – Jaromanda X Jul 11 '15 at 12:33
  • 1
    @JaromandaX Seems that the event handler would be a great point to start, particularly with a breakpoint + stack trace. Not saying it's going to be an obvious answer but it's a good starting point. – Ben Jul 11 '15 at 12:37
  • 1
    My first approach in a situation like this, to keep things simple and before I’d start to manually look through a lot of code or make extended us of the JS debugger, would be to check the dynamically created HTML elements for ids/classes, and then use [strg]+[f] to try and find those in the JavaScript code. Or id/classes of an ancestor element higher up, that existed in the HTML source code already, and was used to select the element that those new elements were appended to … – CBroe Jul 11 '15 at 12:39
  • 1
    I agree with what Ben said. Event Listener Breakpoints are a good staring point. Especially the DOM Mutaion Events, for let's dynamically inserted or removed nodes. The debugger in general is great for that. Just narrow down to what your looking for an set a few breakpoints. – DavidDomain Jul 11 '15 at 12:43
  • @CBroe Yes, I would also agree with you that `id` and `class` can give great valuable clues just search through the source – though the stack trace would give additional info, such as not just the library that created it but also why it was created (Eg. a Select2 field created by another library) – Ben Jul 11 '15 at 12:46
  • @Ben, there’s for sure several different ways, and DOM mutation events as mentioned by David are a great idea too – but they way the question was asked, I think that might(!) be a bit much for the OP. – CBroe Jul 11 '15 at 12:55
  • @CBroe - You're right there, a lot of this is a bit over my head. I understand the suggestions, just not sure how to do them myself. Hopefully as I learn more this thread will make more sense to me. I guess there's no easy way about it. Would be great if there where a program to extract the HTML/CSS/Script of a specified element, for learning purposes. Maybe some day. Thanks for the suggestions everyone. – Justin Jul 11 '15 at 13:39

1 Answers1

0

It's possible Chrome's dev tools will be of help to you... You can right-click on the element, select the "inspect element" option. Then, right-click on the HTML node within the DOM inspector and select the "break on..." option and select (e.g.) "subtree modifications" and "attribute modifications".

Chrome will then stop the javascript execution when the drop down menu you're interested in changes. You will then be able to explore the javascript that is used.

Of course, this will be of little help if the javascript is minified...

David Sulc
  • 25,946
  • 3
  • 52
  • 54