Show HN: An experimental data-flow analysis tool for JavaScript | Hacker News Reader

Show HN: An experimental data-flow analysis tool for JavaScript

fromjs.com

95 pointsmostlystatic11 comments

Blog post on how it works: http://www.mattzeunert.com/2018/05/27/dynamic-dataflow-analy...

This is really, really neat. Never would have thought that Babel could be used for instrumentation, though after a bit of digging it looks like https://istanbul.js.org/ uses a similar trick!

Is there a way to integrate this into a local dev environment without needing to run the MITM proxy? (For instance, if you know you're loading everything through a single bundle.) Could be a really popular dev tool if so.

Also, have you considered using IndexedDB to store the logs client-side, further removing the need for a backend? Storage should be practically unlimited if you have free drive space on desktop Chrome.

I've not considered using IndexedDB before! Loading a large app generates several GB of data, and extracting that data from the tab is actually a big performance issue.

Instrumenting a single bundle is possible, but it's common to have some dependency on third-party JS or script tags in the page HTML.

Chrome has an experimental request interception API for extensions that allows rewriting the response. I think that would be ideal UX-wise.

I'm a bit wary though because that's how I started initially and I ran into a bunch of problems. One issue is running out of memory, the Babel compilation can often take several GB of RAM, and the default V8 memory limit in Chrome is too low.

Pretty cool little tool. We have a product that is a combination of ASP.NET Razor views, Backbone, jQuery, and more as a result of several different partial transitions of the codebase. Sometimes it is difficult to figure out which framework is setting a given value in the UI, so I'm going to give this a try and see if it helps out.

Amazing! I would love to see something like this integrated into browser devtools. There should be massive perf benefits if you could work directly with the JS VM, for instance.

This is very cool! What do you believe to be the prime use cases for this kind of tool?

I'm still trying to figure that out :)

Here are some ideas:

• Debugging: figuring out why a variable or object property has an unexpected value

• Finding relevant code, possibly during onboarding of new devs

• Security: see where insecure values end up at runtime

• Telling BE devs what endpoint is used for a specific part of the UI

The architecture could also enable a few other features, like pausing when a particular value is encountered anywhere in the code.

Finding relevant code, possibly during onboarding of new devs

That one is huge for me. So often coming into a new codebase (especially in the case where some of the libraries or underlying frameworks are new to me) I just want to know "How the F was that value populated??"

Kudos, would be super useful in my opinion.

I can already imagine the dev tool improvements that could come from something like this.

Being able to highlight a part of the dom and click through the stack of where it came from would be awesome! And it would work with just about any framework out there!

> new devs

By the time you're no longer a "new dev," you're a "new dev" to the code you wrote when you started the job :) so it's a pretty universal need!

> FromJS shows you were each value in the DOM comes from.

I think it's "...where each value in the DOM..."

Thanks, just fixed it.

Reply on news.ycombinator.com