[0.85.3] React Native DevTools not working

Description

React Native DevTools is not working after updating the react-native version to 0.85.3

Steps to reproduce

Install the application with npm run android
Press j to open the debugger
The debugger shows empty screen

Example: https://github.com/rnkdsh/react-navigation-example

React Native Version

0.85.3

Output of `npx @react-native-community/cli info`

System:
  OS: Windows 11 10.0.26200
  CPU: (28) x64 Intel(R) Core(TM) i7-14700K
  Memory: 3.67 GB / 31.69 GB
Binaries:
  Node:
    version: 26.0.0
    path: C:\Users\ronak\AppData\Local\fnm_multishells\32268_1778138217881\node.EXE
  Yarn: Not Found
  npm:
    version: 11.12.1
    path: C:\Users\ronak\AppData\Local\fnm_multishells\32268_1778138217881\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "25"
      - "34"
      - "35"
      - "36"
      - "36"
      - "37"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-25 | Google Play Intel x86 Atom
      - android-28 | Google Play Intel x86 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google Play Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36 | Google Play Intel x86_64 Atom
      - android-37.0 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-253.32098.37.2534.15336583
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.11
    path: C:\Program Files\Microsoft\jdk-17.0.11.9-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.3
    wanted: 20.1.3
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.85.3
    wanted: 0.85.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Screenshots and Videos

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
If your bug is UI related: a Snack
If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

Did you try focusing the devtools window and using cmd + r (reload shortcut for macos, on windows use the correct reload shortcut)? Does it then load correctly for you?

I experience that for my apps when i am logging extensively on startup in RN 0.83, aswell. cmd + r resolves it.

Did you try focusing the devtools window and using cmd + r (reload shortcut for macos, on windows use the correct reload shortcut)? Does it then load correctly for you?

I experience that for my apps when i am logging extensively on startup in RN 0.83, aswell. cmd + r resolves it.

Yes, I tried it, but it didn't work. However, it is working fine if I run react-native start --reset-cache.
It doesn't work when I run the react-native run-android command, and the metro server starts automatically in a new terminal. In that terminal, it's not working, so I have to close that terminal and run react-native start --reset-cache to make it work.

Dose it happening from recent upgrade to new Architecture?

I’m experiencing the same issue on Windows after upgrading React Native.

Environment:

Windows 11
Hermes enabled
React Native 0.85.1 and 0.85.3

Behavior:

Pressing j opens the React Native DevTools window
The window stays completely white/blank
Metro continues running normally
App itself runs fine

Important detail:

The problem does NOT happen on React Native 0.84.1 in the exact same environment
I reproduced this in multiple projects after upgrading to 0.85.x

This strongly suggests a regression in the new DevTools/debugger shell introduced in 0.85.x on Windows.

I also noticed Metro logs:

[debugger-shell stdout]

right before the blank window appears.

I tested:

--reset-cache
clean installs
deleting node_modules
different projects
different emulators

No change.

experiencing the same issue. Here is a workaround in the meantime that is working for me:

#54889 (comment)

TLDR:

