I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).

As far as I know Firebug can't do that.

I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).

As far as I know Firebug can't do that.

• javascript
• debugging
• optimization

Share Improve this question Follow edited May 1, 2011 at 12:46 Marcel Korpel 21.8k66 gold badges6262 silver badges8080 bronze badges asked May 1, 2011 at 12:42 GregoGrego 2,25099 gold badges4545 silver badges6565 bronze badges 4

• 3 Even on dog slow bytecode interpreters, you could hardly follow it because it'd be way too fast to even get rendered, let alone recognized by you. Triply so with modern JS engines which JIT-pile. There's a reason profiling tool run the program as usual and give you the collected metrics afterwards as static text. – user395760 Commented May 1, 2011 at 12:47
• I don't think it wouldnt be so hard, it would be hard in other languages, but Javascript is real time language, its doing it all right there, so it could just say what it is doing at the very moment. – Grego Commented May 1, 2011 at 12:58
• Try running a program doing more calculations than most real-world JS applications, e.g. this snippet off the top of my head. It finishes "instantly" on my machine (way less than a second), and that's a quite old puter running Firefox 4. That's a hundred thousand lines of math, converting numbers to strings and concatenating strings. And it finishes in less than a second. How can you hope that any line, or even loop, you've ever written takes much longer than that, and hence long enough to be observed with the plain eye? – user395760 Commented May 1, 2011 at 13:14
• What exactly is it you're trying to do? While I don't entirely agree with Delnan here, I do think you need to be more specific about what it is you're trying to acplish. Just monitoring everything a JS program is doing will generate far more data than you can process. – broofa Commented May 1, 2011 at 13:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.

If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.

If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.

As the other answer says,if you want to go step by step, setting a debug point is the way to go.

But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).

Here is an example:

console.profile('myProfile');
//some code you want to know more about
console.profileEnd();

You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)

In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).