Question

我正在开发具有大量HTML5和CSS3功能的网站。我也使用iframe在我的网站上嵌入了几个内容。如果我使用Chrome / Firefox / Safari移动浏览器打开它，它可以正常工作。但是，如果我在Facebook上分享（帖子/页面）并且我使用Facebook内部浏览器的Facebook应用程序打开它，我的网站搞砸了。

在Facebook浏览器上有调试工具或方法吗？感谢。

Answer 1

这是您自己进行调试的方法。这很痛苦，但到目前为止我遇到的唯一方法。

tl; dr获取Facebook应用程序加载本地服务器上的页面，以便您可以快速迭代。然后直接将调试语句打印到页面，直到你弄清楚发生了什么。

获取本地服务器上您可以在移动设备上访问的页面的链接（在移动版Safari中测试它是否有效）。请参阅此内容以查找您的本地IP地址How do you access a website running on localhost from iPhone browser。它看起来像这样 http://192.xxx.1.127:3000/facebook-test
在您的Facebook页面上发布该链接（您可以将其设为私有，以便您的朋友不像WTF一样？）
点击Facebook移动应用中的发布链接，它将在Facebook的移动浏览器中打开
由于您没有控制台，因此您基本上需要将调试语句直接打印到页面以使其可见。将调试语句放在代码中。如果您的问题主要与CSS有关，那么您可以迭代地注释掉东西，直到找到问题或使用JavaScript打印相关的CSS属性。例如（使用JQuery）

function debug（str）{$（'body'）。append（“＆lt; br＆gt;”+ str）;}
可能是最痛苦的部分。 Facebook浏览器非常积极地缓存。如果您正在进行更改而没有发生任何事情，那是因为内容已缓存。您有时可以通过更新URL来解决此问题，例如/ facebook-test-1，/ facebook-test-2，或添加虚拟参数，例如/ facebook-test？dummy = 1。但如果更改在外部css或js表中，它有时仍会缓存。要100％清除缓存，请从移动设备中删除Facebook应用程序并重新安装。

Answer 2

Facebook应用程序使用的内部浏览器本质上是一个uiWebView。 Paul Irish制作了一个简单的iOS应用程序，可以将任何URL加载到uiWebView中，然后您可以使用Safari的开发人员工具进行调试。

https://github.com/paulirish/iOS-WebView-App

Answer 3

我找到了一种调试起来更容易的方法。您将需要安装Ghostlab app（您在那里有7天的免费试用期，但是完全值得付费）。

在Ghostlab中，添加要调试的网站地址（或本地主机地址）并启动会话。
Ghostlab将生成一个访问链接。
复制该链接并将其发布在Facebook上（作为私人帖子）
在移动设备上打开链接就可以了！打开该链接后，Ghostlab将识别您的身份，并允许您调试页面。

要进行调试，您将拥有与Chrome devtools中相同的所有工具（这太酷了！）。例如，您可以调整CSS并实时查看更改。

Answer 4

如果要调试可能的错误，可以尝试捕获并显示它。

将其放在代码的最顶部：

window.onerror = function (msg, url, lineNo, columnNo, error) {
    var string = msg.toLowerCase();
    var substring = "script error";
    if (string.indexOf(substring) > -1){
        alert('Script Error: See Browser Console for Detail');
    } else {
        var message = [
            'Message: ' + msg,
            'URL: ' + url,
            'Line: ' + lineNo,
            'Column: ' + columnNo,
            'Error object: ' + JSON.stringify(error)
        ].join(' - ');

        alert(message);
    }
}

（来源：MDN）

这将捕获并alert错误。

（私下）在Facebook上共享链接，或者在Facebook Messenger（更便捷）上向自己发送消息。要中断缓存，请每次创建一个新的URL，例如通过将随机字符串附加到URL。

点击链接，查看是否可以找到任何错误。

Answer 5

借助ngrok创建临时的http和https地址，而不是普通的localhost：3000（或其他端口），您可以在任何设备上运行应用。使用。
并且正如在所有其他有用信息之前所写的那样，您应该在div元素中的某个位置写一些内容（在React的情况下，我建议通过强制更新或其他获取信息的功能将div放在onClick上，有时会有所帮助，因为FB中的JS可能会比您的信息出现时执行得更快）。请记住，警报不可靠，有时会被阻止
奖励，在控制台中，您将看到哪些文件是请求和响应代码（它将代替缺少网络标签）
以及有关iFrame的信息。如果您在其他域上使用它并且依赖Cookie，则应该知道Facebook应用内浏览器会阻止第三方Cookie
分别在Android和iOS上进行测试，因为从技术上讲，它们使用不同的浏览器

如何在Facebook内部浏览器（手机）上调试？

5 个答案: