5 ms·
Show HN: Instrumenting and visualizing JavaScript with d3.js
- Swizec 14y agoThis looks really cool! Not sure what I'd use it for, but it looks awesome. Have any use cases in mind?
- philip_roberts 14y agoNot sure exactly! It just seemed like a fun thing to try. I guess I am just interested in how to make code more visual. I haven't tried it on a "real" code base yet but I will.
- crucialfelix 14y agoIt would be great to see a timeline, where each method invocation leaves a colored point behind it. So there would be colored trails as time progresses. Then it would be useful to spot methods that are called too often. Or to quickly see the call stack. ESP if you could zoom in and examine the recorded history. That would be so much better than stepping through a debugger. Also if it was injectable via a bookmarklet into a running backbone application. That would make it a great debugging tool. Bonus points : click on a method to see the source code
- jmitcheson 14y agoHey there, I'm the developer of a browser based IDE called pixelJET. I was researching visual JavaScript debugging concepts to integrate into pixelJET when your post came up on HN. It's not really a real world applicatoin yet, but if it helps, your post inspired me gave me some ideas for integration into the product. If I publish anything I'll be sure to give you a shout out :) A couple of thoughts for the demo, it would be cool to see the actual JavaScript source code too, so you could get a feel for what the visualisation is showing you. Also, noting which functions were event handlers would be useful, although a bit tricky.
- philip_roberts 14y agoThis is an initial concept/prototype I've been working on today. Pretty neat I think, but not exactly sure of the use case yet beyond making code more visual. All thoughts on that front gladly received!
- mnutt 14y agoIt might be interesting to be able to slow down the visualization. Right now it all happens instantly, whereas you might be able to see the flow from one method to the next.
- philip_roberts 14y agoThat's a good idea, I will give it a try. Could get awkward with the async nature of JS but I will see what I can come up with.
- philip_roberts 14y agoI think a timeline view probably makes more sense ultimately, but I have just modified the demo so that the events happen sequentially, and you can see a trail of events via expanding bubbles from the nodes.
- gawker 14y agoThis is really cool for sure. I can see how it's useful for teaching JavaScript concepts or doing analysis on code. Good job!
- camus 14y agoI would like to be able to click and go into the prototype definition of the object it is displaying , would be a great thing. And also be able to use that live while an application is running , so i can see the object graph, when instance are created ,etc ... anyway that idea is just awesome !
- philip_roberts 14y agoI have made a start on graphing the instantiated objects, but my brain started to hurt :)
- irickt 14y agoRecent similar project https://github.com/hughsk/colony https://github.com/hughsk/colony Posted here but with no comments http://news.ycombinator.com/item?id=4676314 http://news.ycombinator.com/item?id=4676314
- troels 14y agoIsn't that static analysis though? That would make it a bit different then.
- swax 14y agoI have a visualization tool for c# - https://www.codeperspective.com https://www.codeperspective.com . I found that left to right rank graphs work really well when showing order of execution as most programs have very little high level recursion.
- philip_roberts 14y agoThat looks pretty amazing!
- gojomo 14y agoVery cool. While I love the look of force-directed-graphs, they wind up representing lots of arbitrary/random values, in all the degrees of freedom of the exact location/angles/proximities they settle into. I would suggest using a more traditional nested-outline view, either overall or within certain subgraphs. Then, the above/below axis could mean something consistent -- like ordering in source code -- and the left/right something else -- like nesting/composition. And there might be more room for projecting persistent time information -- like a piano roll -- off in a particular direction. Still very pretty, interesting, and promising!
- philip_roberts 14y agoI think I agree! :) and thanks.
- stephth 14y agoWow. Kindly+thoughtfully toned, pertinent and constructive criticism that is rewarding and encouraging. And at the top. I wish this wasn't as refreshing in HN as it is, but it is damn refreshing.
- ville 14y agoThis would cool as a bookmarklet that can launch the graph in a modal window when viewing any JS app.
- dmvaldman 14y agoThis is something I've been thinking about myself. Sometimes when writing large Backbone apps you may find yourself binding the same event twice to a model, or creating memory leaks by not deleting objects efficiently. It would be great if this tool could pick up on code mistakes like that. Personally I find the force-directed graph animations distracting. I would render the graph statically and have better animations for the propagation of information in your code.
- alxndr 14y agoI have the same experience with Backbone apps... Even something that graphed model/collection/view connections would probably be super useful.
- VeejayRampay 14y agoThis is pretty awesome, great job.