How to debug react native apps in visual studio code?

by

If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:

  1. Install React Native Tools Extension (provided by Microsoft) to VS Code.

enter image description here

This is a nice add on to VS Code’s capabilities for React Native.

  1. Then go to Debug option from left menu and click on Add Configuration.

enter image description here

If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.

  1. Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.

enter image description here

You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.

  1. Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.

enter image description here

  1. Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.

enter image description here

Now your breakpoints should be working. Similarly if your app wasn’t working already then you can go for Debug Android or Debug iOS accordingly.

More Related Contents:

  1. Is there a “Best Practices” on designing an application written both in React and React-Native?
  2. 404 Not Found when trying to install ESLint 8.4.4 with create-react-app
  3. Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release
  4. Hide keyboard in react-native
  5. Why, exactly, do we need React.forwardRef?
  6. Is using async componentDidMount() good?
  7. How to re-render flatlist?
  8. How to reset TabNavigator when user logs out (from other screen)
  9. What will happen if I use setState() function in constructor of a Class in ReactJS or React Native?
  10. How to create helper file full of functions in react native?
  11. Axios get in url works but with second parameter as object it doesn’t
  12. How to resolve the error on ‘react-native start’
  13. React Native project, index.ios.js or index.android.js not generated
  14. What does the colon mean in Javascript after function?
  15. What is the difference between using constructor vs getInitialState in React / React Native?
  16. Axios: chaining multiple API requests
  17. Question mark before dot in javascript / react [duplicate]
  18. Found 4 vulnerabilities on npm install
  19. Invariant Violation: The navigation prop is missing for this navigator
  20. VirtualizedList: You have a large list that is slow to update
  21. How to add sourcemap in React Native for Production?
  22. how to change jest mock function return value in each test?
  23. Disable back button in react navigation
  24. how to async/await redux-thunk actions?
  25. PhaseScriptExecution [CP-User] error in React Native
  26. this.setState is undefined
  27. How to test Async Storage with Jest?
  28. Failed to run jetifier React Native
  29. react native post form data with object and file in it using axios
  30. How to update array state in react native?

Leave a Comment