Debugger tools not fully connecting

[jeanmaried]

React Native Debugger app version: 0.12.1 React Native version: 0.64.1 Platform: Windows Is real device of platform: Yes Operating System: Windows

I am working on React Native for Windows. I set up a basic app with RN 0.64 and redux toolkit to set up some basic redux. Here is an example repo: https://github.com/jeanmaried/rn-debugger-test

STEPS TO REPRODUCE

1. npx react-native run-windows
2. Run the app with the react-native-debugger app open so it doesn't open browser debugger
3. Debugger says connected to port 8081
4. React or Redux Devtools don't connect
5. App does not finish loading and stays on "Loading bundle." or "Connecting to Remote Debugger" screen
6. Metro server does not log an error.

I tried on RN 0.63 and RN for Windows 0.63 and it worked. I also tried on Android to make sure it was Windows specific and Android worked with debugger with 0.64, which is why I believe the error is related to either this app or React Native for Windows on 0.64 specifically. I opened an issue on RN for Windows too: https://github.com/microsoft/react-native-windows/issues/8325

[acoates-ms]

This appears to be due to a difference in react-native-debugger's implementation of the RN debugger API and RN core's.

react-native-windows is making a call to flushedQueue before a call to executeApplicationScript. The standard RN debugger sends a reply to this call. But react-native-debugger is not sending a reply to a call to flushedQueue. react-native-windows ends up waiting for a response to this call before it will make the executeApplicationScript request.

I believe this is due to https://github.com/jhen0409/react-native-debugger/blob/639c02c0f3385c83e62b0ca483cb989db0e4b1a4/app/middlewares/debuggerAPI.js#L184 - scriptExecuted check which will queue up the call if executeApplicationScript has not been called yet. Where as the standard http://localhost:8081/debugger-ui/ debugger will reply with a response like this: "{\"replyID\":4,\"result\":\"[[],[],[],0]\",\"error\":\"Failed to call function, __fbBatchedBridge is undefined\"}"

I'll look at fixing react-native-windows to not make this extra flush call, since it doesn't align with android/iOS. But you should be aware of the difference in behavior of react-native-debugger.