I used the react-native Android demo project AwesomeProject and within the project I executed:
react-native start
In a second terminal:
react-native run-android
To start webserver and install the Android APK. The default webserver configuration is localhost:8081, how can I modify the webserver port, and how do I update recording of the IP & Port in Android project.
Edit:
I just found out that can modify ip address in Android debug setting, it seems "getDebugServerHost" is a private API, does Facebook provide any API to change ip&port?
As OP commented on MossP's answer, this can now be achieved using the debug_http_host shared preference (see this issue).
So, if you wanted to use, say, port 8082, you could add an onCreate method to your MainActivity.java file, which might look something like this:
#Override
protected void onCreate(Bundle state){
super.onCreate(state);
SharedPreferences preferences =
PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
preferences.edit().putString("debug_http_host", "localhost:8082").apply();
}
Of course not forgetting to import android.content.SharedPreferences, android.os.Bundle, and android.preference.PreferenceManager.
This would make your app try to access the packager at the desired port instead of 8081.
Then you'd just make sure to start the packager with --port 8082 (as described here), and you should be all set.
(Unless you happen to be using Nuclide, which is a whole other story).
Note that up until React Native 0.46, this would only allow one to run the app successfully, but still didn't make it possible to actually attach a debugger on a non-standard port. As of React Native 0.46, attaching a debugger should also work.
Update: See Tomty's answer for the current recommended way to do this in 2019.
Unfortunately, the port is currently (2015/09/23) hardcoded. I believe this will be changed in time as it already has an Issue raised from a high level contributor to the project.
https://github.com/facebook/react-native/issues/2704
There is a small work around for this. Anyone running this on a physical device(or even otherwise) can restart their adb session using a different port.
eg.
react-native start --port=1234
On a different cmd/terminal window.
react-native run-android
After which I am greeted by these messages.
BUILD SUCCESSFUL
Total time: 22.589 secs
Running C:\SDK/platform-tools/adb -s VY0025160560725694 reverse tcp:8081
tcp:8081
This runs it on default reverse port of 8081, which is blocked by McAfee.
Work around:
adb reverse tcp:8081 tcp:1234
Try it out. It works for me.
Note: You may have to kill and re-open the app.
Currently I am unable to provide an answer for an emulated device since I do not have one installed on my system. But the symantics should be similar.
Note: This may break automatic code updates using watchman.
As stated in https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu,
You can access the developer menu by shaking your device or by
selecting "Shake Gesture" inside the Hardware menu in the iOS
Simulator. You can also use the ⌘D keyboard shortcut when your app is
running in the iOS Simulator, or ⌘M when running in an Android
emulator. Alternatively for Android, you can run the command adb shell
input keyevent 82 to open the dev menu (82 being the Menu key code).
So on iOS device shake it, on iOS emulator press control D, on Android emulator control M, on Android device do adb shell input keyevent 82
Then in the menu that opens, go to Dev Settings, debug server & host port for device, and edit the IP and port.
ps: will only work for non production
On Mac :
go To Wifi
Open network preferences
Wi-Fi is connected to {wifi name} and has the IP address {xxx.xxx.x.x}.
Get your ip address .
Go to application on devices
go to Dev Setting
Tap to Debug server host & port for device
Fill your IP address and port is 8081 (example ipaddress:8081) .
This is an extension of Tomty's answer. Check out an example project here:
npm i #nick-bull/react-native-debug-address
# DEBUG_HOST=127.0.0.1:8081 npx react-native start --port 8081
# or, equivalently
DEBUG_PORT=8081 npx react-native start --port 8081
npx react-native run-android --port 8081
Related
I'm using React.JS and when I do react-native run-android (with my device plugged in) I see a blank page. When I shake the device and select Debug JS Remotely from the option list I see the following screen.
FYI:
OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0
In my case the issue was that the emulator was making a request to:
http://10.0.2.2:8081/debugger-ui
instead of:
http://localhost:8081/debugger-ui and the request was failing.
To solve the issue: Before enabling remote debugging on your emulator, open http://localhost:8081/debugger-ui in chrome. Then enable remote debugging and go back to the chrome page where you should see your console logs.
Solved the issue following:
Press Cmd + M on emulator screen
Go to Dev settings > Debug server host & port for device
Set localhost:8081
Rerun the android app: react-native run-android
Debugger is connected now!
I solved it doing adb reverse tcp:8081 tcp:8081 and then reload on my phone.
In my case, selecting Debug JS Remotely launched Chrome, but did not connect with the android device. Normally, the new Chrome tab/window would have the debugging URL pre-populated in the address bar, but in this case the address bar was blank. After the timeout period, the "Unable to connect with remote debugger" error message was displayed. I fixed this with the following procedure:
Run adb reverse tcp:8081 tcp:8081
Paste http://localhost:8081/debugger-ui into the address field of my Chrome browser. You should see the normal debugging screen but your app will still not be connected.
That should fix the problem. If not, you may need to take the following additional steps:
Close and uninstall the app from your Android device
Reinstall the app with react-native run-android
Enable remote debugging on your app.
Your app should now be connected to the debugger.
I had a similar issue that led me to this question. In my browser debugger I was getting this error message:
Access to fetch at 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' from origin 'http://127.0.0.1:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It took me awhile to realize I was using 127.0.0.1:8081 instead of localhost:8081 for my debugger.
To fix it, I simply had to change Chrome from:
http://127.0.0.1:8081/debugger-ui/
to
http://localhost:8081/debugger-ui/
My case is that when I tap enable remote JS debugging, it will launch chrome, but can not connect to it.
I have tried to run:
adb reverse tcp:8081 tcp:8081
, did but not work.
I uninstalled my chrome totally and install a new one. And it works.
The other answers here were missing one crucial step for me. In AndroidManifest.xml I needed to add usesCleartextTraffic:
<application
...
android:usesCleartextTraffic="true">
You probably don't want to keep this in the production release of your app though, unless you want to support insecure http requests.
After I added this to my AndroidManifest.xml, then I followed Tom Aranda's answer, and the emulator was finally able to connect to the debugger.
Make sure that the node server to provide the bundle is running in the background. To run start the server use npm start or react-native start and keep the tab open during development
react-native start --reset-cache in one tab and react-native run-android in another
adb reverse tcp:8081 tcp:8081 ( so you could add it to your scripts and just run yarn run adb-reverse)
If you're using android, Instead of shake your phone a great tip is run adb commands.
So you can run:
adb shell input keyevent 82 (menu option )
adb shell input keyevent 46 46 ( reload )
I did #sajib s answer and used this script to redirect ports:
#!/usr/bin/env bash
# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081
echo "🚧 React Native Packager Redirected 🚧"
uninstall your application, then run react-native run-android. then click debugging end in chrome replace http://localhost:8081/debugger-ui/, end run react-native run-android. if you still haven't succeeded try again
Inculding all impressive answers the expert developers specially Ribamar Santos provided, if you didn't get it working, you must check something more tricky!
Something like Airplane mode of your (emulated) phone! Or your network status of Emulator (Data status and Voice status on Cellular tab of Emulator configuration) that might be manipulated to don't express network! for some emulation needs!
I've overcome to this problem by this trick! It was a bit breathtaking debug to find this hole!
in my case it also need to install it's npm package
so
npm install react-native-debugger -g
Try adding this
package.json
devDependencies: {
//...
"#react-native-community/cli-debugger-ui": "4.7.0"
}
Terminate everything.
npm install
npx react-native start
npx react-native run-android
Reference: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917
Trouble shooting React native with React Cli and Typescript/js (Android Emulator)
Check if 'android/src/mai/assets/index.android.bundle' is available. If no Create index.android.bundle file in 'android/src/main/assets'
If above path not available then create the path then file
3.Run for bundling : react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4.a. By default development server runs on 8081 port. Run 'react-native start' then on browser check if 'http://localhost:8081' and 'http://yourIP:8081' works. If yes then
Open application in Android Emulator (react-native run-android)
Click Ctrl + M
Select Settings
Select Debug Server Host and Port For Device
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8081
4.b If http://localhost:8081 not working then run react-native port=8088(or any port)once successfully executed. Check on browser http://localhost:8088 and http://yourIP:8088 works. Yes then Open application in Android Emulator (react-native run-android)
Click 'Ctrl + M'
Select Settings-
Select Debug Server Host and Port For Device-
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8088
YourIPAddress : Open command promt -> write 'ipconfig' -> copy IPv4 address
As for my own case , i was using the expo go and my android phone for my emulator and it was giving me this error.
so what i did was to clear the expo go app cache & data on my android device. it was working just fine
TL;DR:
If you created the app with expo cli with some native code or libraries not supported by expo, try this command in case the other solutions do not work.
npx expo run:android
Docs
My scenario:
I tried to run one of my old expo applications by building the app from Android studio and faced this issue. The other solutions mentioned didn't work. When I tried to use Expo Go to scan the QR, I got to know the error. Since I had used react-native-mmkv, I couldn't use expo-cli, I had to eject. So I ran npx expo run:android and everything started working fine.
The solution is to clear the expo go application data to solve the problem. Ref to: How to disable Remote JS Debugging in React-Native
Followed the steps here to try react-native android on a windows box.
On a separate prompt I executed react-native start which is running fine
Started the AVD from AVD Manager
Executed react-native run-android
BUILD SUCCESSFUL
Total time: 27.632 secs
Starting the app on emulator-5554 (D:\software\Android\android-sdk/platform-tool
s/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
Executed react-native run-android on a separate console from within same folder
But I see an error which I'm having hard time to resolve. Please suggest resolution.
---EDIT---
Possibly the issue is that 8081 port is in use by McAfee. So I updated the server.js to run dev port on 8088 and now when I browse http://localhost:8088/index.android.bundle?platform=android I can see JS loading.
But how do I make android use this address instead of default **10.0.2.2:8081?** I found a file AndroidInfoHelpers.java which contains that 10.0.2.2 path but not sure if that's the way as being a JAVA file I possibly need to recompile whole program. There should be a simpler way to point android app to use a different port for dev server.
Also, when I execute react-native run-android the first line that gets output says "JS Server not recognized.. Continuing with the build" which likely is shouting the same thing.
A) Set the new port for dev server
User command
react-native start --port=8088
or yourproject\node_modules\react-native\local-cli\server\server.js
to set the the available port say 8080
now use react-native start to start server on 8080
B) Now to establish communication between emulator and dev server, use below command
adb -s emulator -5554 reverse tcp:8088 tcp:8088
i) 5554 =>emulator port (adb devices command will tell you emulator port but if this command is not working then set the path C:/../android-sdk/platform-tools in Path environemnt variable )
ii) 8088 =>server port
C) run the command react-native run-android
D) Follow below steps updating Dev server path in emulator
i) Ctrl + M for windows to open your dev menu for the emulator.
ii) Click Dev Settings
III) Under Debugging select Debug server host & port for device
IV) Enter the url and port for your application as 10.0.2.2:8088
Press cmd + M (Ctrl + M for windows) to open your dev menu for the emulator (Please make sure your react-native app is open in the active window of the android emulator before using this command)
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the correct url and port for your application in your case 10.0.2.2:8088
Once you do that you can reload your application and it should work.
1) First set the port number as 8088 in below file
yourproject\node_modules\react-native\local-cli\server\server.js
now build the project.
2) Follow below steps updating Dev server path in emulator
Ctrl + M for windows to open your dev menu for the emulator.
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as 10.0.2.2:8088
This issue might occur because of the blockage of default port. In my case, I was able to fix it after executing following steps-
Start dev server on a new port:-
react-native start --port=8088
Open developer menu by vibrating on actual connected device or pressing 'Ctrl + M' on emulator.
Select Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as '10.0.2.2:8088'
Just run this one your phone, it is a waste of time to try to figure out the hard coded React code for the emulator. It just does not seem like enough time was spent fixing this issue. Spent 3 days on reading way to many blogs, and trying way to many things and nothing worked. Our company also runs McAfee and I had the same issue.
This worked for me. Does the same thing but quick.
Just set the port when run the app
react-native run-android --port=8082
appears after running react-native run-android
I click the reload JS button and it changes to
Which is more informative, I am using VS standalone Android Emulator, and have already ran adb reverse etc etc
I do not see an option for Debug server host & port for device in Dev settings like it says there should be.
This happens when you haven't set the server IP (which should be on the same local network as your phone).
From your question I assume you can connect to the emulator using adb then you should be able to send command to it using the following according to the official guide pointed out by G. Hamaide:
adb shell input keyevent 82
This should send open menu event to the emulator and show you the menu where you will find Dev Settings and if you open it there you will find Debug Server host & port.
In order to connect to this server you must be on the same local network (i.e. connected to the same router). I assume you are using default options on a Windows machine so open a cmd shell and learn you local IP address using ipconfig. You can now set host and port to YOUR_LOCAL_IP:8081 (default port is 8081). Try to reload and it should work now.
You need to follow the steps from their official guide.
From where you are stuck follow these steps :
Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
Go to Dev Settings.
Go to 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). On Mac, you can find the IP address in System Preferences / Network. On Windows, open the command prompt and type ipconfig to find your machine's IP address (more info).
Go back to the Developer menu and select Reload JS.
I use Qt Creator to develop an Android dynamic library, i.e. a .so file. This .so file is then used by an Android application, but that is developed in Eclipse.
I need to debug my native code, but since it's a library, I can't start the application from Qt Creator, I must attach to the already running process.
Now, if it were a desktop application, I'd use Debug->Start Debugging->Attach to Running Application, but how do I attach to an Android process, which would be running on the emulator or on a connected phone, which is more like remote-debugging?
I think that I should use Debug->Start Debugging->Attach to Running Debug Server:
However, I'm not sure what the exact steps are - how do I start a debug server for ADB, and which port do I connect to?
So it looks like there may be another way to set up a debugger that can connect properly.
http://lists.qt-project.org/pipermail/qt-creator/2012-June/001017.html
Set a toolchain with this version of gdb, and set your project to use it.
In Tools -> Options -> Debugger -> GDB insert your commands in "Additional
Startup Commands"
...
I use Debug -> Start Debugging -> Attach to Remote. All the fields are
there (solib-absolute-prefix is an alias for sysroot, and "location of
debugging information" is solib-search-path), and the last few
"configurations" are stored, so you can call them back easily. I have
to start gdbserver on the target manually, set a shortcut to open the
'attach to remote' dialog, and it is been working great for me so for.
It's old (June 2012), but it goes into better detail about how the gdbserver is started and the setup for a debugger and attaching to a process in Qt. It also mentions some of the relevant environment variables:
set solib-absolute-prefix $ANDROID_SRC/out/target/product/MYPRODUCT/symbols/
set solib-search-path $ANDROID_SRC/out/target/product/MYPRODUCT/symbols/system/lib/
Hope that helps.
Attaching to a adb logcat is independent of Qt and what Android source you are using. Make sure adb.exe can be found on your path such as: C:\Android\SDK\platform-tools, and you have the adb drivers for the device you are debugging with. Try this one if you are struggling: http://www.koushikdutta.com/post/universal-adb-driver
Command Line ADB commands
This should print out any connected devices that can be found:
adb devices
This clears the current logcat logs:
adb logcat -c
This starts a connection to logcat:
adb logcat
Usually you don't have to worry about which port to connect to, because it is automatically found by adb.
Attaching to logcat over wifi is also do-able.
adb tcpip
adb connect 192.168.XX.XX:5555
Hope that helps.
I am trying to reverse-forward port through ADB, but it just returns cryptic error of error: closed. Normal forwarding works. Session snippet:
$ adb forward tcp:59778 tcp:59778
$ adb forward --list
015d2109ce0c1a0f tcp:59778 tcp:59778
$ adb forward --remove-all
$ adb forward --list
$ adb reverse --list
error: closed
error: closed
$ adb reverse tcp:59778 tcp:59778
error: closed
error: closed
I am connecting via USB to non-rooted Nexus 7 2012 Android 4.4.4 from Windows 7 Pro x64 on Boot Camp.
adb reverse was introduced in Android 5.0
Since adb reverse is not supported in Android versions lower than 5.0, you need to use an alternative method, for example connecting via Wi-Fi instead. If you are using React Native, Facebook has added official documentation to connect to the development server via Wi-Fi. Quoting the instructions for MacOS, but they also have them for Linux and Windows:
Method 2: Connect via Wi-Fi
You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
You can find the IP address in System Preferences → Network.
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device.
You'll see a red screen with an error. This is OK. The following steps will fix that.
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.
Follow these steps carefully.
Note: All commands need to run inside a project only.
Run this command first:
npm react-native start
Open another window in the same project and run:
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
This will create index.android.bundle in the assets folder
Run:
npm react-native run-android
Now you can get apk in the build folder which will work fine.
adb reverse requires Android 5.0+. For devices previous to that, you'll need to use a workaround like so.
If you have busybox installed on your Android device (most Genymotion images do), you can emulate adb reverse using this incantation:
adb shell busybox nc -ll -p {guest port} -e busybox nc {host IP} {host port}
In this case, "guest" is the Android OS running in the emulator and "host" is the computer running the emulator.
cause of adb reverse isnt working on android prior 5 you could propably use adb forward with a service listening on android and tunneling other connections through this inbound connection. I am doing this mostly with ssh, but you would need an ssh server on android. you than can connect using ssh -R incommingreverseportonandroid:hostyouwanttoforwardto:portyouwanttoforwardto sshuseronandroid#localhost -p portyouhaveusedforadbforwaqrdtoaccessandroidssshserver
but i dont know how to enable an ssh server on android and maybe there is a better way cause ssh uses encryption which isnt needed over usb and using up cpu.
i am using this way with my server to share a service when i am forced behind a nat...
hope someone will find a way to bring this teoretical way into practical possibility
Just use 10.0.2.2 instead of localhost/127.0.0.1 for your hostname. It will directly try to connect to the port on the host machine (same affect as reverse).