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

Step 1: Place debugger where ever you want to stop script, like:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

This will pause the debugger when ever control comes to this block of code.

Step 2: Press Cmd+D on ios emulator and Cmd+M on Android simulator. If you are having real device, shake the device to open dev menu, if you don't want to shake device follow this blog

Step 3: Select Enable Remote JS Debugging, this will open Chrome

Step 4: Select Developer Tools.

Step 5: Your debugger is paused in Sources tab wherever you have written debugger within your code . Go to console and type any parameters you want to debug (that are present in the code block) like: To move to next debugger point again move to Sources -> click on Resume script execution button (Right corner blue button)

Place the debugger, wherever you wanna pause the script.

Enjoy debugging!!