15

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!

enter image description here

4
  • Why can no-one answer this? Commented Apr 5, 2018 at 2:19
  • 1
    No answer to #3 is killing me...I really want to be able to debug. Commented Apr 5, 2018 at 2:20
  • 1
    Ill give $50 to whoever can answer #3 Commented Apr 5, 2018 at 2:27
  • 1
    I got the exactly same 3 issue as you had, and did some searching. Here is the bug, github.com/facebook/react-native/issues/18416 Commented Apr 5, 2018 at 14:49

3 Answers 3

11

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)
Sign up to request clarification or add additional context in comments.

Comments

8

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.

enter image description here

1 Comment

I have the full path being shown in my file/folder under localhost:8081. E.g. localhost:8081/C:\Users\xxxxxx\React_native_practical_tutorial\App.js ... Has anyone facing this problem ?
0

I was having the same issue , manage to fix it by going setting inside inspect element and enable the javascript

Screenshot

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.