如何调试只出现在真机上的bug？

Question

我的网站在桌面版和 DevTools 手机模拟器上运行良好。

但是在真机iPhone 11中运行，点击元素时，点击事件似乎没有触发。我需要再次点击然后网站才会响应。

这只会出现在真机上，不会出现在DevTools手机模拟器上。我该如何调试代码来解决问题？

谢谢

Answer 1

方法多种多样

1. 使用像 Browserstack/Lamdatest 这样的服务 https://www.browserstack.com/ https://www.lambdatest.com/

他们有各种设备，包括 android/ios/windows/Linux/mac，您可以在其中测试网络应用程序。

2. 带有模拟器的macOS。

3. 具有真实设备的 MacOS 可以通过在设备设置中启用检查员模式来通过 safari/xCode 进行调试。 https://developer.apple.com/safari/tools/

Answer 2

我厌倦了所有这些障碍、插件、付费服务来做一些应该简单的事情。

所以我做了这个简单的JS代码，你可以随意编辑：

var debuggerEl;
function debug(m){
    if(!debuggerEl){
        debuggerEl = document.createElement("div");
        document.body.appendChild(debuggerEl);
    }
    debuggerEl.innerHTML = debuggerEl.innerHTML + "<br/>" + m;
}
console.log = m => debug("LOG: " + m);
console.error = m => debug("ERROR: " + m);
console.exception = m => debug("EXCEPT: " + m);
console.warn = m => debug("WARN: " + m);