Question

I am trying to understand how to get from the chrome debugger the following info : there is an event on page triggered by a click on an input file type tag. But it is impossible for me to trace back the mecanism : which js file is called when the event is triggered. Is there a way do get this info from the debugger ?

Answer 1

Do you have a look at the Event Listeners entry in the right-hand window? If I right-click the ‘Google-Chrome’ tag at the bottom of your post, and select Inspect Element, I get the html tag highlighted. If I then look in the right-hand pane at the Event Listeners, I can see that this element has handlers for blur, click, keyup, keydown, mousedown, mouseout, mouseover. Yet just looking at the html I can’t see that. If I expand the event handlers, I can see that they all point to “jquery.min.js : 3”. This is because the file has been minimized and is only 4 lines – each of which is probably 20 or 25,000 chars long. Minimized scripts are difficult to analyse unfortunately.

Try it with a page that doesn’t use minimizes scripts and you can click the link in the event handler window to be taken directly to the pertinant function – unfortunately, you are taken to the start of the line concerned, which makes jquery.min.js a waste of time to do this with. You can always use the non-minified version of a script for debugging purposes, switching over to the minified version for production.

With other’s pages, you can sometimes get away with saving a local copy, before linking an unminified version of the script.