Javascript breakpoint on user event - javascript

When I click a button in my app a series of Javascript code is executed, in this particular case, I click on a "Cancel" button to close the currently open modal window. This close button looks like this on HTML:
<a class="cancel close">Cancel</a>
What I need is a way to track what is "triggered" by the action of clicking this <a> element in Javascript, without having to look into .js files for a reference to this DOM element (where the event was binded to the <a> element).
Is there a way of creating some sort of breakpoint in Javascript after a user generates an event but I don't know where that Javascript code is? In order to actually find where that code is.
I'm using Google Chrome/Developer Tools for debugging Javascript.

Open the developer console; switch to the scripts tab; click in the left-hand margin (on the line number) to set a breakpoint. The script's execution will pause at the breakpoint, and you can inspect the call stack, local variables, and so on.
Or, you can click "Pause", before you trigger an event, and script execution will pause (like setting a global breakpoint) as soon as a script is about to execute, and show you the code. Then you can resume, step over, step into, or step out of the current function/expression.
You can do that in Firebug and the built-in consoles in Safari, Chrome, Opera and IE.
Edit: I should add, that the pause-button is less useful if you have javascript-driven animations, ajax polling, or other code being called with an interval, since the pause button stops any script execution until you click resume. So it'll pause when, say, an animation's update function is called, probably way before you have a chance to trigger the code you're interested it.
However, in there's also "Break on exceptions" and "Break on uncaught exceptions" option in most (if not all) developer consoles. Like the pause button, it's like having a global breakpoint, except it only stops when there's trouble. So if the code you're trying to find is causing errors or throwing exceptions, you can set the debugger to pause the script when that happens.

Firebug is an option for FF.
http://getfirebug.com/doc/breakpoints/demo.html

Related

How can I debug calls to window.open?

I have some React app here that has a malfunction that causes the page to open a new tab with itself. Recursive. and that is rather annoying as the number of tabs runs quickly into an out of memory situation. I want to debug the code to see the stack when the window.open call happens. I do not know where in the application the call happens and so wonder if there is a way to trigger Chrome to jump into script debug mode when something wants to open a window/tab?
So you can use the debugger of chrome, and then add some breakpoint to exactly decide when the code should stop, and then you use the control to jump to the next execution and decide when to go a step back and forth.
it's available for free, all you need to do is to inspect your React app and then visit the Sources tab, there you will see the code in javascript and you can start adding breakpoint and so.
You can also add mouse event listener , like click , dbclick...
You can also trigger and debug how a specific function si running.

Chrome javascript debugger pauses on timeouts, can't debug click events

