Finding out what JS is controlling this

Question

I have a page which is using a nice hover feature which is controlled by javascript, and I was wondering if there is a tool which would tell me what JS is controlling at a specific point as there is a lot of JS files used across the site.

Any mordern browser's developer tools can help you do this (For instance [chrome's developer tools](https://developers.google.com/chrome-developer-tools/)). Typically launched using `F12` in most browsers. — Nivas, Jan 18 '13 at 16:39
Try this bookmarklet: http://www.sprymedia.co.uk/article/Visual+Event+2 — gen_Eric, Jan 18 '13 at 16:39
possible duplicate of [How do I find out what javascript runs when I click an element?](http://stackoverflow.com/questions/10262902/how-do-i-find-out-what-javascript-runs-when-i-click-an-element) — bfavaretto, Jan 18 '13 at 16:39

score 0 · Answer 1 · edited Jan 18 '13 at 16:40

0

I would go with Chrome. You can load the page, see all the related JS.

If you are in Chrome, right click on or near the button and click "Inspect Element."

Now you can see all the goodies :)

edited Jan 18 '13 at 16:40

gen_Eric

223,194
41
299
337

answered Jan 18 '13 at 16:40

Red2678

3,177
2
29
43

score 0 · Answer 2 · answered Jan 18 '13 at 16:40

0

You need a debugging tool, one such tool is mentioned in the comments: Chrome. Once you have the debugger enabled you need to set breakpoints on various events to capture the code flow within all the javascripts. For more info visit here

answered Jan 18 '13 at 16:40

Reza S

9,480
3
54
84

score 0 · Answer 3 · answered Jan 18 '13 at 16:43

In google chrome right-click the element, click on "Inspect Element" option. The Chrome Developer window with active Elements tab should appear. You'll see the html structure with your element being highlighted. Right-click on that element and activate all three options in "Break on..." submenu. If some modifications of DOM happen during hover, they will trigger the breakpoint right in the place where you need. But keep in mind, that hover effects can be implemented via css without a bit of javascript, so this plan can fail easily.

score 0 · Answer 4 · answered Jan 18 '13 at 16:46

As other's have said, use Chrome's web developer toolbar. Go to the sources panel and click the little pause button icon in the lower left corner. This will cause the debugger to activate as soon as the next javascript command is run. Then activate the hover feature - the debugger should pause execution in the callback function that's responsible.

Google actually discusses this exact scenario at the bottom of this documentation page.

Finding out what JS is controlling this

4 Answers4