Debugging HTTPS local services from my mobile device (web, api, websocket) - android

Having a hard time debugging from mobile device my local development web app which connects to a GraphQL node server and another service using web sockets. All three services running on HTTPS to the below ports.
Web Reactjs app: https://localhost:3335
Node server: https://localhost:3334
Web socket server: wss://localhost:4443
From my macOS machine, everything works as expected but when trying to access the reactjs from Chrome Android and using the inspect desktop devtools and USB cable navigating to https://localhost:3335 works but I get the error POST https://localhost:3334/dev/graphql net::ERR_CERT_DATE_INVALID.
My iOS device doesn't even connect to localhost:3335 or 192.168.2.3:3335.
I am open to any tips, tricks, services, and ideas to debug using my local development machine and mobile devices.

I was able to make it work by navigating to all addresses in the mobile browser and accept the risk of a self-signed certificate.
https://localhost:3334/dev/grapqhl -> accept
https://localhost:4443 -> accept
Now https://localhost:3335 will work fine.
Struggling with iPhone debugging due to localhost not binding to the machine IP address (Pending solution, might create another SO question for reference).

Related

Blazor Server-side app Android and IOS mode

I am building a Server-side Blazor web application on localhost for now.
I want to test my web app on android and IOS devices but I cannot seem to find the solution.
I have tried connecting to the same network via wifi and have my IP address with :port but doesn't work.
You could give ngrok a go, this would allow you to map your localhost and port to a public web address.
There are a bunch of details here:
https://ngrok.com/

How to test PWA on over HTTPS with self-signed OpenSSL certificate?

I am able to test serviceworkers over http with localhost but I would like to testg on a mobile browser. Because it is a separate device I cannot use localhost so I use the name of the PC. So now I need to use https, which is causing SSL related errors in my service worker:
Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://xxx:5500/app/') with script ('https://xxx:5500/app/service_worker.js'): An SSL certificate error occurred when fetching the script.
I have properly configured liveServer to use self-signed certs and I've successfully enabled "edge://flags/#unsafely-treat-insecure-origin-as-secure" but it is not enough.
I'm also concerned about how to test PWA on the mobile device as I presume I cannot make use of the "unsafely" feature on mobile. I assume this is a common scenario but I am not finding any answers.
You can test your PWA on mobile via chrome developer tools:
the method called remote debugging (works only for android)
open developer tools in mobile - allow usb debugging
connect via usb to laptop or pc
go to chrome dev tools open remote devices
set port forwarding in remote device
run local host in mobile chrome browser.
for detailed info follow : https://developers.google.com/web/tools/chrome-devtools/remote-debugging
this provides localhost in a mobile devices so no need for https or ssl.
I think this is the best way to test your PWA, I have personally used it.
Another working solution than is to use ngrok which will create a live https-server for the project you want (and then you'll be able to access it on your mobile device)
A very simple solution is to install Termux on your Android phone, then use socat to port-forward from a local port to your development host:
socat tcp-l:8000,fork,reuseaddr tcp:192.168.1.170:8000
This will run in the background while the terminal is open. Then in Chrome you can connect over plain HTTP to http://127.0.0.1:8000 and you should get the "Add x to Home screen" notice.
Works great over the local network and no certs, apps or services needed.

How to connect to local host of another machine with android emulator

I am developing an app for android (with react-native) which is running in android studio emulator. This app should connect to a server, but I am in the testing phase and I run the server in a localhost port. but the localhost of another machine (which is in the same network that I am)
let's say the (local) IP of the other machine is 172.17.240.223 and the port which the server is running on is 8080
when I type 172.17.240.223:8080 in my browser (laptop browser), I get the response and there is no problem. Even when I type this in my browser in the emulator I get the response, but this won't happen in app. why is that?
More generally, it's not possible to customize the URL and how the bundle gets loaded. This flexibility is useful to have.
check issue on github here
in this case ,you can use testflight for IOS testing and for android just create apk.

How to test my own ASP.NET Web API in localhost:port using android or Windows Phone device (no simulator)

I'm trying to develop my first REST Service using ASP.NET following this guide.
I'd like to test my services in localhost using my android and wp devices without using android and WP simulator (too slow).
Is there a way to do that?
If you deploy the ASP.NET app on IIS, the services will be reachable as long as the phones are connected on the same network (via Wifi for example). Just use the IP adress of the server instead of localhost.
Another idea is to use fiddler's proxy option. (This also assumes you have set up your app in IIS). Check out this article.
This approach is especially useful if you want to test using custom host headers over SSL.
With this approach you can simulate production dns (by altering hosts file on the fiddler host) rather than using IP addresses and machine names from the mobile device.

Debug Azure web role integrated with ACS from Android emulator web application

I am trying to access a web role integrated with ACS from the Android emulator , the issue is that
during web role debug configuration , the ACS redirects back to "localhost" and not to a real URL.
Android emulator local computer localhost address is defined as 10.0.0.2 so when ACS redirects to localhost the emulator web browser fails to redirect.
I tried to let ACS redirect to 10.0.0.2 - but for some unknown reason it doesnt work.
SO! .... after few hours (50) I tried to use IIS 7 as a reverse proxy using Application Request Routing and to make the Android calls directly to my computers LAN ip address and let IIS to redirect the calls to the Azure local host web role :
So , the emulator calls 10.0.0.3:8081 and IIS7 will redirect it to localhost:8082 (which is the web role).
AND! .... after another few hours (280) , I am still investing so much IT time and cant check my web role.
So , now I am here , and hope that someone with expirence in those subjects can help me out .
Azure btw for those of you who do not know , can not be configured locally to publish itself on the local network and can only operate in localhost mode.
Thank you very much .
Ishai
Problem solved , instead of IIS 7 Application Requet Routing I have used Fiddler 2 Reverse proxy option to forward requests to my localhost web role.
Fiddler 2 is configured to publish itself in the LAN at localComputerIp:8888 - e.g. 10.0.0.3:8888 , so then from Android instead of trying to access 10.0.0.2 (localhost) : 8087 - my Azure web role direct address , I set it to connect to Fiddler direct LAN ip at 10.0.0.3:8888 and Fiddler forwarded the requests to localhost:8087.
This took me alot of time to accomplish and even though it might be simple if you have the right knowledge I hope other users will find this post helpful .

Categories

Resources