How do I check status of my Ajax request running on my iPhone Safari?

Question

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?

Have you tried to alert a message in your `error` section of your `ajax` call instead of `console.log`? — pouyan, Apr 22 '19 at 22:06
Can use Safari WebInspector. You can also check: https://github.com/liriliri/eruda — hackape, Apr 23 '19 at 19:19
@pouyan I added the alert as you suggested. I see this ; https://i.imgur.com/mruOiYw.jpg — code-8, Apr 23 '19 at 19:41
https://stackoverflow.com/questions/2000609/jquery-ajax-status-code-0 — Fabrizio Bertoglio, Apr 23 '19 at 20:29
as described below you could run the iphone simulator tools, the webinspector and open xcode to display the simulator log. The simulator log could include network request errors and additional information https://stackoverflow.com/a/24892230/7295772 — Fabrizio Bertoglio, Apr 23 '19 at 20:33
@kyo, So at first it means that your ajax code is firing but with an error. And I think the link that Fabrizio has mentioned is a good reference to find out your problem. — pouyan, Apr 24 '19 at 03:41

Fabrizio Bertoglio · Accepted Answer · 2019-04-26T10:49:33.877

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:

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.
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.

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

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.

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

What XCode version are you running ? I am on XCode 10, I don't see the windows you are suggesting at all. — code-8, Apr 25 '19 at 13:01
@kyo I tested myself on Mac Os High Sierra `10.13.6` and Xcode `10`. I added more information to help you troubleshoot your issue. I also struggled understanding the guide which is misleading. Thanks — Fabrizio Bertoglio, Apr 26 '19 at 10:34

score 4 · Answer 2 · answered Apr 25 '19 at 15:10

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

Thank-you I will follow your steps, later on today. – code-8 Apr 25 '19 at 15:41 — code-8, Apr 25 '19 at 15:41

How do I check status of my Ajax request running on my iPhone Safari?

2 Answers2

Linked