Running cycles in JavaScript application - javascript

I have a large JavaScript application using only vanilla, jQuery, jQuery-UI and a WYSIWYG library which has performance issues and I'm suspecting it having infinite cycles running in the background. Is there a way to find what is really being done on the background from the developer console in the browser or is there some other way?
For example there are functions which do reverse tree traversing which are done with a while condition. If it's not met it obviously runs infinite without the user knowing. Other problems might be unterminated intervals, etc..

Chrome has a "timeline" tab in the web inspector, which can be used to record which JavaScript events are firing.
Press F12 to open it, then go to the "timeline" tab and begin a recording. Once you stop the recording, you can inspect closely which events are being fired and when.
This can help you spot things like an infinite loop in the code.
See also: the documentation for this tool.

I believe you could use the Timeline in the chrome inspector to see which functions are running at what time and for how long. I've found it easiest to always name my functions so I can inspect in the functions performance.
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en#profile-js

Related

How to track JavaScript execution performance?

So I have this vanilla JavaScript code that is running very slow when on certain older mobile devices (like iPhone 5) but runs flawless on newer devices (like iPhone 7). And I'm not talking about load speed, but the actual JavaScript functionality. I'm using a few addEventListener to handle basic stuff like showing and hiding divs, including an overlay div with transparent opacity. When I click the button which has the addEventListener linked to it, it takes sometimes up to two seconds to show and/or hide the divs. Sometimes it won't even do it and I'll have to click the button again. I won't share the entire JS file here, but I can assure it's pretty basic. What I want to know is if there's someway to track the execution speed of the JavaScript code... Like, I'm not sure if it's something in the actual JS code, or it's slow because the brownser is taking a long time to rendering it. Any help is welcome! =)
2 ways that are available:
The developer tools in Chrome, but Firefox is more useful for tracking performance:
Also, try performance.now(), never used it but heard about it. Maybe that will help.
EDIT: You could also check how it runs via breakpointing. You can breakpoint in Chrome and Firefox I believe.

profiler for slow javascript (jquery) on page event? "Unresponsive Script" error

I am troubleshooting some slow jquery code on a drupal module. After the page loads on a configuration form, you click on an area to expand out a fieldform. However, this expansion takes forever, and most browser give a warning "The script has become unresponsive, do you want to stop it?"
I'm looking for a profiler that will give output like that from xdebug, where I can see the statistics of the entire execution path, just for that one javascript event.
The debugger in firebug will drop me in on the exact line where firefox decides that the script is taking too long; but there is no single line that is the problem (at least I don't think so at this point). I believe that the slowdown comes from some poorly-architectured looping or iteration that spans multiple lines, which is why I want the profiler stats to show me in what parts of the code its spending most of the time.
The Firebug add-on has a profiler built into it. I don't have Firebug installed on the machine I'm using right now, but if I recall it's accessed from a pull-down menu in the "Console" view. (I could be wrong; it's there somewhere.) I can't say that I'm super-fond of it, but you might want to give it a try.
Chrome's developer tools also has a profiler, which is a little fancier.
For IE, there's a product called dynaTrace AJAX edition, which has a really fancy profiler. Of course it only works with IE, but you're going to have to test in IE anyway — if you've got a page that's slow in other browsers, it's going to be even worse in IE :-)

how to see what javascript is doing step by step when open a site?

When I open a site, I want to see all rendering process step by step as I press a kind of "Next Step" button.
At first page will be empty then every time I click Next browser will render next item and stop (DOM or whatever) and tell me which javascript line is executed, which css is applied and so on.
Is there a way to see all these?
Tools like Firebug and Chrome Developer Tools allow you to debug JavaScript functions step by step. However, sounds like you'd like to walk through page rendering, which isn't related to JavaScript.
I don't know any tool which actually pauses rendering and lets you walk through it, but if what you're after is profiling you should check out Chrome's Timline tab, which features detailed views and data about whatever happens on-page, including rendering.
You can use Firebug(Chrome and Firefox), Chrome Dev Tools (Chrome), Dragonfly (Opera) or IE Developer Toolbar for IE.
Use the excellent Firebug to debug through your javascript.
Or use Chrome developer tools, it's nice too
You can use the Online JavaScript Tutor for visualizing your code.

Stopping Javascript execution on loaded page?

