Debugging create-react-native-app with VSCode

Expo and Facebook recently released a command line tool called create-react-native-app that makes getting started with React Native easy. With this tool, you can start developing mobile applications for iOS and Android without having to install the SDKs for each of the platforms. This is very similar to the Phonegap Developer App or Ionic View for Cordova apps and works by uploading only the JavaScript part of the application to the player app. Consequently, you can develop and debug iOS apps from a Windows machine without even needing to connect the phone via a USB.
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

1. Download node-chakra nightly builds - it supports Mac, Windows and Linux :)
2. 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
3. To start recording a trace
1. Create a folder called logs, adjacent to debugger.js
2. Run <path-to-node-chakra>/bin/node --record debugger.js
4. To replay a debugging session 
1. Start up VSCode, head to the debug pane and create a new configuration to debug a node project
2. 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
3. Hit the debug button - you will now see "Reverse Continue" and "Step back" in addition to the usual debug workflow controls

The time travel debugging part is still experimental, but if it sounds fun, let me know, and I would love to make it a part of the extension.Thanks to the amazing folks on the Chakra team for making this possible !