React-native: Runtime is not ready for debugging!

[ikhanhmai]

Chrome is openning and I still see this error.

• Make sure Packager server is running.
• Make sure Chrome is running and not pause...
  

[Aristekrat]

Having the same issue. Chrome debugger was stable but now causes my App to detonate.

[olegberman]

Having the same issue as well

[ikhanhmai]

I restarted my mac and everything works fine again. Hope this help.

[joenoon]

I have this same issue (same line numbers and everything) and restarting doesn't fix it for me.

One strange thing that might provide a hint: When I click 'Debug in Chrome', it always launches two Chrome windows, with the second constantly stating 'Another debugger is already connected'. I still receive the above redbox error no matter if I close the second window or not.

It does seem to load the bundle from the packager, but for whatever reason claims the packager isnt running. This is what happens on Cmd+R:

[1:37:40 PM] <START> request:/index.ios.bundle?platform=ios&dev=true
[1:37:40 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true (44ms)
[1:37:40 PM] <START> request:/index.ios.bundle?platform=ios&dev=true
[1:37:40 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true (27ms)
[1:37:40 PM] <START> request:/index.ios.bundle?platform=ios&dev=true
[1:37:40 PM] <END>   request:/index.ios.bundle?platform=ios&dev=true (20ms)
[1:37:42 PM] <START> request:/index.ios.map?platform=ios&dev=true
[1:37:42 PM] <END>   request:/index.ios.map?platform=ios&dev=true (181ms)

If I dismiss the redbox, the app works and console.log's even reach the Chrome console.

[ikhanhmai]

@joenoon Did you try command: "react-native run-ios" in Terminal of current project folder?

[joenoon]

@ikhanhmai I normally run it through Xcode, but tried that command and have the same experience. I've also been careful to nuke everything between runs, which doesn't help either: rm -rf node_modules/ && npm cache clear && npm install && watchman watch-del-all && rm -fr $TMPDIR/react-*. Still a mystery

[ericraio]

This issue happens to me when I am behind a proxy like Charles

[flash42]

@ikhanhmai Restarting Chrome (!!!) solved it for me. I debugged the init process. It seems that there is a protection against multiple debugging sessions in the webSocket backend and something (wonder what, maybe a web-worker) connected as a debugger during application initialization and this prevented the real debugger to connect. Can't reproduce it atm.

[shtefanntz]

This also happened to me when I had more than one debugger tab opened in chrome (by mistake).

[gupengno1]

@joenoon i have the same issue with you, it always launches two Chrome windows.have you fixed it?

[joenoon]

@gupengno1 I've been using the 0.26-stable branch and it works.

[joshjhargreaves]

@joenoon: what version of react were you using before using 0.26? Are you still using that now?

I've experienced the same behavior as yourself with the two chrome windows opening, do we have any ideas about that?

Thanks :).

[joenoon]

@jjhargreaves I'm still stuck on 0.26-stable for various reasons. I don't know anything about it other than it didn't work for me until 0.26, and I'm not sure about newer versions - hopefully this problem hasn't come back.

[joshjhargreaves]

I don't think that this issue should be closed.

[IlyaRepo]

I am experiencing the same thing with 2 chrome debugger tabs opening on 0.24 version. Restarting Chrome doesn't help.

[aflanagan]

Also experiencing the two chrome debugger tabs on 0.28 and restarting does not help.

[longsangstan]

My react version:
"react": "15.0.2", "react-native": "0.26.2",

When I reloadJS it will work for a moment and then it would show the error again.
Restart does not help for me too.

Is the problem related to the version of react? For the folks who solved the problem which version are you guys using?

---

tried upgraded to the latest version of react(15.2.1)/react-native(0.29.0) and encountered another problem - native modules cannot be null...

[pavlelekic]

I'm getting this all the time. This is sooo annoying :(

I'm running it on a simulator (iPad2), this is the message I'm getting in the Chrome console:

WebSocket connection to 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' failed: Invalid frame header

[phongyewtong]

I am getting this too!

[fostertime]

I fixed this by first deleting the app in the simulator. Then wiped out my node_modules directory, then did a fresh npm install ... no issues after that.

[Ellegarden1219]

I assume that every one was using google chrome for debug and everybody probably followed the direction to click on "pause on exceptions". Tried to unmark it, and reload it again, it should work.

[dwilt]

Even restarting didn't fix this for me. I had an instance running on my phone and had selected "Debug JS remotely" and had to turn this off before it would work again. Scared the shit out of me for a bit.

[pavlelekic]

I noticed that I'm only getting these messages when debugging in chrome. When I'm not in debug mode, I'm not getting these. I tried the suggestion from @fostertime, but still got the same message.

[dazziola]

I have this very problem out of the box with a brand new app using react-native init appName. It's very frustrating. It seems to be broken more often than it works.

I tried a full restart of my computer there and no avail. There is no hopping between networks, it just plain ol' doesn't work for me right now.

[dwilt]

@dazziola are you on a sim or a device? and if a device, what kind?

[dazziola]

Hey @dwilt, I'm on a physical device, an iPhone 6 (iOS 9.3.1).

The hot reloading and remote debugging works fine on the virtual simulator. I'm guessing it's because it's the same device.

I've read online that you should change the reference from localhost to your computers local IP, but cant seem to see where I would possibly change that.

[dwilt]

When the error box is open, hit dismiss in the bottom left hand corner. You should see a white screen. Shake the phone to bring up the developer menu. Is "Stop Remote JS Debugging" an option?

[dazziola]

@dwilt - yes, it is. Once clicked it says it's loading from a pre-bundled file and then displays the iOS "Welcome to React Native!" screen.

[dwilt]

You should be good to go!

[dwilt]

The remote js debugging on the phone can cause these kinds of problems. It blows.

[dazziola]

@dwilt but I still can't hot reload which is the killer feature when developing interfaces!

[dwilt]

yea, _hot reloading_ doesn't work for me but _live reloading_ does. Can you confirm that is the case for you?

If so, as long as we got your other issue (Runtime is not ready for debugging!) resolved, I'd say go post another issue about the hot reloading (or comment on an existing one that most likely already exists)

[dazziola]

@dwilt Can you define the difference between Live and Hot reloading, I thought that they were the same! I just want to clarify what Ive got working, thanks!

[dwilt]

https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html check out the video

[dazziola]

@dwilt - thanks for the video. I can confirm that neither works for me, nor do I get the option to enable them. These are my sole options:

[dwilt]

Not sure man. Open up another issue.

[dazziola]

@dwilt will do - thanks for all the effort though!

[dazziola]

For what it's worth on this thread, I get the Runtime is not ready for debugging message as well as a Websocket connection failed with error error sequentially when I hit reload.

[ferologics]

I'm getting this error all the time as well. Since I started to use 'let' more it's been happening more often

[dazziola]

Just another few details which baffle me:

• I am able to visit the React Native Packager info page through my mobile device over the same network (In my case at: 192.168.0.2:8081).
• I have hardcoded the IP values into the RCTWebSocketExecutor.m file.

Yet it continues to not work. Anyone have any updates or further findings?

_Update_

So I've found that if you hardcode the IP value into RCTWebSocketExecutor.m, you only get one of the two errors I was getting previously:

• websocket connection failed Code=61
• Runtime is not ready for debugging

So I'm left with just the Runtime error message asking if RN Packager is running (yes, it is), and now I get a debuggerWorker.js:18 Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope' error in my JS debug tab.

[3610cn]

restarting works for me

[dazziola]

@3610cn thanks! I have an update. I've got around the above two errors, and my JavaScript debug bridge is actually working but I get an error now for importScripts:

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.android.bundle?platform=android&dev=true' failed to load.

[jonathandey]

I too am having the same issue. I have disabled hot reloading as per @dwilt suggestion but it still persists. What I have noticed though is that the app functions fine until I open the console in Chrome, only then do I have trouble tapping things until I have to reload, when I do reload I get the error.

Edit: I have also noticed that the Chrome debug page doesn't reload when I reload the emulator.

[ferologics]

restarting is a poor solution for this ever occurring problem..

[jonathandey]

I found the solution to the problem I was having. I had Javascript disabled in the Chrome Dev Preferences. I had a Yellow Warning indicator next to my sources tab. All seems to working correctly now. Silly mistake! Hope it helps someone else.

[woodwoodchow]

The issue ”Another debugger is already connected“ when you debug in chrome, maybe you code using VSCode and using react native tools clicked Debug iOS, then VSCode is a debugger now. So there are two debugger: Chrome and VSCode.

[dazziola]

Thanks @woodwoodchow but this isn't the case for me. I only run react native in the terminal and there's no conflict of windows. One bizarre problem I've found is that it works on my work laptop fine on the same network, the same init app, the same specs and versions but won't work on my personal machine.

I'm at a loss

[afilp]

I am also experiencing the same thing with 2 chrome debugger tabs opening on v0.32.1 version. Restarting Chrome doesn't help.

[afilp]

Actually, the keys combination that opens the debugger does not work but if I go to the menu's Chrome Dev Tools then it seems to open.

[ghost]

i solved it!

because i open remote js debug, and then when i run react-native run-ios, will open two debug tabs.

so i close remote js debug,and run again, it worked!

hope this can help you!

[VincentChow]

1.restart your chrome
2.restart your mac
3.delete the app in your device or simulator

1. run it again
   This process works for me.

[comountainclimber]

restarting chrome/my machine does not resolve this issue... Does anyone have any suggestions for how to debug JS remotely on physical device I have been trying various solutions for hours and nothing seems to work.

@dazziola I seem to be experiencing the exact same error as you after hardcoding my IP in RCTWebSocketExecutor.m please let me know if you were able to resolve this issue and debug successfully

[hite]

Believe or Not. To replace[[_bridge bundleURL] host]; with @"192.168.14.215"; will fix it. Even [[_bridge bundleURL] host] output is @"192.168.14.215. It is so strange.
Before i upgrade to react to ~15.2.1 , i always replaced localhost with real IP address. But in ~15.2.1 the facebook team writes new method [[_bridge bundleURL] host] to solve this problem. So i am NOT try to replace again by myself.

Now i have to do again.

PS: my problem is Runtime is not ready for debugging appeared only when debug on physical device. It is good when stop debug remote js

[fud]

@hite Yeah I'm getting the same thing - it works with stopping debugging but just can't get debugging working on an ios device nor live reloading.

[Monte9]

@here UPDATE!
Recently I updated node to v6.7.0 and ran into this exact issue! I tried all the solutions listed on this thread but none of it solved the issue. I then came across this thread: https://github.com/facebook/react-native/issues/8668

Hence downgrading to node v6.2 resolved this issue for me.

So check your node version (node -v) and make sure you are using something between v6.0.0 to 6.2.2.

Here's how to update your node version:
sudo npm cache clean -f

sudo npm install -g n

sudo n 6.2

[servatti]

There is a instruction in the documentation suggesting to replace _localhost_ with _MACHINE_IP_ on RCTWebSocketExecutor.m file.

[katrinanova]

restarted everything didn't help
deleted app from the device solved it for me

[petroslafaz]

When debugging on the device, I found that I needed to specify the IP address on the AppDelegate.m since RCTBundleURLProvider can't detect it.
Therefore, I had to revert to the old way of assigning the IP address manually.
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.79:8081/index.ios.bundle?platform=ios&dev=true"];
"react": "15.3.1",
"react-native": "^0.33.0",

[ysfzrn]

After I saw error, I noticed my host ip address was different. I changed host address again as 127.0.0.1 and problem is solved

[adamkdean]

Had this issue too, thanks @petroslafaz, reverting back to the old way worked.

[tezqa]

For me it was just because i was using an outdated version of node.

[poberwong]

@ysfzrn yeah, in my case, the localhost is set as 126.0.0.1 and I don't know when I did it. Firstly, I ping the localhost in the terminal and it doesn't work, thus I guess that my hosts of mac could be changed someday. As you know, the localhost is always set as 127.0.0.1 acquiescently by system......

[jbmorgado]

@Monte9

That was the only thing that worked partially for me. I was using Node 7.3.0 as installed by Homebrew on a Mac and it was impossible to debug any React Native application in VS Code or in Atom (debug was working on a browser though).

I downgraded Node to v6.2.2 and now VS Code is working (although Debug is quite slow, Im not sure if that's normal or not since it's the 1st time I got it working), but Atom (with Nuclide) still crashes the React Native application with message "maximum call stack size exceeded".

[MehmetKaplan]

Exact same problem here. Tried downgrading node, editting react-native-xcode.sh, restarting app, restarting machine, reloading the AwesomeProject...

Edit 1, 12.01.2017: Re-installing node with internationalisation option ( brew reinstall node --with-full-icu) changed the problem domain. Now my code in Atom - Nuclide - React Native trio seems possible-ish to be debugged. This time I have a new error, which is "Maximum call stack size exceeded". And it seems as a known nuclide issue.

[JasonFehr]

I had a similar error:

Runtime is not ready for debugging
Make sure packager server is running
Make sure the javascript debugger is running and not paused on a breakpoint

I verified that the packager server was running, which it was.

I fixed the problem simply by installing chrome.

It seems that chrome is the default browser the simulator uses to provide a console for debugging. I believe that if it sees chrome is not installed, it defaults to a javascript debugger (which I suppose I had also not installed).

I had been following the Udemy course on React Native when I hit this error. It had not been obvious to me that Chrome was a requirement.

I know it's not quite the same error the OP had, but I hope this helps in case someone else encounters this error.

[jacruzca]

I had this problem with my iOS app and restarting the mac did not work. I managed to solve it by doing :

• Open the iOS project with XCode
• Clean the Project (Product -> Clean)
• Clean the build folder (*with alt key pressed: Product -> Clean the build folder)
• Run react-native run-ios

Hope it helps.

[Rnorback]

Simply had to reset content and settings for the simulator and it started working for me again.

[MbF-Sathya]

I just changed the host name in chrome browser and it get started work. Instead of http://localhost:8081/debugger-ui change it to http://127.0.0.1:8081/debugger-ui.

[devgeektech]

Simply check if port 8081 already in use
if yes then in terminal > lsof -i -P | grep -i "listen"
get the process_id of port 8081
kill -9 'process_id'

now close ios simulator and run the above command again
react-native run-ios

it worked for me
All the best.

[lekastillo]

Hello, maybe this help someone, everything was ok, untill i try to use expo to build my app, that create a .expo folder with packager-info.json with some config, I remembered this folders does not exist before i tried to make builds. So, I delete this folder and thats fix the problems, so the folder is created agains when I start the app, but the Debugger is now ok. It worked for me. Im not sure why?, but works

[MaxiSantos]

with
node --version
v8.9.0

when the chrome window is opened I just put this url in the browser: http://localhost:8081/debugger-ui/ then I could see the debuguer in chrome. And to get rid of the error in the simulator I just reload it (cmd + R). It worked for me. I run react native from x-code.

[linasmnew]

Fixed on mac by clicking:

• xcode simulator
• hardware (in top menu bar)
• "Erase all content and settings..." (3rd option from the top)

[kevinkandiaz]

I reinstall the iOS Simulator App in Expo and the problem did not occur in the process anymore. It work for me.

Configuration:

• Mac
• Expo XDE

[xSmoggeRx]

Hi guys, I restarted the Mac and it does not work for me but, then I cleaned the Chrome cache and it worked!!!

[ryancarlson]

@xSmoggeRx ahh finally your suggestion worked for me. Thanks!

Now if I could have the last 20 minutes back...

[Symous]

Bought a new mac fix this problem for me !

[danielgindi]

For me what fixed it was adding 127.0.0.1 as an allowed host for non-secure communications.

The default config from a new react-native project is one that localhost is whitelisted, but suddenly I started receiving those errors, and adding 127.0.0.1 fixed it.

<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>127.0.0.1</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <string>YES</string>
        </dict>
    </dict>
</dict>
</plist>

[codler]

Make sure it opens in http and NOT https
Correct url http://localhost:8081/debugger-ui/

Chrome will sometime cache and redirect to https, to clear do "Empty Cache and Hard Reload"
https://stackoverflow.com/a/14969509/304894

[harokevin]

1) command + t in ReactNativeDebugger to open a new ReactNativeDebugger window
2) '8081' and click confirm
3) Reload JS on your emulator command + R

My solution was starting the debugger on the correct port.

The port number in step 2 might be different. Check your bundler terminal header to identify what port the app is running on. For example, this is what my bundler terminal header looks like.

 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running Metro Bundler on port 8081.                                       │ 
 │                                                                            │ 
 │  Keep Metro Bundler running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own Metro Bundler  instance if you    │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 

OS: Mac
Emulator OS: iOS
Emulator Device: iPhone 8 Plus

[fwal]

You could also try to open development menu on the device/simulator and if there's an option "Stop Remote JS Debugging", select it, reload JS and dismiss any "Runtime is not ready [...]" error screens.

[James-E-Adams]

I've managed to narrow this down a particular behaviour set:

1. Have a react native view open with debugging enabled
2. Exit this view without disabling remote debugging, back to native iOS view.
3. Reopen the react native view.
4. Error message appears and the only way to make the app usable again is by killing it and restarting it.

If I disable remote debugging before I exit the react native view, I can go back into it no worries. The issue lies in entering a react native view with debugging already on.

Versions:

    "react": "16.0.0",
    "react-native": "0.51.0",

[Buwaneka-Sumanasekara]

Clear cache in browser and try again