Not able to connect remote debugger in React native in mac for iOS app?

Question

I am trying to debug using chrome. I have added React Native Tool extension in VSCode, but getting error as:

[Error] Error: Unable to find plist file to configure debugging

when I am checking on chrome using http://localhost:8081/debugger-ui/ still not able to connect debugger.

I am new to react native please suggest if need more information for this issue

Answer 1

Citing the first paragraph from the react-native's site, regarding Chrome Debugging

To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.

So technically, in the iOS simulator , you have to cast the following combination ctrl + cmd + z , and tap on the Debug JS Remotely field, which will further open the debugger hosted on the following address http://localhost:8081/debugger-ui

As an workaround, on the same react-native site, there's a page where is explained how to debug the app via a standalone developer tool , which is installed as an npm package .

All you have to do is to install the package through npm or yarn (choose the package manager which you like the most :] )

* the same react-native site recommends to install it globally

npm install -g react-devtools

yarn add global react-devtools

And after installing the package just type in the terminal the following command to open the devtools

react-devtools

Answer 2

您可以在 devtools.dll 的浏览器 url 中使用内部 ip 更改 localhost 值吗？

http://127.0.0.1:8081/debugger-ui/

Answer 3

give a try to complete suit for react native debugging, performance analysis along with latest react-devtools

Flipper

now it is part of react-native-cli but you can configure in your existing react native version by following

Android Setup

iOS Setup