I am working on a web page that contains check boxes that do some stuff when they are clicked, or changed. There is no explicit event binding in the HTML itself. I have literally no idea how the event binding has been done and no way to find what JavaScript is being run when the checkboxes are changed (other than the page uses jQuery in other places).
The JavaScript itself is spread out in several locations in the HTML itself, plus in a whole bunch of additional JavaScript files. This would make just sticking breakpoints everywhere in the JavaScript difficult.
Is there any way, using some debugging environment for example, to find out what JavaScript is run when I change the values of these checkboxes?
Go to scripts tab in google chrome developer tools and set an Event Listener Breakpoint to a change event (or click event, whatever they are using) and go click a checkbox. It will then stop execution right away and you may manually walk through the whole execution process, function by function.
Related
Background:
I often find myself in the position of debugging a piece of Java script on a web page in an unfamiliar codebase, and often one that has seen many developers and coding approaches. Sometimes I do not even what technologies might be in use, eg. angular etc.
The first time I need to address the Java script is when a specific behaviour is unexpected (ie. it has gone wrong.)
Question:
What tool provides the fastest route to identifying the entry point of the code that is causing the problem?
Example:
I have an html element on a page lets say a button. When that button is clicked I expect to see an http request at the server. There are many ways the element can be associated with its Java script listener. eg JQuery, thrid party plugins such as knockout etc, in house scripts, and so on.
Using developer tools I can start debugging this in the browser but only if I already know the entry point to put a breakpoint on.
Is there a faster method to find the entry point than doing regular expressions searches on the pages code based on intuition and guess work to find what might be attached to that particular element?
For me, the best starting point is in Chrome developer tools. You can:
Choose an element in the elements tab
On the right-hand side of the elements tree, click the "Event Listeners" tab.
Find the event you want to debug (like click)
Click the hyperlink to bring up the code for event listeners, and set breakpoints. Sometimes you have to click the "format code" button (looks like { }) to get the code on multiple lines so that the breakpoint is manageable.
Do the click, and you'll hit your breakpoint, allowing you to step through the code, add watch variables, etc.
Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.
Is there a tool (or something in firebug) that will tell me what events just fired and more importantly on what elements they were bound to?
I have a number of javascript "includes", some minified, some not. I am experiencing some odd behaviour that I want to turn off, but I cannot find what is causing it.
I have a form showing in a "popup" and when I try to click on one of the input boxes, the "popup" closes, so some event bind somewhere is causing this.
The problem is, I don't know what element has this spurious event bound to it. The problem also occurs if I click anywhere inside the popup (and on the background mask that is covering the rest of the page, but that's acceptable)
I am using firefox, so anything I can type in the console is also an option. The eventys in the multiple javascript files are done in various ways, some through jquery, some using inline attributes (eg. onclick="..."), some using just javascript.
I certainly don't want to go and add some line of code to every possible event in every javascript file.
I have spent over an hour trying to hunt down this dom element and have already eliminated the obvious ones like the divs containing the popup and the body tag.
DOM modifications can be tracked down using the Break On Mutate option within Firebug. It can be activated by clicking the related button ( ) within the HTML panel. Note that the Script panel has to be enabled for this to work.
There are also several other Break On ... features, which may help you finding the right position within the code for a specific event.
Furthermore Firebug 2.0 introduced an Events side panel, which displays all events bound to the element selected within the HTML panel. If libraries like jQuery are used, it will even allow you to investigate the user-defined function wrapped by the library function in case you enable the option Show Wrapped Listeners as described in the answer to a related question.
Every once in a while I'll have huge jQuery event handlers like:-
$(document).on("click",".some-class", function(){
//perform some action
});
that are attached to elements on my page. This is no problem if there are few events handlers on my page but on a huge application debugging these event handler can be a real pain in the neck. I'll have no idea at times on which callback is being called on certain events.
So, my question is, is there any option or trick in dev-tools to know which functions are being called?
It doesn't have to be dev-tools. It can be javascript or jquery trick too.
Also, I realize that I can do console.log, debugger; or even put console.trace() in my callback functions but I was wondering if there is something more cleaner and smarter.
You can use the Chrome Dev Tools Javascript CPU profiler.
It will tell you which functions are called, and by which other functions.
Though I suspect that you will find console.log to be easier.
Been here many a time, I recommend console.log() at the begining of every function. Then look at the trace this creates on the console. Very useful for picking events that are firing multiple times needlessly.
// Your function
function doSomething(event) {
console.log("doSomething(event)", event.currentTarget);
// code for doSomething
}
$('#mybutton').click(doSomething);
So, I sort of found a way to get Dev tools to do this without using any kind of console.log(s).
This is what you do (I'll be talking for Chrome Dev Tools but Firefox should be similar too)
Open dev tools and go to Source Panel.
On your right there should be Event Listener Breakpoints, go ahead and click on Mouse->click to enable any breakpoints on click event. (You can choose your own event for this. I'm doing click event in this case)
If your scripts are minified and bundled then just skip this process. Go ahead and click on the element that you want to find your function on. It should trigger the breakpoint and you will be taken to the script that's enabling the click event (usually jquery in my case and you might have to do couple of Step Over to get to jQuery file)
It's possible that your jQuery will be minified but it's okay, there's a prettifier on Chrome Dev Tools (the tiny {} button at the bottom left of the source panel).
Now press Ctrl+Shift+O (this searches your function names on dev tools) and type dispatch (for me this is where all the trigger to our custom function seems to be happening.
Now create a breakpoint on the while loop right after e.currentTarget (might be different in different version of jQuery) and then press play/resume breakpoint (Your breakpoint should now jump to this line).
Now with few Step Ins (might be more) it'll take you to the function that's invoking this event.
It's not a perfect solution but it beats the hell out of searching all the files in your project.
If anyone has any better solution then I'll change the answer to the one that's easiest.
In stackoverflow here and here I found ways to add breakpoint in every method of a class. But I can't find a way to add a break point to every method of a jquery/javascript file.
This is exactly what I am trying to achieve. When I click on a checkbox in a custom control gridview (asp.net) , the entire row gets highlighted. When viewing the generated HTML, the row is nested under many other elements with their own ids and classes. There is some jquery code possibly within this 500kb jquery file, that subscribes to some event of one of the tags, either based on id or class. If I find a way to add a breakpoint to every method, I can pin point which method is responsible for highlighting the row.
(What I have gathered by looking at the generated HTML is that, a jquery function assigns a css class to the selected row)
Here is a link for how to debug javascript within Visual Studio:
http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx
However, setting a break-point on every single method and waiting for one of them to hit is not the correct way to do debugging. You should focus on the events which are fired after the row is selected. You can do this by looking at the javascript which was written to interact with the gridview.
One place to start would be to look at the solution in IE, open up the developer tools by pressing F12. Using those tools will get you where you want to be.
P.S. Developer tools in IE also allow you to do javascript debugging right there in the browser.