How do you debug React Native?

Question

How does one debug their React code with React Native while the app is running in app simulator?

Answer 1

In addition to the other answers. You can debug react-native using the debugger statement

example:

debugger; //breaks execution

Your chrome dev tools must be open for this to work

Answer 2

adb logcat *:S ReactNative:V ReactNativeJS:V

run this in terminal for android log.

Answer 3

Assuming you want to show this menu on Android emulator

• Then, try ⌘+m to pop up this dev settings dialog on Android emulator on a Mac.

• If it doesn't show then go to AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• And then retry ⌘+m.

• If it doesn't show still then go to the running emulator settings and on the Send keyboard shortcuts to combobox/dropdown then select the Emulator controls (default) option.

• And then retry ⌘+m.

• I hope this helps, it worked for me.

Answer 4

For android app .Press Ctrl+M select debug js remotely it will open a new window in chrome with url http://localhost:8081/debugger-ui. You can now debug the app in chrome browser

Answer 5

if you want to debug using android device on Windows just open a command prompt then type ( make sure your adb working properly)

adb shell input keyevent 82

it will prompt a screen like the image

then select

debug JS Remotely

it will automatically open a new window.then open inspect element or press F12 for console.

Answer 6

React Native 0.62 Released - The Official solution is Flipper