Chrome debug tools for react native: multiple issues

Question

thanks in advance your your help; I rather a newbie with RN and Android (i used create-native init to create project).

Issue 1: when i first ctrl+M

Answer 1

This is an issue with the of latest version of react-native (0.54).

After some investigation, I found there are two ways to workaround this issue.

Option 1. Downgrade react versions, modify the package.json of your AwesomeProject as below

"dependencies": {
  "react": "16.2.0",
  "react-native": "0.52.2"
},

Then run these commands:

cd AwesomeProject
rm -rf node_modules android
npm install # this will bring folder node_modules back, with react/react-native of previous version
react-native eject # this will bring folder android back
react-native run-android

Option 2. Turning off Use JS Deltas as mentioned in this issue

But the author did not provide full steps, which led me working out option 1.

1. Cmd+m in your emulator, and turn off "Use JS Deltas".
2. Find the termnial window for "Metro Bundler", press Ctrl+c to terminate it, then press the Up arrow to re-run the command for "Metro Bundler", such as /works/StackOverflow/node_modules/react-native/scripts/launchPackager.command ; exit;. (This is an important step).

Now back to Chrome, you can find your source files listed under debuggerWorker.js > localhost:8081.