React Native Debug JS Remotely Error window.deltaUrlToBlobUrl is not a function - react-native

I am trying to to debug the react native app, If I don't try to debug JS remotely then everything is fine, but when I try to debug JS remotely I do get this error.

I had this error too. The reason for me was the opened debugger tab in chrome from previous session. So when I closed it everything works fine now :)

try to change your URL of Chrome from http://localhost:8081/debugger-ui/ to http://192.168.XXXX.XXXX.xip.io:8081/debugger-ui/
source: https://github.com/facebook/react-native/issues/17618

I had same error, I just closed the browser and refreshed my simulator. It may open the browser window again with debugging window. But it takes care of the error. If not I suggest terminating your simulator and running the build commands again.

This can be solved by restarting JS debugging and closing existing debugger.
Close Chrome debugger session
On iOS, do:
CMD + CTRL + Z
Press Stop Remote JS Debugging
CMD + CTRL + Z Again
enable Remote JS Debugging
Almost the same on Android, but the difference is the keyboard command it is CMD + M on Mac or CTRL+M on Windows devices.

Close emulator.
Close node console which get opened after executing command react-native run-android.
Start emulator again.
Run project again.
Hope this help.

i just cleared my browser cache and my app cache and its working now
this error appears when you have

I installed chrome CORS extension and enabled the CORS then it worked, Even If I open chrome with disable security manually then also it didn't worked for me until I install the extension.

Aha! Found a better, less hacky solution. It seems when I upgraded Expo client on windows, it changed my default 'host'. Click the cog and change 'host' to 'LAN' to avoid CORS

Related

Is there a way to see console.log without choosing debug js remotely?

With old Android versions, app is so slow working when debug js remotely is active. Is there a way to see the logs which we have on Chrome ?
If Chrome is the issue, you can use React Native Tools Extension on Visual Studio. That way you can simply use VS code itself for reading logs.
EDIT: If putting Remote Debugger ON the issue, go ahead and use react-native log-android or react-native log-ios . Click here for more information on accessing console logs
You can use the server terminal for that, all consoles are going to be availabe there for you and you wont need to enable "debug remotly"

Debug JS Remotely is not showing on iOS simulator

I don't know why "Debug JS Remotely" is not showing on iOS simulator
Versions:
・RN:v0.62.0
・OS::macOS 10.15.3
・Xcode:11.3.1
Any solution??
With new react native versions, They have disabled hot reloading and live reloading with fast refresh and for your case Debug JS remotely has been changed to Start Debug. That will open up a browser in your system.
Hope it helps. feel free for doubts.
You're already debugging as you've turned on debug JS remotely(Start Debug newer version) ,open chrome and open inspect and tap on console ,you'll get the logs there, else to stop Just press on stop debugging to find debug JS remotely

"Unable to resolve module" debuggerWorker errors in recent react-native releases

I keep my project(s) relatively up to date with the latest RN releases. This error seems to be coming up more and more lately.
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.d9da4ed7(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
Really makes it hard when trying to debug issues and a debugger statement does noting and errors are not reported to the browser tab where the console output goes.
I've already tried wiping node_modules. Is this a known issue with a concrete fix available?
Got stuck with this exact issue for hours. Just found that this occurs only on device where app is already installed with debug mode enabled.
I fixed it by:
uninstalling manually app from device (cmd+H to display simulator home) then long click on app icon and click on cross to delete app => this forces disabling debug mode,
then run app again from xcode.
Enabling debug mode after that works normally.
I had to come across a similar issue after updating #react-native-community/cli-debugger-ui to 4.2.1. Tried out several methods, nothing worked. Reverting #react-native-community/cli-debugger-ui back to 3.0.0 resolved the issue for me.
I closed the app (pressing home twice and swiping up), then started it again from the simulator and it worked.
Happens to me recently using expo and android.
The solution was to clear all Expo Go data:
Long press the Expo go icon
Then select App info
At the bottom of the screen, press Clear Data
And press Clear all data
Relaunch expo go and the react native app

Debug JS Remotely

I'm running react-native app on windows using AVD. App is ruuning without errors. But When I'm trying to debug the app remotely, it is throwing me an error saying:
Unable to connect with remote debugger
unexpected end of stream on connection
I set Debug server host & port for device to localhost:8081.
Whats going wrong?
The simplest way of debugging code is to use Chrome. You don’t need to install any other apps. on Android emulator, or shake real devices, you will see the in-app developer menu. Tap “Debug JS Remotely”. The Chrome debugger will be opened automatically. You still need to open Developer Tools in Chrome manually. Open source files in the Sources tab, you can set breakpoints here. (Update on Feb 26, 2018: due to a bug in React Native Android,
if the app says it failed to connect the debugger and the URL in Chrome is not
http://localhost:8081/debugger-ui/, change the URL to
http://localhost:8081/debugger-ui/, kill the app, and try again.)
All credit gose to this website : https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

React Native Remote Debugger shows cached bundles in Chrome

When I'm trying to use Remote JS Debugging in Google Chrome shows Cached Bundles. See the image below.
Remote Debugger UI Screenshot:
On my emulator its not connecting to remote debugger.
Android Emulator Screenshot
Is there anyone who encountered this problem?
I'm using React Native Version 0.47.
Thanks in advance.
If you use Chrome, clear cache from browser and reload app from react native. This fix my issue :)
Get rid of that final forward slash and it should kick you to the normal debug window. I'm running 64.0.3282.186 version of Chrome and this works for me. However, I know someone who says they get force redirected to the address with the forward slash, so I hope you're not in that boat.
To fix the error, you need to clear your cache in chrome and it will work again.
Close the packager and install the app again. This worked for me.