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 WebInspector

您将需要一个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 。

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

从菜单栏Develop -> Simulator or Iphone -> Your Page中选择野生动物园

在开发人员工具栏中，打开指南中显示的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请求的状态？

2 个答案: