High CPU usage of javascript - How to debug?

Question

I have used over the last weeks the tool "dynaTrace AJAX Edition" (free tool) for analyzing web sites (not only JavaScript). It has some pretty good views that show the usage of resources. Give it a try to track down the part of the javascript (or other parts of the browser) that are the reason for high cpu usage. However the tool is only working with firefox and current internet explorer implementations, but when you use firebug, that seems to indicate that you are using firefox.

There is an entry on their forums page named "What else can impact Browser CPU Usage and AJAX Performance?" which gives some more hints that may help.

Try to reload the page after enabling FireBug profile feature.

I heavilly used FireBug profile feature to do this. You can see which function is consuming most of the time. Great thing. Try this on other pages with simple javascript example. It should work well. If it doesn't work in your example, just post them a bug.

You could try Chrome/Chromium Developer Tools » Profiler, Start, reload the page, wait a few minutes and stop it. It would be enough data to have a clue of what could be the problem.

Another common issue with high cpu usage on browsers it's css animations, (as well as gif images). I've been stuck with a high cpu usage issue when developing a web application, it was weird that it only happened when the tab was active/visible, but when on background it didn't, and the problem were present on FF, Chrome and Chromium. Finally it turned to be animated Bootstrap Progress bar.

You could check this easily here http://getbootstrap.com/components/#progress-animated, open it on Chrome, open Tools » Task Manager, then Toggle animation on Bootstrap site and check cpu usage.

I guess this is not strictly an answer to the question, but a usefull tip to find the problem. Since I can't comment yet, I decided to post it as an answer as someone could find it usefull, let me know if this is such a bad practice.