Live javascript debugging by recording function calls and parameters

Question

Is there a debugging system that allows me to record javascript function calls and their parameters as they occur? this would allow me to trace and debug applications in live/client situations without the performance hit due to manual logging.

Edit: I'm not talking about manually calling functions using a 'console' window and viewing the results, or manually adding 'trace' or 'log' commands into my javascript. I need it to work with any running javascript.

score 18 · Accepted Answer · answered Feb 11 '11 at 05:29

18

Can you override Function.prototype.call and retrieve arguments and arguments.callee?

This would have the effect of reporting on ALL functions and therefore being super verbose, but maybe you'd want to filter.

Then you have the question of how you want to report, perhaps with if (console) console.log

answered Feb 11 '11 at 05:29

Joe Hanink

4,767
4
19
21

1

This is an awesome idea. – mwilcox Feb 13 '11 at 18:51
Fantastic idea, but no GUI provided! If I had some confirmation that dynatrace caught function calls I would have awarded the bounty there, but until then, yours is the best idea. – Robin Rodricks Feb 17 '11 at 01:17
Can someone provide an example of this? If you look at this (http://jsfiddle.net/b7Sny/) implementation in IE or FF, there's only one alert when I would expect there would be two. In other words, this answer appears to work if I use `myfunction.call()`, but not if I execute `myfunction()`. – user979672 Jan 27 '12 at 02:33
try it outside of jsfiddle - e.g. in the firebug console. – Joe Hanink Jan 27 '12 at 17:52

score 3 · Answer 2 · answered Feb 12 '11 at 09:02

3

you could take a look at http://ajax.dynatrace.com/ajax/en/ - its IE only but pretty darn good, see this article by j. Resig : http://ejohn.org/blog/deep-tracing-of-internet-explorer/ > "..dynaTrace provides some information that I’ve never seen before – in any tool on any browser."

answered Feb 12 '11 at 09:02

zack

3,198
2
35
51

Looks awesome! Didn't realise something like this had been around so long! – Jon Feb 16 '11 at 00:38

score 2 · Answer 3 · answered Mar 26 '13 at 21:30

2

I've found fireflow: https://addons.mozilla.org/en-us/firefox/addon/fireflow/ incredible helpful.

answered Mar 26 '13 at 21:30

Jason

7,612
14
77
127

It doesn't work in 2016! Firebug seems to be merged into Firefox DevTool. I found this hack: https://javascriptweblog.wordpress.com/2010/06/01/a-tracer-utility-in-2kb/ that I am going to try. – P.M Jul 13 '16 at 15:59

score 2 · Answer 4 · answered Feb 11 '11 at 04:38

@Jenko if what you're looking for something similar to an IDE debugger, in that case Internet Explorer 8 and 9 have a built-in Developer Tools (press F12) and Chrome has Developer Tools as well. Both IE and Chrome allow you to set breakpoints in your code and step through it while it's running. Firefox has Firebug, which others have mentioned, and it too allows to set breakpoints and examine the execution of your code. Opera has Dragonfly (built-in) and has the same features as the other browsers.

score 2 · Answer 5 · answered Feb 13 '11 at 19:07

As I was reading the answers and laughing at the duplicate answers of "You can use Firebug!" I realized.... you can use Firebug.

Seriously, it has a "profile" command that does exactly what you are asking for. Safari and Chrome have this feature so you can check in there as well. IE8/9 has a "profiler" tool which is similar (but I don't know if it can be called from JavaScript with console.profile())

This will give you accurate times since any code and logging you add would also afect the actual performance. And because this feature is in the top browsers, you get a reasonable amount of data.

enter image description here

score 0 · Answer 6 · answered Feb 07 '11 at 13:45

0

If you're talking about browser-side javascript dedub you can use Firebug, which is an excellent tool.

http://getfirebug.com/

Here you can find a step-by-step tutorial:

http://www.digitalmediaminute.com/screencast/firebug-js/

answered Feb 07 '11 at 13:45

mamoo

8,156
2
28
38

score 0 · Answer 7 · answered Feb 07 '11 at 13:45

0

Yes. all major browsers have a debugger built-in (IE, Chrome, Safari), or available as a add-on (Firebug for Firefox).

answered Feb 07 '11 at 13:45

RoToRa

37,635
12
69
105

score 0 · Answer 8 · answered Feb 08 '11 at 00:04

0

Firebug is good for this. Or you can use Google Chrome's built-in debugger as well.

answered Feb 08 '11 at 00:04

Tash Pemhiwa

7,590
4
45
49

score 0 · Answer 9 · answered Feb 13 '11 at 07:18

0

for Firefox Firebug for IE deeloper tool for chrome built-in debugger is nice to use

answered Feb 13 '11 at 07:18

Ranga

44
3

score 0 · Answer 10 · answered Feb 16 '11 at 19:01

Arguably the best online Javascript Code Quality Controll is JSLint. It not only checks code for errors, it improves the coding style of programmes entirely<< this is the reason the author has made it in the first place. My 0,02 $

http://www.jslint.com/

Live javascript debugging by recording function calls and parameters

10 Answers10

Linked