B4J Tutorial [BANAno] Debugging your SPA-PWA on an Actual Device: Android Phones

Discussion in 'B4J Tutorials' started by Mashiane, Oct 29, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    I recently had an issue. My app was working perfectly on the desktop and any other device except the mobile devices.

    Using google chrome i found this extension named Inspect Devices

    https://chrome.google.com/webstore/detail/inspect-devices/pjpobmgdbnbegggcdgbljfgplleejmkb?hl=en

    InspectDevices.png

    To see this working on android devices

    1. Go to device settings and activate developer mode.
    2. Turn on usb debugging.
    3. Install the above extension on Google Chrome
    4. Connect your device via USB
    5. Click Inspect Devices extension
    6. Accept the security prompt on your phone.
    7. Open the URL on your device that you wish to debug/test

    If all goes well now you should be seeing a screen like this...

    inspect1.png

    This is listing all the open tabs on my device in the google browser. You need to select the tab you need to inspect. To do so click "Inspect" under the tab you need.

    To demo this I will open the B4X page on my listing above..

    console.png

    Now on the right section of the screen you can click 'Console' and see whatever is happening on the device console and then be able to debug your app.

    So what really happened?

    1. My app used php and on the desktop everything worked fine
    2. On my device each time I clicked the login button, it didnt fire at all. So Im facing a dilemna, the app works on the PC but not on the device. WT??
    3. Anyway this helped me find where the issue was. PHP was not loading on the device. Reason was:

    Code:
    BANano.PHPHost = $"http://localhost/${AppName}/"$
    NB: NEVER EVER USE localhost there. Why? You are going to get a connection refused error on mobile devices whilst your PC will work well.

    As soon as I changed this to the IP address / Name of my server, the code on my device worked.

    I then remembered that in one of the tuts I did I mentioned this fact. I forgot, ha ha ha. Anyway that forgetting helped me find this "Inspect Devices" jewel.

    Happy Coding.
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice