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 and choose "Debug JS Remotely" it attempts [http://10.0.2.2:8081/debugger-ui] but hangs indefinitely.

Issue 2. and when I finally give up and instead manually visit [http://localhost:8081/debugger-ui/], I have no way to revert AVD from "white screen of death"..ive tried "Stop Remote JS Bebugging", "Reload" etc....but end of having to use "react-native run-android" to refresh

Issue 3: Once I finally have [http://localhost:8081/debugger-ui/] displaying the desired "Debugger session #0 active" and I go into dev tools --> Sources --> Network --> debuggerWorker.js.....I don't see my folders/files listed. See screenshot.

RN is hard enough without being able to debug!

Answer 1

This solution worked for me:

1. ctrl+m on your emulator.
2. click on Dev Settings.
3. Disable User JS Delta
4. restart the react native server. (ctrl+c in the terminal and then npm run android)

Answer 2

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.