2

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?

Yosef
  • 360
  • 5
  • 16
  • Can you search your file by name using the "Open File" command? (Cmd+P on macOS) – that other guy Apr 28 '20 at 19:49
  • Now it's completely stuck when I try to open Chrome dev tools. I was trying it to see if debugging Hermes is any better than debugging using the standard debugging with Chrome. Is it? I don't want to put too much effort into investigating Hermes debugging unless it's better. – Yosef Apr 29 '20 at 06:53
  • If Chrome works, then it's likely more polished. If Chrome doesn't work as expected (because of VM incompatibilities) or at all (with turbo modules), then Hermes debugging is an option. – that other guy Apr 29 '20 at 07:49
  • I think that RN team may have ditched Chrome Hermes debugging for Flipper, although I'm not sure. Flipper is really good though, if you don't need step debugging. – ivanmoskalev Jul 31 '20 at 12:06

2 Answers2

0

it seems like a known issue so Try To Use Flipper https://fbflipper.com/docs/features/react-native/

mohamed fouad
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 06 '22 at 13:32
0

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

enter image description here

click on configure button in the image

![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

image

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

enter image description here

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

enter image description here

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

Saeid Barzegar
  • 171
  • 9