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
Related
I'm currently working on developing a Chrome extension and have noticed that my extension works fine for several days or longer, but eventually reaches a state where various event listeners seem to stop working. For instance, my extension listens for storage updates coming from its popup and also for an alarm which is triggered every minute, but at some point both these seem to stop working simultaneously. My event listeners are registered synchronously as far as I can tell, and they continue to work for far longer than I would expect if this were not the case.
Further, when the extension reaches this state, I find that when I add test event listeners in the service worker console, these listeners don't appear to trigger properly either.
I have not been able to identify the precise circumstances under which this issue occurs, or replicate it successfully, except by waiting several days with my extension running. The issue does not appear to be associated with any runtime exceptions. If anyone has experienced a similar issue or has any debugging advice I'd greatly appreciate it. At this point, I'm not sure how to continue investigating this issue.
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.
I've got a page that shows real-time statistics. It runs a lot of javascript, makes a lot of HTTP requests, renders SVG charts every few seconds using D3.js, has a lot of CSS animations, and rearranges the DOM frequently.
As long as the page is focused, it runs smoothly. If I switch to another tab and come back later, there's often a short pause where the page seems to be frozen before the view suddenly seems to rerender and the page becomes usable again. The longer the tab has been backgrounded, the longer this pause is. If the tab has been in the background for a very long time (hours) and I switch back to it, it will be frozen for a long time then crash.
All these behaviors are observed in Chrome. I haven't tested much in other browsers.
What isn't Chrome doing while the tab is in the background, and what is it doing during that pause when I first switch back to the tab?
UPDATE:
I'm also doing some jQuery animating. This answer and this one may be relevant.
According to that first answer:
"Inactive browser tabs buffer some of the setInterval or setTimeout functions."
stop(true,true) will stop all buffered events and execute immediatly only the last animation.
I've added a call to .stop(true, true) in my code, and at least for short trips away from the tab, I'm not detecting a hiccup. I need to leave it in the background for a long time and test it before I can tell if it made significant difference.
We had a similar issue with SVG graphs and managed to solve it using Page Visibility API introduced with HTML5. If anyone stumbles upon such an issue please refer to the following article Using the Page Visibility API
What we managed to do was to suspend all SVG rendering activities when the browser window is not visible. This managed to stop the tab from crashing.
Yes, it's typical behavior of Chrome browser.
I guess that while your tab is in background, Chrome places all tab data on "back shelf" to clear "front shelf" that works much faster. I know, it sounds unprofessionally, but i hope that you understood.
I think it is very hard to solve this problem in your case (because you are using a lot of manipulations with graphic).. but maybe this method will save you (i had never tested it before):
Every time you update your statistics (or do some highload calculations), you can save a timestamp. Then, when you update your statistics again, you can substract that old timestamp of the new timestamp. And, if you see that the difference between timestamps is very big, use setTimeout() function before next update. Maybe, it will prevent Chrome's chash.
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
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.