fix-inspector-react-native-react-devtools.md

SOLUTION: Inspector doesn't work in React Native React DevTools

Follow the steps below if your dev menu "show inspector" option is not working correctly with React DevTools. These steps fixed both the standalone react-devtools and the embedded react-devtools inside react-native-debugger for me.

Step 1: Fix the "Unsupported DevTools Backend Version" error message

First, follow these instructions to ensure your project's react-devtools-core package is compatible with the package used by either your standalone react-devtools or the embedded react-devtools inside react-native-debugger.

If, like me, you still see the "Unsupported DevTools Backend Version" message after following those instructions, proceed to Step 2:

Step 2: Workaround for dev menu bug in react-native

After adding a yarn resolution to fix react-native-debugger as the instructions described, reinstalling, and verifying the intended version of react-devtools-core got installed in yarn.lock, I still saw the message for "Unsupported DevTools Backend Version." 😡 🤬 !!! I noticed the inspector would work sometimes, but break as soon as I opened the dev menu and then I'd see the same "Unsupported DevTools Backend Version" message even though I had a yarn resolution and matching versions. This is an apparent bug where opening the dev menu breaks connection with react-devtools (whether standalone or embedded in react-native-debugger):

• https://stackoverflow.com/questions/61100604/react-native-debugger-disconnecting-and-showing-error-when-in-app-developer-menu
• Bug: [reactdev tools][react native] Bridge was already shutdown. Inspection is broken #30757
• Devtools disconnects and crashes as soon as menu is opened #494

Whatever causes this appears to be fixed as of react-native@0.66.0, but breaks in 0.64.2 (I tested with a cli boilerplate setup and changed the versions to replicate the issue). If you can't upgrade to 0.66.0 yet, then you will have to open the inspector without using the dev menu to avoid breaking the connection. There are two ways to open the inspector without first opening the dev menu:

1. Use cmd + i to toggle the inspector without dev menu open. This is the only way with react-devtools standalone. It's also convenient for alternating between navigating and inspecting elements. Sometimes this shortcut stops working for me. Not sure why yet.
2. If using react-native-debugger, you can right-click inside it and choose Toggle Element Inspector from the context menu:

demo.mov

I opened the dev menu and broke the connection with react-devtools again. What do I do?

Simply reload the JS and it will reset the broken state.

Note on debug mode

If you are running react-devtools standalone, you do not need to be debugging to see the components or use the inspector. react-native-debugger seems to require you to first start debugging for its embedded react-devtools to work.

My Environment

• iOS simulator 14.4 iPhone 12
• react-native-debugger 0.12.1 which uses react-devtools-core 4.14.0
• react-native 0.64.2 (error occurs with dev menu breaking connection), react-native 0.66.0 (error does not occur)

Related Issues

• Bug: [reactdev tools][react native] Bridge was already shutdown. Inspection is broken #30757
• Devtools disconnects and crashes as soon as menu is opened #494

Potentially Related Issues

• Sometimes the cmd + d shortcut stops working and I have to use cmd + ctrl + z or Device -> Shake to open the dev menu:
  • iOS Simulator CMD+R CMD+D Shake doesn't work at all after some time #27384
• With react-native@0.64.2, I am seeing two dev menus at times:
  • Multiple Dev Menu's on Device #21747
  • This commit might have fixed that for 0.66.0