如何检查在我的iPhone Safari上运行的Ajax请求的状态？

Question

我在我的网站上加载了此代码

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

我在页面底部有Ajax。我确定为什么它不会在iPhone Safari上触发。或者它正在执行，但有一些错误。

注意：

Mac OS X上Chrome或Safari上的相同代码.✅
Ajax确实触发了，并且工作正常。 ✅

Ajax似乎没有在iPhone Safari上触发

我使用iPhone上的Safari无法识别的任何旧语法吗？

如何进行并进一步调试？

Answer 1

您可以使用Safari Web Inspector

你需要一个与Mac的Xcode installed。

您需要在ip上本地运行服务器。打开你的终端并运行ifconfig，找到你的IP并复制enp1s0为ethernet或wlp2s0为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

在这个ip上用你的网站运行你的服务器。有轨道我运行rails server -b 192.168.1.38 -p 3000，-b代表ip binding和-p代表港口。

打开Xcode和start a new emulator或通过USB连接您的设备。

按照this instructions在你的iphone模拟器上打开http://192.168.1.38:3000。

如果您在配置iphone进行调试时遇到困难，请记住this important steps from the instructions：

只有在使用USB DEVICE时才需要启用Webinspector选项。您无需在模拟器设备上标记此选项。我don't have it on the simulator和我能够运行webinspector。
运行模拟器并使用移动safari浏览器打开页面后，您需要打开DESKTOP safari浏览器并通过检查Develop在菜单栏中启用Show develop menu in menu bar。

如果在菜单栏中看不到“Develop”，请转到菜单栏并单击“Safari>首选项>高级”，然后选择“在菜单栏中显示开发菜单”复选框。

从菜单栏Develop -> Simulator or Iphone -> Your Page中选择safari

在开发人员工具栏中，打开指南中显示的Timelines/Network Request或Network以检查您的网络请求

检查服务器日志以查看后端是否收到AJAX请求或检查phone simulator日志，因为您可能会看到与证书或其他原因相关的一些错误。您必须在线研究这些错误的解决方案。

当我使用xcode构建项目时，我也能够从xcode中的手机中看到控制台日志

Answer 2

从您的问题，我了解您希望能够在移动设备而不是桌面上进行调试？如果您使用的是iPhone 7或更高版本，可以在WebInspector中打开iPhone settings。

转到Settings> Safari> Advanced（它位于屏幕的底部），然后在那里可以打开WebInspector。这样您就可以在iPhone上阅读控制台了。

'WebInspector'是iPhone 7的新功能;较旧的iPhone（6或以下）使用'DebugConsole'，可通过“设置”菜单以相同方式访问。 WebInspector的优点是，当iPhone连接到Mac时，您可以在桌面游戏中显示webinspector。（从Safari菜单中选择“开发”>“显示WebInspector”。

默认情况下，调试控制台和Web检查器都处于禁用状态，因此您需要启用它们

希望这可以帮助

如何检查在我的iPhone Safari上运行的Ajax请求的状态？

问题描述投票：5回答：2

2个回答

最新问题

如何检查在我的iPhone Safari上运行的Ajax请求的状态？

问题描述 投票：5回答：2

2个回答

最新问题

问题描述投票：5回答：2