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.
Related
I'm writing a webpage, where I need to do some little changes. The problem is, I need to find the place, where one certain function is called (there are plenty of JavaScript files, so I'm not able to go through them line by line). Do you have any idea, how could I find it out?
I know how to do step-by-step debugging in Firebug or similar browser consoles, but still, I don't know how to recognize the place where the function was called.
I prefer working with consoles in Firefox or Chrome.
Debugging Tips For Chrome:
There are probably a number of ways you can find out where a change is coming from. But I find this one a time saver when it comes to tracking down changes in the DOM. (which will usually lead me to a function I am looking for)
Break on subtree modification or attribute modifications. To do this right click on an element in the DOM tree. Specifically the one you think the change is being applied to. From there you will get a context menu which will give you these options. Selecting either one with set a DOM breakpoint.
If this triggers the debugger you can then proceed to step through the code by using F11 and shift + F11 to skip over functions (useful if you wind up in a library like jQuery). While doing this, pay attention to the call stack. This will tell you where the code is coming from..
More in depth information:
https://developer.chrome.com/devtools/docs/javascript-debugging
To get to know the caller of a function just set a breakpoint at the first line of it. Once the breakpoint gets hit, you can see within the stack trace from where it was called.
Firefox DevTools
Firebug
Chrome DevTools
If you have access to the scripts, you could add at the end of every function you want to watch :
console.trace()
This will output in Chrome's console what function have been called with its position in the file (line number)
I'll pick Chrome for this example, but I'm open to a solution from any browser.
Use Case:
I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow a user to enter a 0 and click update in order to remove the item. Trouble is, there is some listener in some js function that is denying the ability to enter a 0 and click update (after clicking update the old quantity remains).
My question is, what developer tool can I use to find which js function is running during that event? I don't think that Chrome's inspector does this, and I'm not very familiar with Firebug, but I couldn't find the functionality there either.
I feel that I should be able to inspect js firings just like I do css stylings. Is anyone aware of a tool I may use?
I've had to debug some particularly nasty unseen-cause Javascript issues at my job. Knowing the full depth of developer tools like Chrome's is definitely helpful. It undeniably takes some creativity to find places that might be causing the issue, but a few tips:
Tracking down event listeners
Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners. Here you can view what code files have hooked up an event. Often, this will just point you to a middle-framework from the really devious code you're looking for, but sometimes it will point you in the right direction.
Trapping a DOM modification
Many of the unwanted effects I see are because of something changing some value or attribute on the page that I don't want. Anytime this happens, you can right-click on the element (under the Elements view) and say "Break on..." and the specific scenario you're looking for. When Chrome then hits a breakpoint, you can then look downward in the Stack Trace until you find something recognizable that shouldn't be called.
EDIT after reaching ten votes!
Trapping a JS object modification
If the change you're interested in is code-internal, not in the UI, things get trickier. What's meant by this scenario is that you know somewhere in the code, something incredibly annoying like the following is happening.
company.data.myObject.parameter = undefined;
In this situation, you know myObject is still the same object, but it's being modified, perhaps unintentionally. For that, I often insert the following bit of code, sometimes just through the developer console at some point before said modification happens.
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
This includes an arrow function - you're only using this for debugging and Chrome supports it, so might as well save keystrokes. What this will do is freeze your debugger as soon as some line of code attempts to modify myObject's "parameter" property. You don't necessarily have to have a global reference to the variable if you can run this line of code from a previous breakpoint that will have the given object in the locals.
Otherwise, if all I'm starting out with is the HTML code, and I want to tie that to Javascript code, I'll often just look for identifying features like "id" elements, and search all JS files in my development directory for it. Normally, I can reach it pretty fast.
Open your page in Firefox with Firebug enabled.
Go to console tab in firebug and click profiling
enter 0 in the textbox and click the button.
Stop profiling.
You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.
Go to you code. If you are using jQuery there is going to be a function that will be called with the class or id of that particular update button. Or, if you are using Javascript, there is going to be a function called inside the
<input type="button" name="update" onclick="update()">
These are the two ways to look for the function that is being called; there is no software that I know
Download Firebug for Mozilla Firefox, open it, click on Net and refresh your website. Than, you can see which files are loaded on the page.
If you want to check on errors and what goes wrong with an explanation, than click on console and refresh the page once again. You will see the errors and on which line it goes wrong.
Note: in your console, you can say hold or stop, so that the js file stops loading. And you can edit the script by clicking on script in Firebug. Debugging is simple, as it says on their official page https://getfirebug.com/javascript
This is a rather complicated question that may simply be impossible with what's currently available, but if there was an easy way of doing it it would be huge.
I'm debugging some JavaScript in Chrome, and because it's very event-driven, I prefer to get trace reports of the code (what got called, etc.) instead of breakpoints. So wherever I leave a breakpoint, I'd like to see the local function name and arguments.
The closest I can get is to drop a conditional breakpoint in, like the following:
There are two big problems with this approach:
Pasting this into each breakpoint is too cumbersome. People would be far more likely to use it if it could be chosen as the default action for each breakpoint.
In Google Chrome, the log calls get fired twice.
Any ideas on a way to surmount either of these problems? I think it might be possible in IE with VS, but the UI there seems equally cumbersome.
IE11 now has "tracepoints", independent of Visual Studio. They do exactly what you asked for three years ago. I don't see them in Chrome or any other browsers yet, but hopefully they will catch on soon!
The best option I found was to edit the javascript code in Chrome's Javascript panel, adding a console.log.
It would only work after the page has been loaded (unless you can afford to put a break point after refresh and then add the logging lines) and (to be worse) you would have to do it each time you reload the page.
Good luck with your search!
I couldn't find something to do this, so I wrote my own.
Now, instead of constantly inserting and removing console.log calls, I leave the logging in and only watch it when necessary.
Warning: specific code below is untested.
var debug = TraceJS.GetLogger("debug", "mousemove");
$('div').mousemove(function(evt) {
debug(this.id, evt);
});
Every time the mouse is moved over a DIV, it generates a logevent tagged ["mousemove", {id of that element}]
The fun part is being able to selectively watch events. When you want to only see mousemove events for element #a, call the following in the console:
TraceJS('a');
When I want to see all mousemove events, you can call:
TraceJS('mousemove');
Only events that match your filter are shown. If you call TraceJS(no argument), the log calls stop being shown.
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.
I'm debugging an old Infragistic grid. One of the javascript functions executes more times than needed. It was coded to be executed when a user clicks a cell in the grid. However, sometimes it runs when on mouse is over the cell. I'd like to know if there's a way to track what event caused this function to run.
Multiple executions of that function happens only in FireFox, IE behaves as it intended.
Firebug has a really helpful debugger : http://getfirebug.com/js.html
There is a nice tutorial here that will tell you all what you need to know.
The most awesome css, javascript, html, dom, everything-else extension: Firebug.
This could be an issue of event bubbling. Check to see if any elements containing your event also handle it.
The simplest way to track the event is to make a syntax error within the event handler, f.e. alert(non_existing_object). When the error is encounterd, Firebug shows function call stack trace (must be set before in it's settings).