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

Question

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

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

Answer 1

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

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

1. 获取指向您可以在移动设备上访问的本地服务器上的页面的链接(在移动Safari中测试它是否有效).查看此信息以查找您的本地IP地址如何从iPhone浏览器访问在localhost上运行的网站.看起来像 http://192.xxx.1.127:3000/facebook-test

2. 在您的Facebook页面上发布该链接(您可以将其设为私有,以便您的朋友不像WTF一样？)

3. 点击Facebook移动应用中的发布链接,它将在Facebook的移动浏览器中打开

4. 由于您没有控制台,因此您基本上需要将调试语句直接打印到页面以使其可见.将调试语句放在代码中.如果您的问题主要与CSS有关,那么您可以迭代地注释掉东西,直到找到问题或使用JavaScript打印相关的CSS属性.例如(使用JQuery)

   function debug(str){$('body').append("<br>"+ str);}

5. 可能是最痛苦的部分.Facebook浏览器非常积极地缓存.如果您正在进行更改而没有发生任何事情,那是因为内容已缓存.您有时可以通过更新URL来解决此问题,例如/ facebook-test-1,/ facebook-test-2,或添加虚拟参数,例如/ facebook-test？dummy = 1.但如果更改在外部css或js表中,它有时仍会缓存.要100%清除缓存,请从移动设备中删除Facebook App并重新安装.

Answer 2

我找到了一种如何更轻松地调试它的方法。您将需要安装Ghostlab 应用程序（您可以在那里免费试用 7 天，但完全值得付费）。

1. 在 Ghostlab 中，添加要调试的网站地址（或本地主机地址）并启动会话。
2. Ghostlab 将生成一个访问链接。
3. 复制该链接并将其发布到 Facebook（作为私人帖子）
4. 在手机上打开链接，就是这样！一旦您打开该链接，Ghostlab 将识别您，并允许您调试页面。

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

Answer 3

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

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