There is some problem code in a website I don't have source access to. Upon loading the page, something goes wrong (in my version of Win and FF at least) such that ajax calls are made repeatedly instead of just once. This quickly locks me out of firebug and pretty much everything else so that all I can do is close the tab.
What I want is a simple button that I can quickly hit to stop executing scripts... yet for all my googling and poking about I can't seem to find one?? I can't set a break point in firebug as I get locked out really quick as it struggles with all the ajax calls...
Surely I'm missing something simple here?
Lyle
You can use Fiddler to hijack the JavaScript code with an autoresponder and comment out the part of code that is making all the calls so you can figure out what is going wrong.
Firebug has a "Break on Next" button. It adds a breakpoint on the next execution of a script.
You can disable Javascript
Tool -> Option -> Content -> Disable Javascript (I'm on a French version at the moment, the name should be good though)
Or use NoScript
Javascript is single threaded. This means you can't interrupt executing scripts.
See NoScript.
NoScript is a Firefox extension that lets you block the problem site from running JavaScript while still allowing other sites to work as normal - no need for you to hit a button to stop it.

How do you stop an infinite loop in Javascript?

Let's say I accidentally wrote this:
do { } while (true);
...and then ran it. Apart from killing your browser, is there a way to stop javascript execution (the equivalent of Ctrl+Break in basic, or Ctrl+C)?
Normally, after about 30 seconds your browser asks if you want to stop the long-running script, but this doesn't always happen (as I just found out)!
FYI: A simple loop such as this: for (i=1; i > 0; ++i); will cause my browser to crash (Firefox 3.5b4). I don't feel much like testing to see if it's any of my add-ons. Continuously restarting my browser isn't my idea of a fun Monday night.
2018 update:
In Chrome 67, if you have the DevTools open (F12), you can end the infinite loop without killing the whole tab:
Go to the Sources panel and click "Pause script execution".
Hold that same button and now select the "Stop" icon.
https://developers.google.com/web/updates/2018/04/devtools#stop
I'm using Chome Version 45.0.2454.101
At the top right hand corner, at the hamburger menu, click on More Tools > Task Manager, and then kill the tab from there. This is if attempting to close the tab fails. Otherwise a simple 'X' on the tab kills it.
At least with Chrome, you may be able to kill off the individual tab and not the whole application.
Randolpho has also informed me that IE8 has similar functionality.
If you are using Chrome you can easily kill not responding tab:
Switch to any other tab
Press Shift + Esc to open Chrome's Task Manager
Find your tab in the list (Should be the most memory consumer)
Click End Process
Important: Navigating to another tab is important, because if you are on the original tab JavaScript will make the browser unable to process your key press and do nothing because of its infinite loop.
ref: https://superuser.com/questions/92617/stop-never-ending-popup-alerts-in-firefox
Firefox is particularly problematic ...
Warning! Caveat! Do NOT run this!
javascript:
while (true) alert("irritated and exhausted - yet?");
This will go "infinite" and will NOT exhaust an internal timeout since the script will not chew up CPU time fast enough. In FF 11 this guarantees there will be no "unresponsive script" abortion opportunities.
Gracefully stopping just the offending script was possible and trivial in early browser versions, using manual intervention, without croaking and aborting the whole browser. To not have such control is a major browser software design flaw. Unreasonable dexterity and reflex are required to effect the manual motor mechanics of the "solutions" described in the reference.
Caveat: It is possible for scripts to go "infinite" w/o timing out AND w/o alert type prompts. These are particularly pernicious and annoying. Basically, the scripts run slowly enough so that the CPU time cycle allotment of say 20 sec. is stretched out over several minutes or hours or ..., before timing out, by suspension of execution pending resumption on an event trigger. Instead of timing CPU cycles it would be far better for scripts to timeout on real world clocking. (Ever notice how you cannot abort a script that is trying to retrieve content - but unsuccessfully - for constructing a page? In FF both the address bar buttons reload and cancel/stop are disabled though the tab at least can be closed.) Normal javascript Timeout() and setInterval() calls do not suffer from this and are conditioned so that while suspended, manual intervention is possible to abort them "gracefully".
Test environment for empirical observations:
window.navigator.userAgent=
Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0
PS. the script
for (i=1; i > 0; ++i);
will eventually trap on an overflow error when i exceeds the maximum value allowed.
Most browsers have a "slow script performance" warning that comes up when an out of control javascript is taking a very long time to execute. This warning dialog usually gives the option to kill the offending script.
Depends on the browser. Some let you click the "stop" button to stop javascript execution. Others don't.
I suggest the best way is to just kill the browser or tab entirely.
In Firefox
Go to Developer Tools > Debugger, and click pause button.
In Chrome
Go to Developer Tools > Sources, and click pause button.
most decent browsers do show an "unresponsive script" warning... If not, I guess your best course of action would be to find out why the warning is not popping up.
From https://superuser.com/questions/92617/stop-never-ending-popup-alerts-in-firefox#comment93927_92617, by anonymous:
This isn't a satisfactory general-purpose solution, but with Greasmonkey (or maybe Ubiquity or Jetpack) you could overwrite window.alert with a function that calls window.confirm and optionally throw(s) an error, stopping all script execution, or toggles a flag to stop alerts. That might be useful if a site you keep going back to presents this behavior.
What I do when using Chrome and this happens is hitting shift+ctrl+esc to bring up the windows taskmanager. Then switch to the processes-tab and scroll through the chrome.exe processes(chrome has one process for each open tab) till I find one with significantly higher cpu usage than the oters. It tends to have around 30% for me while all others have like 0-2%
Then I'll just end that process.
Actually the same can be done by going to tools>taskmanager or shift+esc in chrome to open its custom taskmanager for its processes. Might be easier to use that since it shows more info of the tabs.
Last resort: close the browser from the OS. I had good results closing Chrome from the taskbar in Windows 10 while an infinite loop ran. If that didn't work I would have killed the browser in Task Manager as above. On other OS's, of course the exact technique would vary.
Infinite recursions are less a problem. All systems I've seen limit the size of the execution stack, and interrupt with a runtime error eventually once infinite recursion leads to stack overflow (no pun intended).

Categories

Resources