Track events using Chrome javascript debugger - javascript

I don't have a specific use case here, but occasionally I have been either helping out someone on SO or seen a cool javascript effect on a website and been curious about the code that drives it. However, the event that drives the code may not be immediately obvious. If I can't find the event handler then it can be really hard to find the js responsible for the effects I am interested in. Is there a quick way in the debugger to identify the events attached to an element and to drop a break point in when it fires?
So for example an event may exist on a structure something like so
<div>
<ul>
<li><span><img /></span></li>
</ul>
</div>
Now I don't know if the event is bound to the img, span, li, ul or div itself. Chrome has the Event Listeners area, but I feel like it doesn't always contain events. Anything you guys do that allows you to quickly find the event and drop a break point into it?

yes there is!
find the element that is being reloaded and right click,
choose inspect from context menu,
then right click the html of the element (in the bottom firebugish pane),
in the context menu there are options to:
break on subtree modifications
break on attributes modifications
break on node removal
Article on awesome new dev features in chrome:
http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

If you have access to the .js, just add "debugger;" on its own line. Whenever Chrome (or FF) hits that, it'll trigger the debugger and let you walk through. Esp useful if you have some general idea which code will trigger the event. See http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ for more.

Right click on the element in chrome dev tools, and click on 'break on' , then you would see multiple selections such as sub tree modifications. Or you could also go to chrome//:tracing

Related

Fix Hijacked Event Handling of Click-Events

For a few years now I use user-JavaScript to put additional input buttons and clickable span-elements on pages. Usually I manage to make this work, e.g.
span = document.createElement("span");
span.onclick = __oujs.onClickAddPage;
span.appendChild(document.createTextNode("Add page"));
containingDiv.appendChild(span);
Usually __oujs.onClickAddPage() is called when I click on that span-element.
However, yesterday a site made some changes (apparently I have no clue what they were) that causes clicking on my elements to not cause any events. In the example above __oujs.onClickAddPage() is not called any more. The same is true for input-elements of type "button".
As I'm using Opera, DragonFly shows that my span still is the top-most element in that particular area and, therefore, it should handle the click-event. However, I understand that they include jQuery, which might be part of the misery.
Is there a special technique (maybe with a name that Google knows of) they use to able to do such thing? How do I get the control back and have my code called again? Can I remove some object?
I'm sorry for asking in a rather broad style, but I have no clue what I can look for to fix this myself. Please ask if you need to know something.
I would suggest you this steps:
Create the next function:
function stubFn(event){
console.log('event caught', event); // this will log the click event
__oujs.onClickAddPage.call(event.currentTarget, event); // emulate the onclick behavior
}
Use span.addEventListener('click', stubFn) to add the listener to the element in your code.
If it does not work, then you have to reverse-engineer the script and markup.
I'd suggest to check if there is any element with absolute or fixed position overlapping your span. It can prevent the event propagation.
In general, there are no ways to forbid the elements from userscripts to handle events using inlined handlers.
To get this off my open questions I answer this myself rather than waiting for it to be closed:
I'm sorry, it was my fault. I had a stupid mistake in another user-JavaScript file that affected all sites...
I reinstalled my browser and was thinking about reinstalling my OS, but luckily this isn't necessary.

How to generally find out what javascript controls the behavior of a general element on a webpage?

Look at this fiddle http://jsfiddle.net/52VtD/2635/
Inside it you can see one tooltip working.
Suppose we weren't looking at a fiddle though, and couldn't see the javascript source, but we wanted to know what was controlling this tooltip behavior?
The answer is
$("#tooltip1").tooltip();
So how do we find that answer using chrome or firefox inspector, or some other debug/browser inspector stuff? Preferably it would be quick, as opposed to downloading all .js files and prettifying them in an IDE and then manually searching.
There is no quick answer to this. You pretty much have to analyze a specific situation and see what clues you can then go look for.
In this particular case, you're going to suspect that there's an event listener attached to the #tooltip object. You can first look in the Chrome debugger for event listeners. Right click on the button, select Inspect Element, click on the Event Listeners tab and then look at the event listeners. In this particular case, you will see a bunch of them for that object. What you want is mouseout and mouseover. But, when you see where the event listeners are attached, it just take you to the internals of jQuery. This is a challenge with a library because it's the library that actually attached the event as part of some higher level API that the developer used.
So, now you know that jQuery was used to attach these events. You need to figure out where in the code these events where attached. To do this, you need to develop a theory about how the developer identified this particular object in jQuery. Since there is no particular structure to this simple document, the likely way that the developer found this particular object is with a "#tooltip" selector passed to some jQuery function. So, at this point, I would search all the JS in the page for "#tooltip" and see what you find.
While still in the Chrome debugger, you can hit Ctrl+F and enter #tooltip. Then, hit enter several times as it takes you to different uses of that and the third time, it will take you to:
$("#tooltip1").tooltip();
And, you will have your answer. Obviously, every problem like this is a bit different and it takes some detective work and searching to figure out what clues to search for in the Javascript. Some cases are much harder than others.
In *Chrome** you can bring up the developer tools buy clicking f12 and on the right you should see a tab titled "Event Listeners". Here you should see the event listeners for the page your are on.
This should have all the Event Listener info you could ever want :)

