如何调试特定于移动设备的运动事件（beta、gamma、alpha）答案

【问题标题】：How to debug mobile specific movement events (beta, gamma, alpha)如何调试特定于移动设备的运动事件（beta、gamma、alpha）
【发布时间】：2016-02-06 11:24:32
【问题描述】：

我刚刚浏览了particle.js的代码，遇到了以下几行代码：

if (orientationSupport && !desktop) {
          // Map tiltX range [-30,30] to range [0,winW]
          var ratioX = (winW - 0) / (30 - -30);
          pointerX = (tiltX - -30) * ratioX + 0;
          // Map tiltY range [-30,30] to range [0,winH]
          var ratioY = (winH - 0) / (30 - -30);
          pointerY = (tiltY - -30) * ratioY + 0;
        } else {
          pointerX = mouseX;
          pointerY = mouseY;
        }

以上几行代码可以在HERE找到。

现在这个特定的插件仅将这些移动特定事件用于微小的 parallax.js，但我已经看到使用与上述类似的代码进行真正高科技视差模拟的插件。

现在我的问题是，因为显然这些无法在桌面 PC 上测试，你如何测试这样的代码？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以在 PC 上使用 Chrome 控制台调试移动 Chrome。这是如何连接它的链接：https://developer.chrome.com/devtools/docs/remote-debugging

【讨论】：

【解决方案2】：

有多种方式：

拥有您和您的手机可以连接的网络服务器。如果某些 JS 不起作用，请检查您 PC 上的控制台，它会告诉您您所做的每个错误。
@Andrew：在谷歌浏览器上使用remote debugging
@choz: 如果你只需要旋转，你可以在谷歌浏览器中进入开发模式 [F12]

其他问题值得关注device orientation API。

【讨论】：

是的！我不确定手机是否有控制台，或者如果它有控制台会有多好！不过谢谢！我试试看。
手机没有控制台，所以你必须在那里盲目地测试它，如果有些东西不起作用，你必须在你的电脑上检查它。

【解决方案3】：

在 chrome 中，您可以通过按 Ctrl + Shift + M 来使用 Toggle Device Mode。

根据文档，您可以：

通过模拟不同的屏幕尺寸和测试您的响应式设计分辨率，包括 Retina 显示屏。
使用网络模拟器评估站点的性能，无需影响到其他标签的流量。
可视化和检查 CSS 媒体查询。
针对触摸事件、地理位置和设备方向准确模拟设备输入。
通过将设备模式与现有 DevTools 相结合，增强您当前的调试工作流程。

编辑：

您可以根据需要更改为各种定向模式。

【讨论】：

这个模式可以改变设备的旋转吗？提示：没有。
@timmyRS 是，您可以更改设备方向。
从什么时候开始的？我经常使用 chrome dev.-mode O.o
@timmyRS 自版本32
@timmyRS 您甚至没有阅读第 4 点或在确认之前尝试使用开发工具。将添加屏幕截图以确认这一点。