1

To help debugging a huge web application involving a lot of javascript calls, I would like to be able to trace all these JS calls automatically, to generate a kind of stacktrace (as a tree for example) for all calls, through a plug-in for web browser.

Of course all browsers include a great javascript debugger, but its "stacktrace" tab usually only give current stacktrace for an active breakpoint.

My goal is to don't have to put any breakpoint : simply load the page, run actions, and then retrieve the list of method invocations as a tree, and so. Also, I DO NOT want to modify the source itself to include in it some profiling/tracing features.

Firefox is my favorite browser, but Chrome may be suitable too for this purpose.

Previously there were an addon to FF to do almost this, fireflow, but since a few FF releases it's not working anymore and it will be likely not be fixed (because it uses a deprecated lib removed in last FF).

I didn't find any replacement solution, or StackExchange topic about a such solution.

AFract
  • 8,868
  • 6
  • 48
  • 70
  • You probably can use tools like Fiddler for this. – Bas Slagter Dec 15 '14 at 16:19
  • 1
    There are many questions on this topic, like http://stackoverflow.com/questions/5226550/can-i-override-the-javascript-function-object-to-log-all-function-calls but it's generally observed by anybody that there are much too many function calls... – Denys Séguret Dec 15 '14 at 16:19
  • 1
    Why is this voted to close as "not being about programming" ? It's probably a duplicate, probably a wrong idea, but it's definitely about programming... – Denys Séguret Dec 15 '14 at 16:20
  • @dystroy > if we only take in account "some user scripts" functions and stacks (and therefore ignore all jQuery inner calls for example), it still could be really relevant and helpful. And thanks for the support ! – AFract Dec 15 '14 at 16:25
  • @Baszz > can you elaborate please ? I know fiddler as a really nice web proxy/sniffer but not for my JS debugging purpose. Do you think to a specific feature or addon ? Thanks – AFract Dec 15 '14 at 16:28
  • Adding bounty doesn't mean your question can be off-topic to the site. – Etheryte Dec 19 '14 at 01:30

2 Answers2

3

You could use flame charts of the Chrome Developer Tools:

http://addyosmani.com/blog/devtools-flame-charts/

Jos de Jong
  • 6,602
  • 3
  • 38
  • 58
  • Flame chart is nice. But it lacks a bit of filtering (on method names, js file names, etc) and I don't find its "tree" very clean and powerful. But it remains an interesting solution, thank you. – AFract Dec 15 '14 at 16:36
0

You might be able to implement some sort of debug output using ES6 proxies, see: http://www.2ality.com/2014/12/es6-proxies.html .. around section "2.4 Forwarding Operations".

Eric Blade
  • 161
  • 7