Chrome debugging doesn't work. Can't open any source files.

[trcoffman]

Bug Description

When using Chrome DevTools to debug a Hermes RN app, you can't open any of the source files to be able to place breakpoints.

Here's a screenshot. that index.bundle thing is the only thing you'll see. try typing in index.js, or other source files, nothing will appear.

• [x] I have run gradle clean and confirmed this bug does not occur with JSC

Hermes version: whatever is bundled with RN 0.70.1 React Native version (if any): 0.70.1 OS version (if any): iOS Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): arm64-v8a

Steps To Reproduce

1. Run your app.
2. Set up chrome devtools to connect to Metro Bundler.
3. Navigate to chrome://inspect .
4. Fire up the Hermes debugger.
5. Go to Sources.
6. Hit the hotkey to open a file (command-P on a mac).
7. Try typing in a source file like index.js
8. Nothing will show up other than this index.bundle URL.

code example:

https://github.com/react-native-community/rn-diff-purge

I'm using v0.70.1 of the RnDiffApp from rn-diff-purge to reproduce.

The Expected Behavior

The expected behavior is that you should be able to open files and set breakpoints. It should behave the exact same as when you use Flipper. This works just fine in Flipper.

[mattbfb]

There have been some updates in standalone Chrome that prevent some source maps from loading in this scenario. We are looking into supporting these changes, but in the meantime, Flipper can provide a stable Dev Tools environment.

[trcoffman]

https://reactnative.dev/docs/hermes

In these docs, it would be very helpful if chrome debugging was mentioned as being broken for the time being, and there should be some mention of flipper here with some links so that users can go download flipper.

[clemente-xyz]

having the same issue. I followed step by step what it is specified on React Native docs for Hermes debugging on Chrome, and can't make Sources code to load. Weirdly, the Console debugging works, but can't make the devtools to load the source code of the app.

Using React Native v0.70.5 and Metro v0.72.3. Running on Simulator, iOS 16.1 and iPhone 14

[skurgansky-sugarcrm]

having the same issue. I followed step by step what it is specified on React Native docs for Hermes debugging on Chrome, and can't make Sources code to load. Weirdly, the Console debugging works.

just set Hermes to false and enjoy easy life :)

[Saeid-Barzegar]

i found a solution that made my day! sharing maybe can help someone like me to don't spend one working day to resolve it :))

NO! need to remove the problem! just let's resolve it!

in chrome or like my case in Brave browser open this address Brave: brave://inspect/#devices Chrome: chrome://inspect/#devices

click on configure button in the image

add your metro bundler address ( in my case i changed the bundler port because of McAfee yours can be localhost:8081)

Congrats! you found your metro bundler with chrome debugger

so far everything already exist in react native website but it didn't work for me and still i didn't have the debugger

after one working day challenge this solution worked for me right click on inspect item on right click menu to open the debugger in same page (brave://inspect/#devices)

the Node Js icon pointed in the above image was my solution. click on it

you will see this this screen opened ( by default console tab is opened)

you can see your added port and address to the browser and can see your console logs here still i have some issue with API calls and will work on that but at least i can continue your project ( if still you cant's see the logs reload your simulator and it will work)

actually the reason is previously when we were debugging in chrome react native was opening the debugger in chrome v8 engine. but the Hermes engine using the installed Node JS engine on your computer for debug and that's the reason it doesn't working on chrome

[filhodoto]

@Saeid-Barzegar solution worked for me. Cheers

[mattbfb]

Just to keep this thread updated: a fix has been submitted (https://github.com/facebook/metro/commit/6690b393cc1812af02f8eb20853504f0a6188a83) that should appear in upcoming versions of React Native.

[mattbfb]

This is available in recent version of React Native. Applications using recent React Native builds (e.g. one created today using npx react-native init) will populate the file list shown in the original issue post.

[Lurtroxx]

@Saeid-Barzegar you are a saint! Thank you.