Skip to content

Latest commit

 

History

History
30 lines (22 loc) · 1.87 KB

15.md

File metadata and controls

30 lines (22 loc) · 1.87 KB

Lesson 15: Debugging React Native Windows apps

Developer experience is one of the draws of React Native. react-native-windows supports most of the development mode features supported on iOS and Android.

Open the developer options menu

  1. Deploy the app either from Visual Studio 2017 or using the run-windows command.
  2. When the app launches and finishes loading the menu, press the Menu key or Shift+F10.
  3. Experiment with some of the tools, like Inspector.

Attaching to the VS Code debugger

  1. Open Visual Studio Code from the root of your project. Ensure you have the React Native Tools extension installed.
  2. Ensure you have the packager running (or restart it).
  3. In Visual Studio Code, add a React Native debug configuration to your launch.json settings.
  4. Run the Attach to packager debug configuration.
  5. Start your React Native app, ope the developer options menu, and choose Start JS Remote Debugging.
  6. Try setting some break points in your app and reloading the JS bundle (with either the developer options menu or Ctrl+R).

Debugging native code

  1. If you closed the solution after Lesson 13, re-open the solution in Visual Studio 2017.
  2. Double check that you still have a packager running from a previous run-windows call. If not, restart the packager using npm start or react-native start.
  3. When the solution loads in Visual Studio, ensure you have either x86 or x64 selected as the target platform and launch the app (by clicking the start button or pressing F5).
  4. Try setting some breakpoints in the custom native module we created in Lesson 13.

Exit Criteria

  1. Understand how to open the developer options menu on react-native-windows apps
  2. Understand how to debug react-native-windows JavaScript in VS Code
  3. Understand how to use Visual Studio 2017 to debug native code.