React Native Hermes debugging not working (empty sources tab)

Question

I've enabled Hermes for my RN (0.61.4) app and followed RN docs instructions to enable Hermes and debug using Chrome dev tools (https://reactnative.dev/docs/hermes#debugging-hermes-using-google-chromes-devtools). I open the chrome://inspect and I'm able to see the Hermes app and open the Chrome dev tools for the app but the sources tab is empty so I can't really debug anything. Any idea?

Answer 1

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

look at this item in brave://inspect/#devices

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