Almost every webpage has all sorts of timeouts and intervals that are continuously running, so using the pause javascript button in chrome has always just broke on those events and never given me a chance to test anything.
For example, I want to follow what happens when I click something on a page. Instead of digging through the resources, it would be helpful to pause the js, click the thing, and see what code is run. Unfortunately, as soon as I click pause, it breaks on one of the page's interval events.
Is there a way around this?
I think you may find this bookmarklet helpful...and usable in more than just Chrome (though that's where I like to develop too)
Visual Event

How do I find out what functions are called when a button is pressed in Chrome Console?

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
Here's a screenshot of me doing it: http://d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI
The thing that you are looking for is called 'Profiling'.
It can be achieved by:
Go to Profiles
Choose first option ('Collect JavaScript CPU Profile')
Start it before pressing button 'Cut'
This may be helpful for some people:
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging

Javascript execution tracking in Chrome - how?

I have ~ 100-200 javascript functions loaded on a web-site.
I want to determine what javascript function is executed when i click one item or another in Google Chrome.
How can i do it with Chrome Web Developer Tools?
Thanks!
One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8 (Pause Execution). This will break on the first executed JavaScript statement.
Another approach is to set an event listener breakpoint for mousedown or click: in the same Sources panel, expand the "Event Listener Breakpoints" in the righthand sidebar. Expand the "Mouse" item and check the events you want to break on (e.g. "click", "mousedown"). Then go click in your page and see the JS execution break in the DevTools. Enjoy!
An alternative to pausing execution(which usually works great, but doesn't work well on pages which frequently execute periodic code)
You can use chrome's profiler to record for a short period of time. After you finish recording, it will show you a summary of cpu time spent in any of the functions which were executed during recording. We don't really care about the cpu time, were just using this tool because it will show us which functions were executed.
Basically just start recording:
Note: in Chrome 58 and above, the "Profiles" tab is renamed to "Memory". In Chrome 88+, the tab name is "Performance".
Then do your action(eg, click a button on the webpage, or do whatever will cause the interesting code to execute). Then stop the recording and view the result:
Notice I'm using "top down" viewing mode - which shows you the call stack, and you can drill down to see which functions eventually got called. For example, some anonymous function was called first(likely as a result of setTimeout or maybe some click event handler), and then it called some method identified by s.track.s.t which then called s_doPlugins and so on...The important thing is that in top down mode, the entries at the top of the tree form the start of a call stack, and so they're usually a function registered by some timer function(setTimeout, setInterval, requestAnimationFrame, etc...) or some event handler(click, mousemove, load, etc...).
You can also use the "chart" viewing mode, which shows you which function was called at which time, plotted on a chart from left to right. This helps you identify which function you're really looking for because you probably have a sense of what time the code executed within your recording(eg, right in the middle).
btw - I believe most other modern browsers have similar capability.
Chrome has updated many times since I wrote this answer, so the screenshots are a bit outdated, but the concept of using the cpu profiler remains the same. I'll update the screenshots another day.
I want to determine what javascript function is executed when i click one item or another in Google Chrome.
Now there's a great extension called Visual Event that does exactly that. It only recognizes event handlers set via popular js libraries (jQuery, YUI, MooTools, Prototype, Glow) and DOM Level 0 events.

debugging into a javascript anonymous function

I am trying to reverse engineer a Microsoft CRM 2011 web page. The page loads a massive number of scripts and HTML. My current development focus is on the click event of a checkbox element on the page. Clicking the element causes behavior on the page to change, and I want to walk through the code that handles this.
The problem is the checkbox's click handler is attached during page load via an anonymous method. So the code is there, but trying to find it is asking one to locate a needle in a haystack.
Is there a technique using the Internet Explorer debugging tools to somehow make the debugger stop when the checkbox is clicked? There may not be, but I thought I would ask.
Your best bet is to run this in the console:
document.getElementById('theCheckBoxId').onclick
If null appears in the console, you can continue reading. Otherwise the onclick handler and it's code should appear right there in the console.
Use Chrome's dev tools: Right click something on the page -> inspect element. You'll see this:
Go to "SOURCES" (no longer called "Scripts") and there is a '||' Pause button as you see in the screenshot. If the page doesn't fail, you can check the checkbox, and since scripts are paused, you'll see the code for the anonymous function become highlighted and the page will be frozen. You can then use the tools to step through the code.
However, we can certainly better help you with what you actually want from the page...
You can also use attach a onbeforescriptexecute from the console: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
You would be something like this in the console:
document.getElementById('theCheckBoxId').onbeforescriptexecute = function (e) {
alert('hey same thing as pausing the script!');
console.error('script with this id about to run: ' + e.target.id);
//Could also try .src .innerText etc.
//Reference this: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
//the full argument to checkout in the console:
console.error(e);
};
You can also play around with the currentScript method: https://developer.mozilla.org/en/DOM/document.currentScript
You can also right click and inspect the check box, and then on the right panel of dev tools, look at the 'Click' event listener code, but often this is garbled and hard to work with.
It sounds like you have no way of modifying the anonymous function that is tied to the checkbox click event. If not, perhaps you can create a second event handler, but define it before the definition of the existing event handler.
Event handlers in the browser typically fire in the order they were defined. See http://jsfiddle.net/aroder/kkYfX/2/. If you defined your own event handler, it will give you a place to attach the debugger at least somewhere close to the anonymous function you are trying to step through.
Also, use the debugger statement to automatically break your code. If you are using IE, ensure the options under Tools > Options > Advanced > Disable Script Debugging (Internet Explorer) is UNchecked.
<script>
// the debugger statement will automatically break in IE dev tools, Firebug, and Chrome dev tools
debugger;
</script>
Older version of IE is pretty lame specially when it comes to debugging AJAX applications. Firebug is the best that I have seen. It lets you replace an existing javascript function with your own. This is what I suggest.
Open the web application in Firefox
Copy sourcecode of existing function
Format it and add the following statement to the function at the place where you want it to stop and inspect the variables.
debugger;
Paste the new code in Firebug's console window and click on Run .. that's it!

Categories