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.
Related
App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
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"
In order to use React Native Debugger, I don't see the option 'Debug JS Remotely' when I open the Developer Menu both on my android simulator and my physical device, using expo. Tried both scenarios and no option for Debug JS Remotely...
(I originally wanted to use my external device with React Native Debugger and I can't find the setupDevtools.js file at node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js in order to update this file for use. I don't know if these two might be related, but also wanted to share)
Am I missing something? Thank you...
I guess the option Debug JS Remotely has been replaced by the option Debug with the latest version of react-native.
And If you want to use your external device with a debugger just shake the device and select the debug option from the developer menu.
But as #JoeBe suggested you should also look for an already open debugger and then try it.
You can also open the developer menu just by pressing d on node.js screen if you are using the latest version of react-native.
I had the same issue. But as it turns out, after terminating all other debuggers it was working with that Debug option as well.
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
I am developing a simple chat program with react native for learning purpose (not use expo). I made changes with the chat message (along with other code change) and was trying to reload the new message with USB debugging on Android device. But the app persistently shows the old message before change. Here is what I did:
Under android subdir, run .\gradlew clean
close android studio and react-native run-android again
Shake the device and choose reload
The #3 causes the error below:
Is there some module like nodemon for nodejs which picks up the code change nice and easily?
I often get this issue too. In this situation, I turn off the debug mode, and run adb reverse tcp:8081 tcp:8081 && react-native run-android again.
Connect your phone to your wifi, and try this,
Trigger the Developer Menu
Go to Dev Settings > Debug server host & port for device
Set it to <your_pc_ip_address_on_local_wifi>:8081. (If you are on a emulator, set it to localhost:8081)
Restart the app