Search code examples
javascriptjqueryfiledebuggingfirebug

Javascript Debugger, How to find required Javascript File

I need to fix code on menu mouse over event in a site that contain a numerous of JavaScript files.

Now my Problem is how to find required JavaScript file in such a huge site which contain that mouse over event code. I want the file where that mouse over event is coded. Hope you understand.

Solution

  • Open the Developer Tools in Chrome, open the scripts panel, then press F8 and put your mouse over the element you are interested in.

    enter image description here

    The mouseover event will fire, but will be paused as if there was a debugger statement in the event handler.

    Then step over the functions (over all jQuery functions, yes) until you hit the place where the event is attached to the element.

    Another variant is to grep -rl or ack (my favorite) for mouseover or the ID of the element in the directory where your JavaScript files are located.

    grep -rl 'mouseover' js/