react native remote debug on chrome not working - react-native

I fallowed this site to enable remote debug on chrome, but chrome is always showing Status: Another debugger is already connected I dont understand why. I only have one tab open and on the android emulator I have clicked control + shift + m and clicked on debug and now it shows stop debugging.
So what I'm I doing wrong ?

Related

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

Devtools failed to connect to react native emulator

I execute the project with react-native run-android and in another terminal, i do:
npm run react-devtools
and it opens the new window of electron that says:
The react native app it will open in a few seconds...
but nothing happens.
I put in the simulator toggle inspector with Ctrl + m and i can see in networks that it makes a request to http://localhost:8097 and the result is it fails to connect and keeps trying with the same result.
devtools can not to connect to emulator, It write connecting... And show a link for troubleshoot but link doesnt work. With ctrl shift i in devtools, I can understand error is fail to connect because of backend.js. Can Any body help me?
Make sure pors is forwarded from the emulator.
Use adb reverse tcp:8097 tcp:8097 to enable
See https://fig.io/manual/adb/reverse for more details

How do I disable opening DevTools in the browser when running expo start?

When I run expo start (expo cli 2.6.14) in my react native project, it always opens a browser window with the DevTools. It's a nice feature, but sometimes I'd rather not have that happen.
It says in the console:
Opening DevTools in the browser... (press shift-d to disable)
But pressing shift + d just types out capital D. So I don't get why it says that. Maybe it's because I'm on a Mac, but I've tried shift/ctrl/alt/cmd + d and none of those do anything regarding disabling opening the window.
Am I missing something here?
I figured it out, once the bundler is actually up and running, then you can use shift + d as one of the commands, as well as press d to open DevTools manually.
It's odd that it tells you to use the command before you're actually able to use it.
Using shift + d (in the console) toggles the browser-debugger but for me it didn't work.
Instead to bring up the menu in the app press m in the console and disable remote debugging from there.

Trouble attaching Chrome browser for debugger with React Native in WebStorm

Using WebStorm 2018 and trying to setup a debug config for an existing React Native project.
I've set it up to start the React Native bundler and unchecked the build and launch application option.
It opens up the Chrome browser but it's a blank page and WebStorm shows an error.
It also shows a status of
Waiting for connection to localhost:55391... Please ensure the browser was started successfully with remote debugging port opened
Browser is open but it's set to a blank page.

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

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