- In the browser with your page open, hit F12 to open Web Inspector
- Hover over the element with the event listener bound to it and in the ‘elements’ tab of web inspector try work out which class
- Go to console tab
- Hit CTRL + SHIFT + F
- Search for the name of the function with the event listener which you indentfied in the step 2 *
- Click on what you think is the function decleration which contains the event listener
- Add a breakpoint at the first line of code which does something in the function, NOT the line which declares the function
- Go back to the browser, reinvoke the event (click the link, etc) and browser will pause processing at the step in the breakpont
- Step through each line of code by pressing F10 and watch what happens at each point and watch out for the step where your error occurs.
- This should then help you identify exactly where the bug is coming from and you should hoepfully know what to do to fix it!
- To try to locate the source file by searching for this name (or a longer unique string of text around this name) in your IDE of choice. (CTRL + H for Eclipse, in my case)
Watch a video
I’ll post a screencast video of this in action soon as I think this makes it a bit easier to understand how this works.