Debug JS Remotely - react-native

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

Related

Can't connect to standalone React Native Debugger

I've been having trouble getting the standalone React Native Debugger to work. I'm running an expo project and testing on android device. When I select Debug Remote JS, it opens up http://localhost:19000/debugger-ui/ in my web browser each time. My standalone debugger on port 19000 just says Waiting for React to connect. Not seeing any errors anywhere.
Make sure the device is connected via adb
adb devices
if you see your device, please run this command
adb reverse tcp:8097 tcp:8097
and restart your debugger

react native debug tools and techniques?

I'm working on a RN app in VS Code. I'm using an Android AVD loaded from AS. My Android emulator is currently displaying the following error: "Could not connect to development server." I've seen the following debug steps listed as part of an answer to a similar question on SO:
Open the in-app Developer menu.
Go to Dev Settings → Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
Go back to the Developer menu and select Reload JS.
But I don't see a way to "Open the in-app Developer menu" via my AVD:
Alternatively, I get the impression that react-devtools could potentially be used to help with debug purposes for a RN app. When I launch the React Dev Tools, RDT states that I should add the following line of code to the top of the page that I want to debug, before importing React DOM:
<script src="http://localhost:8097"></script>
I'm not totally clear on this instruction. My app has App.js and it has child components. Am I supposed to insert this line of code as the first line of code in App.js or some other file? I currently have this as the first line in App.js but it doesn't seem to have any effect. Should I be using this hook differently or am I way off base in some other way here?
Please execute this command from the command: adb reverse tcp:8081 tcp:8081
Then run the project again.

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

Before opening android app through appium, getting notification regarding 'Block installation'. How to reslove?

Before opening android app through appium, getting notification regarding 'Block installation'. How to resolve?
After display this notification, appium opens app but getting error: NullPointerException
Image link
You can solve the problem by enabling the unknown source settings, Go on Settings > Security > Device Administration check the box of 'Unknown Sources'
or
I am assuming by seeing you screenshot you are using antivirus app and it is blocking the Appium settings app, so you can try after disable the antivirus app.