Fun with Javascript and function tracing.
1–10 of 11 posts
Re: Fun with Javascript and function tracing.
#2At Google we built a tool for this that presents the results graphically on a timeline: 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.
Re: Fun with Javascript and function tracing.
#3At Google we built a tool for this that presents the results graphically on a timeline: 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.
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.
Re: Fun with Javascript and function tracing.
#4At Google we built a tool for this that presents the results graphically on a timeline: 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.
Wow this looks great. Thanks for sharing I will take a look.
Re: Fun with Javascript and function tracing.
#5I 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?
Re: Fun with Javascript and function tracing.
#6I 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?
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.
Re: Fun with Javascript and function tracing.
#7At Google we built a tool for this that presents the results graphically on a timeline: 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.
Reminds me of the flame charts from the Dev Tools 2013 Revolutions talk.
Re: Fun with Javascript and function tracing.
#8At Google we built a tool for this that presents the results graphically on a timeline: 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.
TraceGL is also pretty interesting: https://news.ycombinator.com/item?id=5595249
It is commercial though.
Re: Fun with Javascript and function tracing.
#9Nice one. Looks very useful, will try it for sure
Re: Fun with Javascript and function tracing.
#10There 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.