Debugger issue in react native?

Question

I am trying to the attached debugger to the React Native app. I am using the React Native tool extension for React Native debugging.

as I am new to React Native I am kind of stuck as I am not able to debug. I am not sure why it's showing 8082 and not 8081. My metro bundler is showing in PORT 8081.

Note: I am using an iOS simulator to test.

Is anything I am doing wrong or missing something?

Please suggest if more information needed.

Dear Sandesh, do you try to change the default PORT? what's your ReactJS, ReactNative, and Debugger version? — AmerllicA, Sep 01 '20 at 06:40

AmerllicA · Answer 1 · 2020-09-01T21:20:40.260

For Fixing this issue let's follow the below steps and run your project by the given commands:

Change the metro default port with adding an environment variable:
```
export RCT_METRO_PORT=9095
```
⚠: if you are on Windows, firstly, please do this method.
Navigate to the ios folder of your project and edit:
```
ios/Pods/Headers/Public/React-Core/React/RCTDefines.h
```
Find all 8081 or 8082 and change them to 9095, always you find them in defining of RCT_METRO_PORT

Do number two exactly for:

ios/Pods/Headers/Private/React-Core/React/RCTDefines.h

Also in the ios folder of your project change this file too:
```
ios/Kelaket.xcodeproj/project.pbxproj
```
Find the two RCT_METRO_PORT:=8081 and change both of them to RCT_METRO_PORT:=9095
Change the default of yargs.option to 9095 in the:
```
node_modules/.bin/metro-inspector-proxy
```

After these changes come back to the root of your project and do these commands:

yarn start --reset-cache
yarn ios

Then you can see everything works with the port number 9095.

NOTE: for working with React Native Debugger just press ⌘+t and change the port to 9095 and then you can connect your app to the React Native Debugger.

score 0 · Answer 2 · answered Sep 02 '20 at 08:39

Assuming that you are using Visual Studio Code, just make sure you have declared the packager port correctly in your launch.json file. Then, restart your packager and try again.

...
"configurations": [
        {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "port": "8081"
        }
    ] 
...

Debugger issue in react native?

2 Answers2