Javascript Memory Usage & Debugging in Chrome / Fi

Question

I am currently developing an application using Google O3D WebGL framework, and this is the first time I am using JavaScript so intensively. The features are only around 20% complete, but already the application on its own starts off by taking up around 160 meg of memory, whilst leaving the application running it consumes around 200kb per second in Chrome, 2meg in FF; as the screen is refreshed. As I am writing this I have left Chrome 9 running and it has just hit 400 meg of memory usage. I am now crapping myself especially with FF's usage, and I am looking for any really good documentation on optimizing JavaScript, preventing memory leaks, anything that will help me tackle this basically. I would also really appreciate any links to awesome tools that will help me. Thanks in advance.

Edit: I have come across Mozilla performance tools but I need something simple to use, preferably with a GUI, or at least a noob friendly guide. Also a lot of those tools are for linux (I am using Win7) or require purchase / are command line only. + I would really like to see something for Chrome :) but I will accept the answer that provides the most usefull information.

Edit: Google Chrome's developer tools only report on 10meg of memory usage, unsure where the rest is coming from.

Answer 1

According to http://blog.chromium.org/2011/05/chrome-developer-tools-put-javascript.html you can actually use the performance.memory window property within your Javascript to check the effect of sections of code on memory usage.

This looks useful to me as interpreting the output of heap snapshots isn't straightforward.

Answer 2

Have you had a chance to check out Speed Tracer yet? That should give you more of what you need I think.

With memory usage, you probably want to do a heap profile in the Chrome developer tools under the "Profiles" tab. You can compare multiple heap profiles to get a look at memory usage.