I have various JS files included in an HTML page and am trying to debug when an event is being triggered. There is an issue in this app I'm helping out on where when the user presses the left or right arrows then the mousemove event is being triggered. In Chrome, I'm using the Developer Tools and am trying to find where this mousemove event is being triggered. In the Scripts tab of the Developer Tools, I have Event Listener breakpoints set for keyup and mousemove. When the page hits the breakpoints, both call stacks show jquery.js. How do I pinpoint and debug which element is triggering these events? I'd like to find a way to have the Developer Tools give me a line number of a file other than jquery.js.
Also, this issue only appears in Chrome for some reason.
Related
Is there a way to debug a specific function without knowing where it is?
For example you have a project that has 100 000 lines of code on a lot of files. To find some function that's triggered by some button you need to search a long time and then you put the break point. Is there some tools to do that when I click the button automatic to stop the debugger of Google Chrome?
On the right side of the Sources Tab look for Event Listener Breakpoints, expand the Mouse events, and select the click event, chrome will go into debugger mode every time there's a click event
You can check on the console tab what triggers your error, and what will be the files involved.
Here's an example on Chrome :
Chrome console example
On the left, you got the file involved (VM998 for example) and the corresponding line (3, for example).
Hope it helps.
I would like to interact with the page I am building with the console open. Unfortunately, if I trigger an event on my page the Dev Tools switches from "Console" to "Sources" and says "paused in debugger." It's driving me bananas. Is there a way to deactivate it?
How to deactivate breakpoints
Just press Ctrl + F8. Alternatively you can click the related button next to the buttons controlling the debugger.
This way the execution won't stop. It is especially useful when you try to inspect websites not under your control that left breakpoints (debugger command) in the source code, that might have been done intentionally to prevent you from doing said inspection.
You likely have a Breakpoint set on an Event. To remove it:
Open Debugger (F12)
Click on the Sources Tab
Click on the Event Listeners Breakpoints accordion dropdown (on the right)
Unselect (untick) each event that you do NOT want to break on.
Check your DOM, XHR and Event Listener breakpoints, and ensure they're unchecked/inactive.
To stop the debugger in Chrome, the circled icon should be deactivated (which will turn it grey colored):
Say i have an icon in a webpage and i would like to figure out what happens when i click that, how do i debug that with chrome debugger? Assuming that i have the non-minified code for the webpage.
i tried to do inspect element and attaching to event handlers which doesn help much.
<span id="__icon84" data-ui="__icon84" data-ui-icon-content="" class="UiIcon UiIconMirrorInRTL" style="font-family:'icons'"></span>
all i get is that the icon used is __icon84.
PS: i am new to JS.
Use the Event Listener Breakpoints sidebar pane in the Sources panel. Expand "Mouse" and check the "click" box. Then the debugger should break whenever you enter a "click" event handler.
This question already has answers here:
Using Chrome, how to find to which events are bound to an element
(8 answers)
Closed 8 years ago.
I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.
I would like to discover what javascript runs when I click on tools in the drawing toolbar.
I have looked at the html and there is no onclick event declared on the element.
I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.
There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?
I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.
I've used the Profiler in Chrome's debug tools for this purpose before.
Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.
Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.
Firebug probably has something similar.
To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.
Google Chrome has a global search that works great.
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.
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.
In Google Chrome's "Inspect Element" tool, if you scroll to the very bottom of the right pane (beneath all the CSS) you will find "Event Listeners".
Using this, you can find out where exactly the event listener code is for any element that the event listener is attached to.
I am not sure if Firebug has this same feature, I couldn't find it myself.
Open the Developer Tools in Chrome, open the scripts panel, then press F8 and put your mouse over the element you are interested in.
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/