Profiling JavaScript without crashing your browser - javascript

So tried my hand at profiling some code and I figured the easiest way to do it (at least on Firefox) was to use either console's time/timeEnd or profile/profileEnd, and I tried both.
The problem I have is with the number of runs I can do before Firefox crashes on me. Now I won't paste the code here because it's typical benchmarking code (and it's very messy), but obviously the gist of it is that it runs functions (a test is represented with a function), logging their execution time for a certain number of runs.
Now with for example, 5e4 it sorta works but I don't think it's enough to spot (very) micro optimizations, but more than that, it crashes.
So how do you profile your JavaScript? Because this way, it's barely feasible.

When I used to profile my JavaScript code I used Chrome's profiler; the JavaScript Console in the developer view gives it, and it pretty much worked for me. Have you ever tried it?

I have tried profiling a page with a lot of scripting in Firebug on FF4 and the same in Chrome (last version). Firefox crashed within a second or two, Chrome didn't seem to have problems with it. Maybe you can find something on it in the Firebug issues list?

Although not a traditional code profiler, I recommend Google's Speed Tracer:
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.

I think the profiler in the JavaScript Debugger (aka Venkman) is quite good. The version currently on addons.mozilla.org is not compatible with Firefox 4, but the change necessary to make it work has been committed. See https://bugzilla.mozilla.org/show_bug.cgi?id=614557 for details.

dynaTrace AJAX edition(free)- one more tool in your bag. Offers a little bit more detailed performance metrics, IMHO. They used to have it only for IE, but their new one supports FF too. Also see Steve Sounder's blog

Related

Is there a way to see which functions/executions are taking longest?

There is a certain spot on my page (a jquery based web-app) where it kind of hangs. Are there any tools that would quickly determine if there's a specific place it's getting tripped up?
It is on localhost right now, which may alter what tools would be applicable. (I'm not talking about load time, but rather execution time)
Have you seen FireBug?
Firebug for Firefox and Developer Console for Chrome both have built in script profiling tools that will help you identify slow logic in your JavaScript programs.
There is jQuery deep profiling plugin by John Resig. There's also this article from him that talks about Function Call profiling.
There is also this great tool called dynaTrace which gives you the ability to profile in IE (and FF). It provides lot more than simple JS profiling (like DOM rendering measurement) and is quite useful.
Use Firebug, just call:
console.time("timing foo");
Before executing the code you want to measure and:
console.timeEnd("timing foo");
Afterwards. That in a low-fi approach.
The high-fi would be just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards.
DynaTrace is by far the best thing I have seen out there... its Free to use too.. And the best part is it works for IE too where the performance is worst hit. A brilliant application with all performance measures.. needs a little bit of learning but once you are used to it there is nothing like it out there...
it also measures network time in ajax requests.. apart from this the rendering time etc.. it can go deep into JS libraries like Jquery..
Try it!!

Narrowing down JavaScript performance issues on a page using a lot of jQuery calls?

My pages seem to be reacting slow.
There is a lot of JavaScript (jQuery) code on the page. How can I narrow it down? What is taking so long?
The YSlow add-on is the best solution to know why your website is slow.
There are many issues which could be the reason for slowness.
Combining many jQuery to one could help you increasing your performance.
Also you can put the script at the bottom of your page and CSS at top.
If you use Firefox, you can install Firebug and use the profiler.
You can read more about it in Understanding Firebug profiler output, and there is a tutorial in Firebug Tutorial – Logging, Profiling and CommandLine (Part I).
If you use Internet Explorer, you can use dynaTrace Ajax edition.
Read more about it in A Step-by-Step Guide to dynaTrace Ajax Edition, available today for public download .
There's also a built-in profiler in Google Chrome that you can play around with.
Both these solutions will help you narrow down what JavaScript function calls are the most costly, and with repeated profilings you will be able to see the effect your changes has.
Using tools like these will not only make you a better programmer (if you take the lessons to heart, and avoid the same mistakes they point out in the future), they will also give you a new appreciation of what happens in your code, since you will get a behind-the-scenes glimpse you haven't seen before ;)
Also, if you don't know YSlow, like Wazzy is talking about - get to know it... maybe your problem isn't even slow JavaScript code :)

Internet Explorer 6 Script Timeline

I'm developing a fairly large page with several external javascript files. In IE6, the page hangs for a few seconds just as it's finished loading. I'm not (directly) asking for help debugging this problem, I'm only asking for help finding a tool to help debug this problem.
What I'm looking for is something similar to Chrome Developer Tools's "Timeline" tab. Something that will tell me the run time of my various external scripts (or functions, event handlers, whatever level of granularity is available).
I'd much prefer something that is free, but if that isn't available, I may be convinced to shell out some cash for a little extra quality.
Please keep in mind that I'm looking for tools that will work with Internet Explorer 6.
I think Dynatrace could be what you're looking for.
It's quite complex but integrates well with IE and gives you more data than you could ever use: Number of times functions get called, CPU usage per function, a step-by-step look at the DOM tree being built... It's pretty intense.
Godspeed.
Fiddler2 will work well for tracking all aspects of the load time... unfortunately no pretty timeline chart though.

How can I test potentially "browser-crashing" JavaScript?

I've been having a crack at some of the problems over at http://projecteuler.net/ with JavaScript. I've been using a simple html page and running my code in script tags so I can log my results in the browsers' console. When experimenting with loops I sometimes cause the browser to crash.
Is there a better environment for me to do this kind of development?
a browser that has separate processes for each tab
debugger breakpoints
an if that breaks the loop if some threshold for time is hit
If you're running computationally expensive programs in your browser, you may want to look at using web workers. In short, they allow you to run code in a different thread which won't lock up the browser.
If you are just interested in running javascript programs as such, why don't you use something like node.js or even Rhino? That way you can easily log output without loosing it if it get into 'trouble'.
I can think of two ready possibilities:
1) Use a debugger that has breakpoints. Firebug is rather nice. Safari and Chrome also have some built-in debugging tools.
2) You could move your testing out of the browser using Mozilla Rhino and Env-js (see http://groups.google.com/group/envjs and http://github.com/thatcher/env-js )
All modern browsers (except Opera) should interrupt your script if it runs for more than 5-10 seconds (Source).
In Firefox you can even lower this threshold, if 10 seconds mean a too big punishment. Also note that this mechanism kicks in even when you run code from the Firebug console:
Stop Script on Firefox http://img819.imageshack.us/img819/9655/infloopsp.jpg
I think this feature alone should provide a pretty safe environment for these loopy experiments :)
There's nothing you can do to keep the browser from crashing other than fix bugs that cause the browser to crash.
You can at least mitigate the impact of the crash by using a browser like Chrome that generally segregates crashes in one tab from the others (so you lose only your own page), or just installing a separate browser specifically for testing.
In terms of keeping track of data that might have gone to the log, you might use a plugin like Firebug that has a built-in debugger so you can pause the script execution partway through and examine your variables, presumably before any crash occurs.

debugging javascript for IE6

firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.

Categories