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.
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??"
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!
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.