CODEWITHSUNDEEP
reactjsreact-nativereact-native-debugger
New iOS Dev
New iOS Dev

Reputation: 2057

Debugger issue in react native?

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.

enter image description here

Upvotes: 2

Views: 1038

Answers (2)

Nostromo
Nostromo

Reputation: 1053

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"
        }
    ] 
...

Upvotes: 0

AmerllicA
AmerllicA

Reputation: 32747

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

  1. 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.

  2. 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

  3. Do number two exactly for:

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

  4. 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

  5. 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:

  1. yarn start --reset-cache
  2. 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.

Upvotes: 2

Related Questions