Parashuram’s blog: Debugging create-react-native-app with VSCode

  • VIDEO

    To get started download VSCode and install the React Native tools extension for VSCode.

  • 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

    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 !


@nparashuram: Time Travel Debugging with create-react-native-app and 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.

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

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

Parashuram’s blog: Debugging create-react-native-app with VSCode