Locating an event binding source - javascript

We are building a site, and it has a ton of jQuery plugins and misc code from several developers. Somewhere a keydown even was trapped by the document. (Basically the spacebar no longer has it's default browser usage, i.e. scrolling, selecting checkboxes, etc.) Using Chrome's debugging tools, the origin is jquery-1.7.2.min.js line 3-- Not a lot of help.
I was able to "fix" the issue by running $(document).off('keydown'); at the end of window.onload function, but I dislike this fix terribly.
Is there an easy way to find out where the original binding occurred? (My guess is that some plugin defaults to "document" when not supplied with an element.) What I have done so far:
Grepped through the source for "keyCode" and removed any plugins that trap the spacebar. Removed other non-obvious plugins. I can continue with this, but I'm looking at a lot of grunt work.

You can open the developer tools in chrome, click inspect element on document's body element, scroll the right panel down to the bottom and view Event Listeners, it is probably attached to the body element or some other very big container. Check the listenerBody under the keydown event.

Related

How to tell what js function is creating an element with Firefox DevTools

I have a page with so many elements I dont need but I cant remove them because I dont see them in the html templates so I assume javascript is creating them at some point.
I would like to use Firefox developer tools to detect which functions are doing that in order to stop the page from creating those elements. What should I do? I use Firefox 53.0.3
Thank you.
First of all, you should verify whether the HTML is really added via JavaScript or it's already part of the page source.
To do that, right-click the page and choose View Page Source from the context menu or press Ctrl+U. In the source view search for the element, e.g. via its ID or its contents.
If you find it, it is obviously added within the server-side script, so you need to check there where it's added. If you cannot find it, it's added via JavaScript.
If the element is added by a specific action you do on the page, you can use Firebug's feature called Break on Child Addition or Removal, which allows to stop the JavaScript execution at the line where the change happened. To do so, right-click the parent of the element and choose the above option from the context menu.
A second way to find out where the HTML is added is by setting an event breakpoint for the load event. To do that, switch to the Events side panel, right-click the load event handler and choose Set breakpoint from the context menu:
Then reload the page. The script execution will stop at the related line. Starting from there, you need to step through the code until you reach the line where the element is added.
Having said that, Firebug is officially discontinued in favor of the Firefox Developer Tools and Firebug's Script panel doesn't work anymore in current versions of Firefox. (Also the option to set the breakpoint is missing.) Unfortunately, the Firefox DevTools are currently (as of Firefox 54.0) still missing the feature to break on DOM changes. There is already a bug report for it, though.
Having said that, the second option to stop at the page load is also available there. To do so, switch to the Debugger panel. In there click the button to expand the side panels (), then switch to the Events side panel. There you need to check the load event listener:
Then follow the steps as described above, stepping through the code until you reach the line where the element is added.

Listing of all events, to see why Tinymce doesn't focus?

Using the latest TinyMCE 4 in Inline mode, I was noticing sometimes (rarely, randomly) the focus event doesn't seem to fire, therefore some changes in my editor.on('focus' listener don't run. Oddly enough there is no ajax call that seems to cause this lag.
In efforts to debug this, I was noticing there is no editor.on('all' event-handler as Backbone has, and on beforeExecCommand doesn't handle all listeners like Loadcontent etc.
Is there an easy way to list events to see how some listeners aren't getting fired, or other way to debug weird race-condition in MCE editors starting up?
There are things I use to debug events:
Visual Events: its a small chrome plugin that as the name suggests shows you a visual representation of the event handlers for each of the DOM elements
Chrome developer tools' event breakpoints: You can set a breakpoint on any type of event. Perhaps some handler in your code is being fired first and calling event.stopPropagation()

In a web browser, how to find out what triggers a hidden CSS class to appear in javascript?

As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.

Debugging Jquery on page load only

Okay so I'm familiar with a few techniques for debugging events attached to elements. Events like click, mousedown, focus, etc.
Those are easy, but what I am trying to do is log the sequence of events triggered by jquery plugins (like sliders, form plugins, etc) when the document loads. There is some native markup what gets mutated when the page loads and new elements are introduced and some old ones changed or deleted.
Now I tried chrome tools and firefox and setting breakpoints to break on subtree modification on certain elements I'm sure are being changed but that only works after the page is finished loading.
What method would you guys suggest for debugging this kind of situation?
There is no code involved, its just an abstract, general situation.
After the page has finished loading, click on the "pause" button in Chrome Developer Tools, refresh the page, and it will pause right away -- you would be able to step through until the point you want prior to load. Make sure JQuery file, plugins, etc. are on the Development, unminified versions for this to work.

How to debug JAVASCRIPT events? Or how to make all functions call trace?

For example there is a button. It is wrapped by <div>.
When pressing to this button, there is Javascript function call happen, then another function, then calling by ajax to the server and if it's OK, Javascript redirecting this page to another page.
It's hard to debug.
Is it possible to "catch" this event? I.e. to know, what function is called after the click on the button? Button doesn't have attribute onclick i.e. event listener is connected in Javascript.
And if it's not possible then is it possible to make trace? That is to look at all functions calls, which is called after which?
It would be better in visual way, though in textual is also good:)
Yeah - this sort of thing is not as simple as you would like.
Google Chrome, Edge and Opera have an Event Listeners panel. Right-click your button, then select Inspect Element. Make sure the correct element is selected, then check the Event Listeners panel on the right.
In Firefox this feature is implemented differently:
The inspector shows the word “event” next to elements in the HTML
Pane, that have event listeners bound to them. Click the icon, then
you’ll see a popup listing all the event listeners bound to this
element.
You can also use the debugger keyword to set a breakpoint in the call stack somewhere. Then use your favorite javascript debugger (built-in dev tools in Safari, Google Chrome & IE8, firebug for Firefox). In each of these, there's a call stack that'll allow you to navigate through the current call stack.
You can use firebug to trace the javascript code. Its plugin of Firefox to trace the styles (css), js and also allows to edit.
Opera provides dragonfly which is similar to firebug
Besides the accepted answer (upvoted) which mentions the event listeners available on the developer tools, I want to emphasize a simple, yet potentially useful point. If the expected event does not appear on the list, as expected, an alternative to a debugger is good plain old console.log() to find out what's going on.
As a practical example, it helped me to literally see the cause of the issue, when I logged the relevant element.innerHTML at the right place. Particularly helpful after changes to the DOM.
Check out the debugging features in Firebug, it'll let you add JavaScript breakpoints and step through your code.

Categories

Resources