Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?
In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.
Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.
#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example
Related
When making myself familiar with unknown code, I often find myself trapped in a situation where I have a huge amount of javscript files and some events triggered when I click around in the browser, which I want to detect in the code. However, regarding the amount of js code, this seems to be a non-trivial task to me.
Is there any tool / workaround that supports me? Like logging every js function called or the like?
The way of debugging js is different in different browser. I will show how to debug in chrome.
First of all, inspect the button in chrome using chrome developer tools.
Then you can see the event listeners attached to that particular button. Make sure ancestors all checkbox is unchecked and the link below the event listener will you to particular code file.
I'm trying to debug a third party webpage which includes lots of javascript files. There isn't any javascript code in the page itself.
I would like to see what code will get executed when I click on a link. I can right click the link and inspect the html element, but how can I find what code will actually get executed when the link is clicked?
I'm using Chrome and Firefox, so a solution that works on either is fine.
I have seen this question, but that is asking specifically about inspector, whereas I don't really mind how the events are found (e.g. one option could be to use wget to download all the sources and the grep to search for the bindings - that would be ok if it works!).
Chrome: Right click on an element, inspect. Far right, there's an Event Listeners section.
In Firebug you can use the command getEventListeners() or install the extension Eventbug and have a look at its Events panel.
In future versions of Firebug it might be that the functionality of Eventbug will be integrated, so that it's working like in the Chrome DevTools. See issue 5440.
I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!
I have a JavaScript issue where something doesn't work in Chrome but works in Firefox. Since this is part of a big Web Portal, I cannot easily isolate stuff.
I know that Chrome has a Javascript timeline, but does Firefox have something like that as well? Firebug only seems to set arbitrary breakpoints or "Break on Next", but no way to just see what JavaScript is executed.
Open firebug and click the arrow on the "net" tab. click enable. Lastly, reload the page.
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.