facebook - 如何在 Facebook 内部浏览器(移动)上进行调试？

Question

我正在开发具有大量 HTML5 和 CSS3 功能的网站。我还使用 iframe 在我的网站上嵌入了一些内容。如果我使用 Chrome/Firefox/Safari 移动浏览器打开它，它工作正常。但是，如果我在 Facebook 上分享(帖子/页面)并使用 Facebook 内部浏览器使用 Facebook 应用程序打开它，我的网站就会一团糟。

是否有任何工具或方法可以在 Facebook 浏览器上进行调试？谢谢。

Answer 1

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

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

1. 获取本地服务器页面的链接，您可以在移动设备上访问该页面(在移动 safari 中测试它是否有效)。查看此内容以查找您的本地 IP 地址 How do you access a website running on localhost from iPhone browser .它看起来像这样 http://192.xxx.1.127:3000/facebook-test

2. 在您的 Facebook 页面上发布该链接(您可以将其设为私有(private)，这样您的 friend 就不会像 WTF 一样？)

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

4. 由于您没有控制台，您基本上需要将调试语句直接打印到页面以使其可见。将调试语句放在整个代码中。如果您的问题主要与 CSS 相关，那么您可以反复注释掉某些内容，直到找到问题或使用 JavaScript 打印相关的 CSS 属性。例如(使用 JQuery)

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

5. 很可能是最痛苦的部分。 Facebook 浏览器缓存非常积极。如果您正在进行更改但什么也没有发生，那是因为内容已缓存。您有时可以通过更新 URL(例如/facebook-test-1、/facebook-test-2)或添加虚拟参数(例如/facebook-test?dummy=1)来解决此问题。但如果更改是在外部 css 或 js 工作表中，它有时仍会缓存。要 100% 清除缓存，请从您的移动设备中删除 Facebook 应用程序并重新安装。