【问题标题】:How do I check status of my Ajax request running on my iPhone Safari?如何检查在 iPhone Safari 上运行的 Ajax 请求的状态?
【发布时间】:2019-09-09 04:07:36
【问题描述】:

我在我的网站上加载了这段代码

<!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 无法识别的任何旧语法?

如何进一步调试?

【问题讨论】:

标签: javascript iphone ajax debugging safari


【解决方案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运行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:

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

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

  1. 从菜单栏中选择 safari Develop -&gt; Simulator or Iphone -&gt; Your Page

在开发者工具栏中打开Timelines/Network Request 或Network(如指南中所示)以检查您的网络请求

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

当我使用xcode 构建项目时,我还可以从 xcode 中的手机查看控制台日志

【讨论】:

  • 感谢您的详细回答
  • @kyo 我仍然可以获取更多信息。谢谢
  • 你运行的是什么 XCode 版本?我在 XCode 10 上,根本看不到您建议的窗口。
  • @kyo 我在 Mac Os High Sierra 10.13.6 和 Xcode 10 上测试了自己。我添加了更多信息以帮助您解决问题。我也很难理解具有误导性的指南。谢谢
【解决方案2】:

根据您的问题,我了解到您希望能够在移动设备而不是台式机上进行调试?如果您使用的是 iPhone 7 或更高版本,WebInspector 可以在iPhone settings 中打开。

转到Settings&gt; Safari&gt; Advanced(位于屏幕底部),那里有一个开关,您可以在其中打开 WebInspector。这样您就可以在 iPhone 上阅读您的控制台。

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

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

希望对你有帮助

【讨论】:

  • 谢谢你,我会按照你的步骤,今天晚些时候。
猜你喜欢
  • 2011-03-10
  • 1970-01-01
  • 2013-10-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-04
  • 2021-02-24
  • 1970-01-01
相关资源
最近更新 更多