Debug React Native using vscode debugger

Question

I need to debug my react-native app on VsCode and I'm new to react native development.. :) I search and follow different methods but no luck.. :( First I follow this methods https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 and follow this methord https://www.youtube.com/watch?v=0_MnXPD55-E also. but no luck.

Let me explain my debug procedure.

1. First add react native configurations to lunch.json.

2. Add packager.info.json to .expo directory like this

   { "expoServerPort": 19001, "packagerPort": 19002, "packagerPid": 65931 }

3. Then add settings.json to .vscode directory like this

   {
       "react-native": {
           "packager": {
               "port" : 19002
           }
       }
   }
   

4. Then run Attach to packager on vscode debug options and enable

Remote JS Debugging

on react native app running on my real android device. but vscode debugging point does not trigger.

After I tried

Debug Android

option vscode debugger. then http://localhost:8081/debugger-ui/ window is pop up. but vscode debugger point dose not hit.

Can anyone know how to setup react native app debugging with vscode properly please give me directions to do that... :) :) Thank you..

Answer 1

Use attach to packager config and close that localhost:8081/debugger-ui tab because if it remains open then vscode will not be able to connect to debugger. Now try again, click on green play button in vscode debugger and reload the app.

We also need react native tools extension otherwise you will get error : The configured debug type "reactnative" is not supported. Here is my launch.json that i am using currently in case you need it :

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Debug Android", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "android", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug iOS", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "ios", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Attach to packager", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "attach", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Chrome Attach to packager", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug in Exponent", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "exponent", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" } ] }

Answer 2

For people still having problems making it run.

What fixed it for me was:

1. Yarn start
2. Close all expo windows in your browser.
3. Start the app on your phone.
4. Start the app on your phone and shake your it until you get into debugger menu and Disable Debugging.
5. Go into ./expo/packager-info.json. Copy the packager port.
6. Paste into the file you created from the abovementioned tutorial on youtube ./vscode/settings.json
7. Press F5 in VSCode
8. Shake your phone to enable debugging.

Answer 3

You can use React Native Tools extension (provided by Microsoft) on VS Code to enable debugging (just like any other IDE, not Chrome) for React Native apps.

You can read all instructions in detail in my another answer.