
Show HN: An experimental data-flow analysis tool for JavaScript - mostlystatic
http://www.fromjs.com/
======
btown
Blog post on how it works: [http://www.mattzeunert.com/2018/05/27/dynamic-
dataflow-analy...](http://www.mattzeunert.com/2018/05/27/dynamic-dataflow-
analysis-for-javascript-how-fromjs-2-works.html)

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/](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.

~~~
mostlystatic
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.

------
hyperdeficit
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.

------
namuol
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.

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

~~~
mostlystatic
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.

~~~
hn_throwaway_99
_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.

~~~
Klathmon
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!

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

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

~~~
mostlystatic
Thanks, just fixed it.

