如何在Facebook内部浏览器（手机）上进行调试？ [英] How to debug on Facebook Internal Browser (Mobile)?

问题描述

我正在开发具有大量HTML5和CSS3功能的网站。我也在使用iframe在我的网站上嵌入多个内容。如果我使用Chrome / Firefox / Safari手机浏览器打开它，它可以正常工作。但是，如果我在Facebook（post / page）上分享，并且通过Facebook内部浏览器打开Facebook应用程序，我的网站就被搞砸了。

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

解决方案

这是你可以自己做调试的方式。这是痛苦的，但是我到目前为止唯一的方法。

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

1. 获取链接您的本地服务器上可以在移动设备上访问的页面（在移动Safari中进行测试）。看到这个，找出您的本地IP地址如何从iPhone浏览器访问localhost上运行的网站。它将看起来像这样
   http：//192.xxx.1.127：3000 / facebook -test




2. 在您的Facebook页面上发布该链接（您可以将其设为不公开，以便您的朋友不像WTF） p>




3. 点击Facebook手机应用程序中发布的链接，并在Facebook的手机浏览器中打开



4. p>由于您没有控制台，您基本上需要将调试语句直接打印到页面，以便可见。将调试语句放在你的代码之上。如果您的问题主要与CSS有关，那么您可以迭代地注释掉东西，直到找到问题或使用JavaScript打印相关的CSS属性。例如（使用JQuery）
   
   
   

   function debug（str）{$（'body'）。append（< br>+ str）;} p>




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

I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.

Is there any tools or way to debug on Facebook Browser? Thanks.

解决方案

This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.

tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.

1. Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this http://192.xxx.1.127:3000/facebook-test

2. Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)

3. Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser

4. Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)

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

5. Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.

这篇关于如何在Facebook内部浏览器（手机）上进行调试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！