7 ms·

Fun with Javascript and function tracing.

52 points by ebobby 13y ago

modeless 13y ago
At Google we built a tool for this that presents the results graphically on a timeline: http://google.github.io/tracing-framework/ http://google.github.io/tracing-framework/ It's been invaluable for us on Maps to be able to graphically trace the execution of our code.
- ebobby 13y ago
  You guys definitely have more time for that than I do :) When I started doing this I had a lot of ideas, even sample profiling, etc, etc. But realized that in order to make it actually useful and being able to trace everything without slowing the crap down of everything I would had to do some sort of plugin or module, ala Firebug. Not a weekend project anymore. But apparently you guys already did it! very cool. I'll check it out.
- elido 13y ago
  Wow this looks great. Thanks for sharing I will take a look.
- bsimpson 13y ago
  Reminds me of the flame charts from the Dev Tools 2013 Revolutions talk.
- DanielRibeiro 13y ago
  TraceGL is also pretty interesting: https://news.ycombinator.com/item?id=5595249 https://news.ycombinator.com/item?id=5595249 It is commercial though.
Dru89 13y ago
I love this. Will probably add a bookmarklet or something to load it and use it when debugging. My only question is how it works with prototyped or nested functions, such as the `hide` method that you mentioned. Would you just call Tracing.trace('$.fn.hide', 'Object.static_method', 'Object.prototype.object_method') for example to get access to those particular methods?
- ebobby 13y ago
  Yes, exactly. So far it can only access functions that it can traverse directly by name when passed the name as a string as you suggested. Local functions as in nested inside another function, or directly assigned to a local variable, or passed as a function argument the lib cannot hook into because there is no way I can address them since I am not in your lexical context and if you pass them to the library you pass only the reference to the function, not a reference to the reference. In that case I guess it may be possible for the library to hook your code into them only if you pass them to the library and the library returns a new function for you but that is a little too cumbersome.
ezraroi 13y ago
Nice one. Looks very useful, will try it for sure
mAritz 13y ago
There is also the nifty "Break on ... Attributes modification" in the web inspector. Just go to the element in the "Elements" tab, right-click, "Break on ..." and choose what kind of breakpoint you want. I just tested it with jQuery.hide() and it works wonderfully.
- nilliams 13y ago
  Thanks for this, did not know that could be done.

52 points by ebobby 13y ago

At Google we built a tool for this that presents the results graphically on a timeline: http://google.github.io/tracing-framework/ http://google.github.io/tracing-framework/ It's been invaluable for us on Maps to be able to graphically trace the execution of our code.

ebobby 13y ago
You guys definitely have more time for that than I do :) When I started doing this I had a lot of ideas, even sample profiling, etc, etc. But realized that in order to make it actually useful and being able to trace everything without slowing the crap down of everything I would had to do some sort of plugin or module, ala Firebug. Not a weekend project anymore. But apparently you guys already did it! very cool. I'll check it out.
elido 13y ago
Wow this looks great. Thanks for sharing I will take a look.
bsimpson 13y ago
Reminds me of the flame charts from the Dev Tools 2013 Revolutions talk.
DanielRibeiro 13y ago
TraceGL is also pretty interesting: https://news.ycombinator.com/item?id=5595249 https://news.ycombinator.com/item?id=5595249 It is commercial though.

Dru89 13y ago

I love this. Will probably add a bookmarklet or something to load it and use it when debugging. My only question is how it works with prototyped or nested functions, such as the `hide` method that you mentioned. Would you just call Tracing.trace('$.fn.hide', 'Object.static_method', 'Object.prototype.object_method') for example to get access to those particular methods?

ebobby 13y ago
Yes, exactly. So far it can only access functions that it can traverse directly by name when passed the name as a string as you suggested. Local functions as in nested inside another function, or directly assigned to a local variable, or passed as a function argument the lib cannot hook into because there is no way I can address them since I am not in your lexical context and if you pass them to the library you pass only the reference to the function, not a reference to the reference. In that case I guess it may be possible for the library to hook your code into them only if you pass them to the library and the library returns a new function for you but that is a little too cumbersome.

ezraroi 13y ago

Nice one. Looks very useful, will try it for sure

mAritz 13y ago

There is also the nifty "Break on ... Attributes modification" in the web inspector. Just go to the element in the "Elements" tab, right-click, "Break on ..." and choose what kind of breakpoint you want. I just tested it with jQuery.hide() and it works wonderfully.

nilliams 13y ago
Thanks for this, did not know that could be done.