如何调试移动特定的移动事件（beta，gamma，alpha）

Question

我刚刚浏览了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，但是我已经看到使用类似于上述代码的插件用于真正的高科技视差模拟。

现在我的问题是，因为很明显这些不能在destop PC上测试，你如何测试这样的代码呢？

Answer 1

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

Answer 2

有多种方式：

• 拥有您和您的手机可以连接的网络服务器。如果某些JS无法正常工作，请检查您PC上的控制台，它将主要告诉您所做的每一个错误。
• @Andrew：使用Google Chrome上的remote debugging
• @choz：如果你只需要轮换，你可以直接进入谷歌浏览器的开发模式[F12]

对于其他问题，值得一看device orientation API。

Answer 3

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

从文档中获取，你有能力：

• 通过模拟不同的屏幕尺寸来测试您的响应式设计 分辨率，包括Retina显示屏。

• 使用网络模拟器评估您网站的效果，而不是 影响到其他标签的流量。

• 可视化并检查CSS媒体查询。

• 准确模拟触摸事件，地理位置和设备方向的设备输入。
• 通过将设备模式与现有的DevTools相结合，增强当前的调试工作流程。

编辑：

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