如何在Facebook内部浏览器(手机)上进行调试？

Question

我正在开发具有许多HTML5和CSS3功能的网站。我还使用iframe在我的网站上嵌入了几个内容。如果我使用Chrome/Firefox/Safari移动浏览器打开它，它工作得很好。然而，如果我在facebook上分享(post/page)，并用Facebook内部浏览器打开Facebook应用程序，我的网站就会一团糟。

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

Answer 1

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

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

1. 获取本地服务器上页面的链接，您可以在移动设备上访问该页面(在mobile safari中测试，它可以工作)。查看此以查找您的本地IP地址How do you access a website running on localhost from iPhone browser。它看起来就像你Facebook页面上的这个http://192.xxx.1.127:3000/facebook-test
2. Post链接(你可以把它设置成私人的，这样你的朋友就不会都像WTF那样了？)
3. 点击Facebook移动应用中发布的链接，它就会在Facebook的移动应用中打开你没有控制台，你基本上需要直接把调试语句打印到页面上，这样它就是可见的。把调试语句放在你的代码上。如果您的问题主要与CSS有关，那么您可以迭代注释掉内容，直到找到问题为止，或者使用JavaScript打印相关的CSS属性。例如(使用JQuery)

函数debug(str){$('body').append(""+str);}

• Quite可能是最痛苦的部分。Facebook浏览器缓存的速度非常快。如果您正在进行更改，但什么也没有发生，这是因为内容被缓存了。你有时可以通过更新URL来解决这个问题，比如/facebook-test-1，/facebook-test-2，或者添加虚拟参数比如/facebook-test? dummy =1。但是如果更改是在外部css或js表中进行的，它有时仍然会缓存。要100%清除缓存，请从移动设备上删除脸书应用程序，然后重新安装。

Answer 2

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

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

Answer 3

我找到了一种更容易调试它的方法。你需要安装Ghostlab app (你有7天的免费试用，但这是完全值得的)。

在Ghostlab中，添加你想要调试的网站地址(或本地主机地址)，然后启动session.

• Ghostlab将生成一个用于访问的链接。

• 复制该链接并将其发布到Facebook (作为私人帖子)

• 在移动设备上打开该链接，就是这样！一旦您打开该链接，Ghostlab就会识别您，并允许您调试页面。

对于调试，您将拥有与Chrome devtools中相同的所有工具(这是多么酷！)。例如，您可以调整CSS并查看实时应用的更改。