edit the @node_modules/@react-native/dev-middleware/dist/createDevMiddleware.js file:

    if (
      req.method === "POST" ||
-      (experiments.enableOpenDebuggerRedirect && req.method === "GET")
+.     req.method === "GET"
    ) {

Start Metro normally (npm run bundler).
With the app connected, do not press j — that still launches the Electron shell.
Instead, open a Chromium-based browser (Chrome / Edge / Arc / Brave) and go to:

http://localhost:8081/open-debugger

This will let you use the browser-based DevTools

I also faced the same problem and got the solution after installing watchman.

winget install Facebook.Watchman

Clear out node_modules and locks
rm -rf node_modules package-lock.json yarn.lock

Hard purge cached Android native trees
rm -rf android/.gradle android/app/build android/build

Re-install dependencies
npm install or yarn install

Restart Metro with a clean cache
npx react-native start --reset-cache or yarn start --reset-cache

In another terminal run
npx react-native run-android or yarn android

Now after completing the build process press j in the first terminal to open devtools.

I also faced the same problem and got the solution after installing watchman.

winget install Facebook.Watchman

Clear out node_modules and locks
rm -rf node_modules package-lock.json yarn.lock

Hard purge cached Android native trees
rm -rf android/.gradle android/app/build android/build

Re-install dependencies
npm install or yarn install

Restart Metro with a clean cache
npx react-native start --reset-cache or yarn start --reset-cache

In another terminal run
npx react-native run-android or yarn android

Now after completing the build process press j in the first terminal to open devtools.

Yes that works. But it doesn't work on the terminal which automatically opens when we run npx react-native run-android.

I also faced the same problem and got the solution after installing watchman.

winget install Facebook.Watchman

Clear out node_modules and locks rm -rf node_modules package-lock.json yarn.lock

Hard purge cached Android native trees rm -rf android/.gradle android/app/build android/build

Re-install dependencies npm install or yarn install

Restart Metro with a clean cache npx react-native start --reset-cache or yarn start --reset-cache

In another terminal run npx react-native run-android or yarn android

Now after completing the build process press j in the first terminal to open devtools.

How did you figure out this was a solution? Installing watchman seems to have resolved the issue for me too. I'm having a lot of trouble on how to even start debugging issues like this as all I really get is a blank screen and I can't even figure out where one might start looking for problems. And they seem to be super common for react & react-native especially
Was it literally just trial and error?

Corrupted DevTools cache issue .
Close the metro bundler and run following command.This work for me.

npx react-native start --reset-cache

Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

React Native Version

0.86.0

Description

I created a new React Native project.

If I run the project immediately after creating it, React Native DevTools opens and works correctly.

However, after installing any npm package (even before using or importing it), React Native DevTools opens as a completely blank white/black screen.

The application itself may still run, but the DevTools UI becomes unusable.

Steps to Reproduce

Create a new React Native project.
Run the project.
Open React Native DevTools (works correctly).
Install an npm package, for example:

npm install <any-package>

Restart Metro and run the application again.
Open React Native DevTools.

Expected Behavior

React Native DevTools should open normally after installing additional npm packages.

Actual Behavior

React Native DevTools opens but displays only a blank white or black window.

Environment

OS: Windows 11
Node.js: (fill in)
npm: (fill in)
React Native: 0.86.0
Android Emulator: (fill in)
Hermes: Enabled
New Architecture: Enabled (default)

Additional Information

This happens consistently after installing npm packages.
The issue occurs even if the package is not imported into the project.
Restarting Metro does not resolve the problem.

Reproduction Repository

(Attach a minimal reproduction repository if possible.)

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

If you get a blank white screen or missing logs when opening React Native DevTools, the WebSocket connection between Metro and your running app has likely stalled.

You can force them to re-handshake and restore logs by restarting the bundler mid-session:

▶️ Step 1: Run your project normally

Start your Metro bundler and launch the application on your device or emulator.
Keep the app open and visible on your screen.

🛑 Step 2: Kill the Metro process only

Go to the terminal where Metro is running.
Press Ctrl + C to kill the Metro process.
⚠️ Crucial: Do not close, exit, or minimize the app on your mobile device/emulator. Leave it running.

🔄 Step 3: Restart Metro and re-sync

Start the Metro bundler again by running:
```
npx react-native start
```
Once Metro finishes starting up, press r in your terminal to trigger a reload command.

🛠️ Step 4: Open DevTools

The pre-opened app on your device will automatically reconnect to the fresh Metro instance.
Press j in your terminal to open the React Native DevTools. Your logs and debugging session will now load correctly.

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

If you get a blank white screen or missing logs when opening React Native DevTools, the WebSocket connection between Metro and your running app has likely stalled.

You can force them to re-handshake and restore logs by restarting the bundler mid-session:

▶️ Step 1: Run your project normally

Start your Metro bundler and launch the application on your device or emulator.

Keep the app open and visible on your screen.

🛑 Step 2: Kill the Metro process only

Go to the terminal where Metro is running.

Press Ctrl + C to kill the Metro process.

⚠️ Crucial: Do not close, exit, or minimize the app on your mobile device/emulator. Leave it running.

🔄 Step 3: Restart Metro and re-sync

Start the Metro bundler again by running:
npx react-native start

Once Metro finishes starting up, press r in your terminal to trigger a reload command.

🛠️ Step 4: Open DevTools

The pre-opened app on your device will automatically reconnect to the fresh Metro instance.

Press j in your terminal to open the React Native DevTools. Your logs and debugging session will now load correctly.

Thanks , worked for me, just tested it

I noticed that fetching en-US.json times out and throws an error before the script has loaded. I don't understand why the debugger scripts are so slow to load?

Will this be fixed in future React Native releases?

Navigation Menu

Repository navigation

[0.85.3] React Native DevTools not working #56714

Description

Steps to reproduce

React Native Version

Output of `npx @react-native-community/cli info`

Screenshots and Videos

Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

React Native Version

Description

Steps to Reproduce

Expected Behavior

Actual Behavior

Environment

Additional Information

Reproduction Repository

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

▶️ Step 1: Run your project normally

🛑 Step 2: Kill the Metro process only

🔄 Step 3: Restart Metro and re-sync

🛠️ Step 4: Open DevTools

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

▶️ Step 1: Run your project normally

🛑 Step 2: Kill the Metro process only

🔄 Step 3: Restart Metro and re-sync

🛠️ Step 4: Open DevTools

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[0.85.3] React Native DevTools not working #56714

Description

Description

Steps to reproduce

React Native Version

Output of npx @react-native-community/cli info

Screenshots and Videos

Activity

react-native-bot commented on May 7, 2026

tastydev commented on May 7, 2026

rnkdsh commented on May 8, 2026

shivrajbande commented on May 13, 2026

AndreAparecidoDaSilva commented on May 21, 2026

talhaazhar commented on May 21, 2026

rashid44 commented on Jun 3, 2026

rnkdsh commented on Jun 5, 2026

Olimarrex commented on Jun 8, 2026

soham444101 commented on Jul 4, 2026

MohammedShameer1532 commented on Jul 4, 2026

Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

React Native Version

Description

Steps to Reproduce

Expected Behavior

Actual Behavior

Environment

Additional Information

Reproduction Repository

Yogesh-yo01 commented on Jul 31, 2026

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

▶️ Step 1: Run your project normally

🛑 Step 2: Kill the Metro process only

🔄 Step 3: Restart Metro and re-sync

🛠️ Step 4: Open DevTools

vikaskandari commented on Aug 14, 2026

💡 Quick Fix: Re-sync the Metro Connection (Without Rebuilding)

▶️ Step 1: Run your project normally

🛑 Step 2: Kill the Metro process only

🔄 Step 3: Restart Metro and re-sync

🛠️ Step 4: Open DevTools

JBWereRuss commented on Aug 20, 2026

nicolaturcoep commented on Oct 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`