waiting for client connection

[god-zhang]

It has always been 'waiting for client connection', Why?

I used Expo to create the project and started normally, but I have been unable to connect.
used Expo go, run to Android phone

Expo version: 49.0

[EmmyAina]

I followed the instructions on connecting to the React Native Debugger app, but Expo keeps opening Chrome dev tools by default

[Anisha12311]

I got the same issuse. when I try to connect the React Native Debugger, it opens a new Devtool by default.

[filipepratalima]

+1 here, tried many combinations and nothing

[ShiyuCheng2018]

same here

[arminhupka]

I have the same issue. Js engine changed to jsc and nothing. In on expo sdk49.

[marlo22]

+1

[gkpo]

Same here. It's very frustrating.

When I do Device -> Shake, it opens the menu:

There's an option called "Open JS debugger". Which opens a chrome devtools instance and not React Native Debugger. There is no more option "Debug JS remotely". All the docs that I find are outdated in this regard.

At the very bottom of that menu there's a "Open React Native dev menu" option.
Then inside this menu there is Open Debugger, and Open React DevTools. None of those options seem to do anything, they both yield an error in the terminal:

info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...
error Browser exited with error:, Error: invalid url, missing http/https protocol

This is probably the most confusing and least clear documentations I've seen in my life.

[AlecR]

I was able to get this working in my project following the approach in this package: https://github.com/gusgard/react-native-devsettings. I didn't want to add a new dependency to my application so I instead added this snippet:

import {DevSettings, NativeModules} from 'react-native';

const addDebugMenuItems = async () => {
  const message = {
    stop: '(*) Stop Debugging',
    debug: '(*) Debug JS Remotely',
  };

  DevSettings.addMenuItem(message.debug, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(true);
  });
  DevSettings.addMenuItem(message.stop, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(false);
  });
};

export const enableDebugging = async () => {
  setTimeout(addDebugMenuItems, 100);
};

Now I'm calling addDebugMenuItems on startup and clicking "Debug JS Remotely" in the dev menu enables me to use react-native-devtools

[Katerlad]

@AlecR did you ever get this working with Expo Go? or only in Dev Build?

I used your code above, and put it in my APP/_layout.tsx file, when using the new expo-router v2 since the project doesn't use a APP.tsx file, it uses a _layout.tsx under an APP directory.

It seems to add a new menu Item in the dev build but not expo go. Was hoping to get something working in expo go, but it seems I may be out of luck.

const addDebugMenuItems = async () => {
  const message = {
    stop: '(*) Stop Debugging',
    debug: '(*) Debug JS Remotely',
  };

  DevSettings.addMenuItem(message.debug, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(true);
  });
  DevSettings.addMenuItem(message.stop, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(false);
  });
};

export const enableDebugging = async () => {
  setTimeout(addDebugMenuItems, 100);
};

export default function Layout() {
  
enableDebugging();

return (
<Example>
</Example>
 )
 }

[Tuliany]

I was able to get this working in my project following the approach in this package: https://github.com/gusgard/react-native-devsettings. I didn't want to add a new dependency to my application so I instead added this snippet:

import {DevSettings, NativeModules} from 'react-native';

const addDebugMenuItems = async () => {
  const message = {
    stop: '(*) Stop Debugging',
    debug: '(*) Debug JS Remotely',
  };

  DevSettings.addMenuItem(message.debug, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(true);
  });
  DevSettings.addMenuItem(message.stop, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(false);
  });
};

export const enableDebugging = async () => {
  setTimeout(addDebugMenuItems, 100);
};

Now I'm calling addDebugMenuItems on startup and clicking "Debug JS Remotely" in the dev menu enables me to use react-native-devtools

Installing the package an importing in App.tsx helped me 👍🏽

[god-zhang]

enableDebugging

Yes, you're right. I tried it that way too, and it works perfectly. However, there's one condition: the project cannot run outside Expo Go; it needs to be run in development builds.

[roshanShendre13]

Hi,

I try to connect my app with RNDebugger. I am getting the following error

[yuxuan-ctrl]

I was able to get this working in my project following the approach in this package: https://github.com/gusgard/react-native-devsettings. I didn't want to add a new dependency to my application so I instead added this snippet:

import {DevSettings, NativeModules} from 'react-native';

const addDebugMenuItems = async () => {
  const message = {
    stop: '(*) Stop Debugging',
    debug: '(*) Debug JS Remotely',
  };

  DevSettings.addMenuItem(message.debug, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(true);
  });
  DevSettings.addMenuItem(message.stop, () => {
    NativeModules.DevSettings.setIsDebuggingRemotely(false);
  });
};

export const enableDebugging = async () => {
  setTimeout(addDebugMenuItems, 100);
};

Now I'm calling addDebugMenuItems on startup and clicking "Debug JS Remotely" in the dev menu enables me to use react-native-devtools

useful