Skip to content

[0.85.3] React Native DevTools not working #56714

Open
Open
[0.85.3] React Native DevTools not working#56714
Labels
DebuggingIssues related to React Native DevTools or legacy JavaScript/Hermes debuggingNeeds: AttentionIssues where the author has responded to feedback.Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.

Description

@rnkdsh
rnkdsh
opened on May 7, 2026

Description

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

Steps to reproduce

  1. Install the application with npm run android
  2. Press j to open the debugger
  3. 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

Image

Activity

  1. rnkdsh
    added
    DebuggingIssues related to React Native DevTools or legacy JavaScript/Hermes debugging
    Needs: Triage 🔍
    on May 7, 2026
  2. react-native-bot
    added
    Needs: Author Feedback
    Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.
    on May 7, 2026

  3. react-native-bot commented on May 7, 2026

    @react-native-bot
    react-native-bot
    on May 7, 2026
    Collaborator

    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:


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

  4. react-native-bot
    removed
    Needs: Triage 🔍
    on May 7, 2026

  5. tastydev commented on May 7, 2026

    @tastydev
    tastydev
    on May 7, 2026

    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.

  6. rnkdsh commented on May 8, 2026

    @rnkdsh
    rnkdsh
    on May 8, 2026
    Author

    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.

  7. github-actions
    added
    Needs: AttentionIssues where the author has responded to feedback.
    and removed
    Needs: Author Feedback
    on May 8, 2026

  8. shivrajbande commented on May 13, 2026

    @shivrajbande
    shivrajbande
    on May 13, 2026

    Dose it happening from recent upgrade to new Architecture?

  9. AndreAparecidoDaSilva commented on May 21, 2026

    @AndreAparecidoDaSilva
    AndreAparecidoDaSilva
    on May 21, 2026

    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.

  10. talhaazhar commented on May 21, 2026

    @talhaazhar
    talhaazhar
    on May 21, 2026
    Contributor

    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

  11. rashid44 commented on Jun 3, 2026

    @rashid44
    rashid44
    on Jun 3, 2026

    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.

  12. rnkdsh commented on Jun 5, 2026

    @rnkdsh
    rnkdsh
    on Jun 5, 2026
    Author

    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.

  13. Olimarrex commented on Jun 8, 2026

    @Olimarrex
    Olimarrex
    on Jun 8, 2026

    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?

  14. soham444101 commented on Jul 4, 2026

    @soham444101
    soham444101
    on Jul 4, 2026

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

    npx react-native start --reset-cache

  15. MohammedShameer1532 commented on Jul 4, 2026

    @MohammedShameer1532
    MohammedShameer1532
    on Jul 4, 2026

    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

    1. Create a new React Native project.
    2. Run the project.
    3. Open React Native DevTools (works correctly).
    4. Install an npm package, for example:
    npm install <any-package>
    1. Restart Metro and run the application again.
    2. 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.)

  16. Yogesh-yo01 commented on Jul 31, 2026

    @Yogesh-yo01
    Yogesh-yo01
    on Jul 31, 2026

    💡 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.

  17. vikaskandari commented on Aug 14, 2026

    @vikaskandari
    vikaskandari
    on Aug 14, 2026

    💡 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

  18. JBWereRuss commented on Aug 20, 2026

    @JBWereRuss
    JBWereRuss
    on Aug 20, 2026

    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?

    Image

  19. nicolaturcoep commented on Oct 2, 2026

    @nicolaturcoep
    nicolaturcoep
    on Oct 2, 2026

    Will this be fixed in future React Native releases?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    DebuggingIssues related to React Native DevTools or legacy JavaScript/Hermes debuggingNeeds: AttentionIssues where the author has responded to feedback.Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions