Flashback JS

Flashback is a JavaScript debugger that records and shows what lines in your code were run recently and with what values for every line of your project without ever setting a breakpoint. It's a debugger, but with a time machine.

Installation

Flashback works via Babel. The following assumes you have Babel set up in your project.

• Install the Flashback in your project:

npm install -S flashbackjs

• Add the following plugin to your .babelrc:

{
  "plugins": [
    "flashbackjs/babel/visitor"
  ]
}

• Finally, install the Flashback VSCode extension and reload VSCode.

Usage

• Run your web app as usual. Flashback will automatically start recording the execution of your code.

When some code runs in your browser (say a click handler on a button), you can see the Flashback for that code in VSCode next to the code itself.

Status

Flashback is still in early development. It currently only works in browser-based apps. Node support is coming soon, which should allow you to add Flashback "intellisense" to your API routes and other server-side code.

Contributing

Flashback is pretty early proof of concept. If you're interested in contributing, please reach out! I'd love to have your help.

Current improvements to be made:

• Add support for Node.js
• Fix TypeScript support, it currently doesn't seem to work
• Fix/Improve the bottom webview panel to have a better UI, maybe even a slider to move back and forth in time.
• Add support for Next.js compiler, this means rewriting babel/visitor.js equivalent for Next.js compiler
• Test with more web frameworks (currently only tested with React and Next.js)

How it works

Warning: Flashback is highly unoptimal piece of junk. Prepare for facepalms.

Flashback works by wrapping every line of your code with an instrumenting function that records the line number and the values of all variables in the scope of that line.

When a line is run, Flashback records the values of all variables at every line of your code and sends it back to VSCode via a websocket. VSCode then uses this data to show you the Flashback for the code you're currently looking at.