How do you debug React Native?

Solution 1:

Cmd+D from within the Simulator. It'll popup Chrome and from there you can use the Developer Tools.

Edit:

This is now linked in the help docs.

Solution 2:

Debugging React Native Apps

To debug the javascript code of your react app do the following:

Run your application in the iOS simulator.
Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
Enable Pause On Caught Exceptions for a better debugging experience.
Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
You should now be able to debug as you normally would.

Optional

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload

To activate Live Reload do the following:

Run your application in the iOS simulator.
Press Control + Command + Z.
You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.

Solution 3:

For an Android App, if you're using Genymotion you can toggle the menu by pressing CMD + m, but you may have to enable it in the menu by doing this.

Untick widget
Enable it by CMD + m click on debug in chrome

Solution 4:

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 enter image description here

then select

debug JS Remotely

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