Using Chrome, how to find to which events are bound to an element

Lets suppose I've a link on my page:
Click Here
I don't know anything else, but when I click on the link, an alert("bar") is displayed.
So I know that somewhere, some code is getting bound to #foo.
How can I find the code that is binding the alert("bar") to the click event?
I'm looking for a solution with Chrome.
Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.
Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:
And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.
You can also use Chrome's inspector to find attached events another way, as follows:
Right click on the element to inspect, or find it in the 'Elements' pane.
Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
Right click the word 'function', and then click 'Show function definition'
This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:
Inspect the element
On the new 'jQuery Audit' tab expand the Events property
Choose for the Event you need
From the handler property, right click over function and select 'Show function definition'
You will now see the Event binding code
Click on the 'Pretty print' button for a more readable view of the code
(Latest as of 2022) For version Chrome Version Version 99:
Select the element you want to inspect
Choose the Event Listeners tab
Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.
Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
Google Chromes developer tools has a search function built into the scripts section
If you are unfamiliar with this tool: (just in case)
right click anywhere on a page (in chrome)
click 'Inspect Element'
click the 'Scripts' tab
Search bar in the top right
Doing a quick search for the #ID should take you to the binding function eventually.
Ex: searching for #foo would take you to
$('#foo').click(function(){ alert('bar'); })
2018 Update - Might be helpful for future readers:
I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.
For example: (in chrome console type)
getEventListeners($0)
Whereas $0 is the selected element in the DOM.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Steps
Paste the raw code directely into chrome's console(note:must have jquery loaded already)
Use the following function call: findEventHandlers(eventType, selector);
to find the corresponding's selector specified element's eventType handler.
Example:
findEventHandlers("click", "#clickThis");
Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition
See: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
For Chrome Version 52.0.2743.116:
In Chrome's Developer Tools, bring up the 'Search' panel by hitting Ctrl+Shift+F.
Type in the name of the element you're trying to find.
Results for binded elements should appear in the panel and state the file they're located in.

How do you debug vanishing elements with Firebug/Dev Tools on your websites?

How do you debug vanishing elements with Firebug/Dev Tools on your websites?
I have a div that disappears on mouseleave/out; I would like to explore this div with the debugger, but on my way to the firebug/debugger window, the div I want to inspect disappears.
Does anyone have tricks to achieve this?
EDIT: - It's not marked display: none, but removed from the DOM. Making this a bit challengier to find , if it's gone :-)
Reference this jsFiddle for an example of vanishing nodes on mouseout.
Note that some of the other answers won't handle/catch iFramed content. These two methods will...
As the OP said, the easiest way, to catch these elements, is to use firebug's Break On Mutate function.
Another easy alternative is just to save the file:
While hovering over the appropriate element with the mouse...
Press ControlS. The "Save As" function saves the generated code.
For sites that override ControlS, such as jsFiddle, press AltF, then A (On Windows machines, anyway).
Open the saved code and you can see the fleeting element(s) there. iFramed content will be in the _files subfolder.
To debug vanishing element with DevTools, you can easily break on subtree & attributes modifications or node removal by selecting the element and in context menu select 'Break on...' (as shown below).
Alternatively you may try Visual Event or Visual Event 2 which can show you debugging information about events that have been attached to DOM elements. See: How to find event listeners on a DOM node?
Open Firebug.
Find the div in the markup.
Extra points if you use Ctrl + F to find it!
Ctrl + Shift + C is the shortcut key combo for Inspect Element. From the FireBug Wiki.
Right-click on the element to bring up the context menu and click "Inspect Element".
UPDATE: To address the fact that the element is being removed from the DOM and not hidden.
http://jsfiddle.net/x3v3q/
$('#mydiv').mouseout(function(){
alert('hi');
});
$('*').unbind();
Using jQuery, you can unbind all of the events on all of the elements on the page. If you run the jsfiddle code, you can see that it works when "unbind" is commented. But running "unbind" removes all event handlers from an element.
If you run the unbind from the firebug console, before the element is removed, you can right-click and "Inspect Element" or use one of other suggestions for inspecting it.
If the page doesn't have jQuery loaded, you can install the FireQuery plugin and press "jquerify" to inject jQuery into a page that doesn't have it load already. See https://addons.mozilla.org/en-US/firefox/addon/firequery/
Hope that helps...

View javascript events in browser

I'm using Firefox. Is there something out there that will show me all the JavaScript events that are getting triggered in real time?
You can right-click an element in Firebug's HTML tab and click Log Events.
You will then see every event received by that element in the Console tab.
You can even click one of them to explore the properties of the event object.
I have been using Visual Event for a few years now. It's a simple bookmarklet, meaning you just have to drag it into your bookmarks, and then click it while on your page to visually highlight all javascript events. You can also trigger the events at will, and probably a whole lot more. It's very easy and intuitive to use, and perfect to quickly find what you're looking for. Give it a try:
https://github.com/DataTables/VisualEvent

Categories