links: React Native MOC

---

Debug React Native apps in VS Code

1. Install VS Code Extension
2. Open Debug Panel in VS Code

You might either see a drop down with debug options are you will be prompted to setup a file called launch.json

Select create a launch.json file and choose an option to let VS Code create the file (for example chrome)

Delete the configuration created by VS Code

Now you can find an option called Add Configuration on the right bottom, press it

You will be seeing some options choose React Native ⇒ Debug Application ⇒ Choose your platform to debug ⇒

Now there are two options

1. Application in Direct mode (with Hermes)
2. Classic (without Hermes)

Choose an option based on your app.

You can see configuration similar to this

{
 
	"name": "Debug Android",
	"request": "launch",
	"type": "reactnative",
	"cwd": "${workspaceFolder}",
	"platform": "android"
},

Final Steps:

Click the play button to start vs code debugger and then in your app open dev tools and select Debug.

Now put a break point at the place you wish to debug

That’s it. 🎉

---

sources:

• React Native VS code Extension