enter image description here

I have this code loaded on my site

<!DOCTYPE html>
<html lang="en">

<head>
    <title>fingerprinting</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <h1>page loaded.</h1>
    <h1 id="model"></h1>


    <script type="text/javascript">

        // console.log(window);
        function getIPhoneModel() {
            // Create a canvas element which can be used to retrieve information about the GPU.
            var canvas = document.createElement("canvas");
            if (canvas) {
                var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
                if (context) {
                    var info = context.getExtension("WEBGL_debug_renderer_info");
                    if (info) {
                        var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
                    }
                }
            }

            // iPhone X
            if ((window.screen.height / window.screen.width == 812 / 375) && (window.devicePixelRatio == 3)) {
                return "iPhone X";
            } else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 3)) {
                return "iPhone XS Max";
            } else if ((window.screen.height / window.screen.width == 896 / 414) && (window.devicePixelRatio == 2)) {
                return "iPhone XR";
            } else if ((window.screen.height / window.screen.width == 1024 / 768) && (window.devicePixelRatio == 2)) {
                return "iPad 4";
            }
            else if ((window.screen.height / window.screen.width == 736 / 414) && (window.devicePixelRatio == 3)) {
                switch (renderer) {
                    default:
                    return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus";
                    case "Apple A8 GPU":
                    return "iPhone 6 Plus";
                    case "Apple A9 GPU":
                    return "iPhone 6s Plus";
                    case "Apple A10 GPU":
                    return "iPhone 7 Plus";
                    case "Apple A11 GPU":
                    return "iPhone 8 Plus";
                }
                // iPhone 6+/6s+/7+ and 8+ in zoom mode
            } else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 3)) {
                switch(renderer) {
                    default:
                    return "iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus (display zoom)";
                    case "Apple A8 GPU":
                    return "iPhone 6 Plus (display zoom)";
                    case "Apple A9 GPU":
                    return "iPhone 6s Plus (display zoom)";
                    case "Apple A10 GPU":
                    return "iPhone 7 Plus (display zoom)";
                    case "Apple A11 GPU":
                    return "iPhone 8 Plus (display zoom)";
                }
                // iPhone 6/6s/7 and 8
            } else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 2)) {
                switch(renderer) {
                    default:
                    return "iPhone 6, 6s, 7 or 8";
                    case "Apple A8 GPU":
                    return "iPhone 6";
                    case "Apple A9 GPU":
                    return "iPhone 6s";
                    case "Apple A10 GPU":
                    return "iPhone 7";
                    case "Apple A11 GPU":
                    return "iPhone 8";
                }
                // iPhone 5/5C/5s/SE or 6/6s/7 and 8 in zoom mode
            } else if ((window.screen.height / window.screen.width == 1.775) && (window.devicePixelRatio == 2)) {
                switch(renderer) {
                    default:
                    return "iPhone 5, 5C, 5S, SE or 6, 6s, 7 and 8 (display zoom)";
                    case "PowerVR SGX 543":
                    return "iPhone 5 or 5c";
                    case "Apple A7 GPU":
                    return "iPhone 5s";
                    case "Apple A8 GPU":
                    return "iPhone 6 (display zoom)";
                    case "Apple A9 GPU":
                    return "iPhone SE or 6s (display zoom)";
                    case "Apple A10 GPU":
                    return "iPhone 7 (display zoom)";
                    case "Apple A11 GPU":
                    return "iPhone 8 (display zoom)";
                }
                // iPhone 4/4s
            } else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 2)) {
                switch(renderer) {
                    default:
                    return "iPhone 4 or 4s";
                    case "PowerVR SGX 535":
                    return "iPhone 4";
                    case "PowerVR SGX 543":
                    return "iPhone 4s";
                }
                // iPhone 1/3G/3GS
            } else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 1)) {
                switch(renderer) {
                    default:
                    return "iPhone 1, 3G or 3GS";
                    case "ALP0298C05":
                    return "iPhone 3GS";
                    case "S5L8900":
                    return "iPhone 1, 3G";
                }
            } else {
                return "Not an iPhone";
            }
        }

        var model = getIPhoneModel()
        console.log(model);

        $('#model').text(model);

        var currentUrl = window.location.href;
        var newUrl = currentUrl.replace("fingerprinting", "fingerprinting/tasks");

        // alert(newUrl);

        $.ajax({
            method: 'POST',
            url: "{{ $APP_URL }}fingerprinting/store",
            data: {'original_uri':'{!! $original_uri !!}', 'model' : model,},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response){
                console.log(response);
                window.location.href = newUrl;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });


    </script>

    <h1>JS finished loaded.</h1>

</body>

</html>

I have Ajax in the bottom of the page. I am sure why is it not triggering on iPhone Safari. or maybe it is being executed, but there are some errors.

Note :

  • that same code on Chrome or Safari on Mac OS X. ✅
  • Ajax does triggered, and working fine. ✅

Ajax does not seem to trigger on iPhone Safari

Am I using any old syntax that Safari on iPhone not recognize ?

How would one go about and debug this further?

2 Answers

6
Fabrizio Bertoglio On Best Solutions

You can use the Safari WebInspector

You will need a Mac with Xcode installed.

You need to run your server locally on your ip. Open your terminal and run ifconfig, find your ip and either copy enp1s0 for the ethernet or wlp2s0 for the wifi.

~ $ ifconfig
enp1s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.1.38  netmask 255.255.255.0  broadcast 192.168.1.255

wlp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.1.6  netmask 255.255.255.0  broadcast 192.168.1.255

run your server with your website on this ip. With rails I run rails server -b 192.168.1.38 -p 3000, -b stands for ip binding and -p for port.

Open Xcode and start a new emulator or connect your device via usb.

Follow this instructions to open http://192.168.1.38:3000 on your iphone emulator.

In case you struggle configuring your iphone for debugging remember this important steps from the instructions:

  1. The Webinspector option needs to be enabled ONLY if you are using USB DEVICE. You don't need to flag this option on the simulator device. I don't have it on the simulator and I was able to run the webinspector.
  2. After running the simulator and opening a page with the mobile safari browser, you need to open your DESKTOP safari browser and enable Develop in the menu bar by checking Show develop menu in menu bar.

If you can’t see "Develop" in the menu bar, go to the menu bar and click "Safari > Preferences > Advanced" and select the "Show develop menu in menu bar" checkbox.

enter image description here

  1. Select safari, from the menu bar Develop -> Simulator or Iphone -> Your Page

enter image description here

In the developer toolbar open the Timelines/Network Request or Network as displayed in the guide to check your network request

Check your server logs to see if the backend is receiving the AJAX requests or check your phone simulator log as you may see some errors, related to certificates or other reasons. You'll have to research online for a solution to those errors.

enter image description here

when I build the project with xcode, I am also able to see the console log from from the phone inside xcode

enter image description here

4
Rachel Gallen On

From your question, I understand that you want to be able to debug on a mobile device rather than a desktop? If you are using an iPhone 7 or later, there is a WebInspector that can be turned on in the iPhone settings.

Go to Settings> Safari> Advanced (it's at the bottom of the screen) and there is a toggle there where you can turn your WebInspector on. This way you can read your console on your iPhone.

The 'WebInspector' was new with iPhone 7; older iPhones (6 or under) used a 'DebugConsole' which can be accessed in the same way through the Settings menu. The advantage of the WebInspector is that you can show the webinspector in your desktop safari when the iPhone is connected to your Mac. (Select 'Develop'>'Show WebInspector' from the Safari menu.

Both the debug console and web inspector are disabled by default so you need to enable them

hope this helps