react-native-debugger: Devtools disconnects and crashes as soon as menu is opened

Per title, if I am debugging with react-native-debugger and press ctrl+m to open the dev menu in the Android emulator react-native-debugger instantly loses connection. This makes it impossible to use the inspector to select elements.

C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Only one connection allowed at a time. Closing the previous connection
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Connected
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Connection to RN closed
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Error calling listener 
{event: "operations", payload: Array(6546)}
C:\Users\imagi\AppDa…st\standalone.js:48 Uncaught Error: Cannot add node 1 because a node with that id is already in the Store.
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at t.value (C:\Users\imagi\AppDa…st\standalone.js:48)
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at Array.forEach (<anonymous>)
    at t.e.onmessage (C:\Users\imagi\AppDa…st\standalone.js:48)
    at t.n (C:\Users\imagi\AppDa…st\standalone.js:40)
    at t.emit (events.js:210)
    at t.K (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.emit (events.js:210)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at doWrite (_stream_writable.js:431)
    at writeOrBuffer (_stream_writable.js:415)

React Native Debugger app version: 0.11.0 React Native version: 0.62.1 Platform: Andrew Is real device of platform: No Operating System: Windows 10

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 28
  • Comments: 18 (1 by maintainers)

Most upvoted comments

Gettting same errors from a brand new react-native init project.

React DevTools] Error calling listener {event: "operations", payload: Array(1881)}

It breaks the inspector. Any fix for this?

RN 0.63.3 RND 0.11.5

i got two error when i am using react native 0.62 and using react native debugger (V. 0.11.3),

  1. Unable to find module for EventDispatcher Screen Shot 2020-07-06 at 8 19 20 PM

  2. Unable to find module for UIManager Screen Shot 2020-07-06 at 8 18 56 PM

  • it happen when try to click -> Cmd+D ( ⌘D ) , refresh in iOS emulator

Any Luck Guys!!! I am not able to use the toll to it full potential … the react-native menu is causing the developer tools to get disconnected so i am not able to do layout debugging.

here the the error [React DevTools] Error calling listener in file /Applications/React Native Debugger 2.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js at line 48

“{“event”:“operations”,“payload”:[1,1,211,16,67,111,110,116,101,120,116,46,80,114,111,118,105,100,101,114,12,65,112,112,67,111,110,116,97,105,110,101,114,4,86,105,101,119,1,49,16,87,114,97,112,112,101,100,67,111,109,112,111,110,101,110,116,8,72,111,109,101,80,97,103,101,9,76,105,103,104,116,84,101,120,116,4,84,101,120,116,13,84,111,117,99,104,97,98,108,101,84,101,120,116,16,67,111,110,116,101,120,116,46,67,111,110,115,117,109,101,114,16,77,101,100,105,117,109,84,101,120,116,78,117,109,98,101,114,11,82,101,103,117,108,97,114,84,101,120,116,10,77,101,100,105,117,109,84,101,120,116,8,66,111,108,100,84,101,120,116,23,76,111,103,66,111,120,83,116,97,116,101,83,117,98,115,99,114,105,112,116,105,111,110,28,95,76,111,103,66,111,120,78,111,116,105,102,105,99,97,116,105,111,110,67,111,110,116,97,105,110,101,114,1,1,11,1,1,1,2,2,1,0,1,0,1,3,1,2,0,2,0,1,4,2,3,3,1,0,1,5,6,4,3,3,0,1,6,2,5,5,1,0,1,7,6,6,3,3,4,1,8,2,7,7,1,0,1,9,1,8,0,5,0,1,10,1,9,9,6,0,1,11,6,10,10,3,0,1,12,2,11,11,1,0,1,13,1,12,10,7,0,1,14,6,13,13,8,0,1,15,1,14,14,9,0,1,16,2,15,15,10,0,1,17,2,16,16,1,0,1,18,1,12,10,11,0,1,19,6,18,18,8,0,1,20,1,19,19,9,0,1,21,2,20,20,10,0,1,22,2,21,21,1,0,1,23,1,12,10,12,0,1,24,6,23,23,8,0,1,25,1,24,24,9,0,1,26,2,25,25,10,0,1,27,2,26,26,1,0,1,28,1,12,10,13,0,1,29,6,28,28,8,0,1,30,1,29,29,9,0,1,31,2,30,30,10,0,1,32,2,31,31,1,0,1,33,1,12,10,14,0,1,34,6,33,33,8,0,1,35,1,34,34,9,0,1,36,2,35,35,10,0,1,37,2,36,36,1,0,1,38,1,6,3,15,0,1,39,5,38,38,16,0]}”

I’m checking it out and around I could investigate so far it does sound to be a problem in react-native actually and how the developer menu has been rendering in the native layer UI which is no more compatible with react-devtools since the latest version, but I’m still wondering over this problem, so I’m sure yet but I’m trying to investigate better and deeper over that to understand what exactly been changed since then to make it stop working.

This error appears to go away in react-native@0.66.0, but I experienced it on 0.64.2. The workaround I found was to open inspector without using the dev menu. Two ways:

  1. cmd + i
  2. Right-click inside react-native-debugger and select “Toggle Element Inspector”

enter image description here

If you do open dev menu and break connection again, simply reload to reset the state.

You might also need to confirm your app’s react-devtools-core version from your node_modules or lock files match the version embedded inside react-native-debugger. I documented all this here:

https://gist.github.com/sschottler/7771dc034d38b89d9d587dc5d358c386

This issue is still happening for me, and keeps me from using this tool.

Hmm, now i moving away from react-native debugger since it takes time to reload and getting error, and back to the first phone state again, and again, and restart again until it got fixed. Now, i use React-native Flipper. If you guys have project with React Native version 0.62 and higher, you can use this tool. It is easy to use and faster. It does not need you to turn on debugger on emulator, since this flipper already do debug for you. https://fbflipper.com/docs/features/react-native/