VSCode already supports debugging Expo apps and has support to attach to a packager that is already running.
To get started download VSCode and install the React Native tools extension for VSCode. The extension gives you the ability to debug source code right from inside the editor, supports syntax highlighting and completion and has code snippets for popular React constructs.
Time travel debugging
The extension uses Node to debug the Expo app. If we replace Node with node-chakracore, we also get the ability to use time travel debugging. To try out time travel debugging with create-react-native-app and VSCode- Download node-chakra nightly builds - it supports Mac, Windows and Linux :)
- Grab the debugger code and save it as debugger.js - this is the same code that runs when a React Native app is debugged on Chrome
- To start recording a trace
- Create a folder called logs, adjacent to debugger.js
- Run <path-to-node-chakra>/bin/node --record debugger.js
- To replay a debugging session
- Start up VSCode, head to the debug pane and create a new configuration to debug a node project
- Add the additional key value pairs to the configuration (as shown in the video). This basically sets the node executable to be ChakraCore, points it to the location of the logs that are used for time travel, and sets up source maps
- Hit the debug button - you will now see "Reverse Continue" and "Step back" in addition to the usual debug workflow controls
