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.
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
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
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);}
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.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
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);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
I have an application that registers a new URL scheme when it's installed and I'm looking for a reliable way to launch this application from our web interface.
Right now I have an IFrame hidden away which I will update it's source after a button is clicked to launch the application, but it seems that in Internet Explorer the parent window always captures the URL scheme not recognized error and navigates to the location it can't understand anyway.
So my question: Is there a way for a programmer to check to see if a scheme is supported by a browser before attempting to navigate to the new URI to direct a user to download the application first?
You cannot check for URL schemes installed on the device.
What you can do is this:
setTimeout(function () { window.location = "appCustomUrlSchemeHere"; }, 25);
window.location = "fallbackUrlHere";
But I imagine that will still cause issues in IE as it will attempt to open the URL scheme.
I tried calling:
Application.ExternalEval("UnityObject2.instances[0].getUnity().SendMessage('GameObjectName', 'SomeFunctionHere', document.URL);");
Which works great, but it could only retrieve the frame's url (it is a very long random html link) instead of the outer top most like https://apps.facebook.com/appnamehere. I also tried window.top.location.href but it gives me a security error since it wasn't allowed.
I need to process the url before I even init, so I cannot use fb's deeplink or anything like that. Any ideas on how to get the url? I'm using 5.0.4 of the SDK on Facebook Canvas.
Because of cross-domain security, it isn't possible to get the top url.
I am doing the following, but it is not playing:
var url = "http://translate.google.com/translate_tts?q=Whatismyname";
audio_obj = new Audio(url);
audio_obj.play();
If I use a URL that ends with .mp3, it plays fine. If I use Google TTS service, then it doesn't play. Could anyone please tell me how to make it work with Google TTS?
To solve this problem, you need to close all Chrome windows, open the chrome window by using the following on command prompt. /path to your chrome.exe/Chrome --no-referrers & This will allow the javascript to use urls that do not end with file extensions.
(from user1401976's comment)
From a Spotify app I want to communicate with a native application that has been registered with a custom URL scheme. I am testing with a clickable anchor tag
open custom url scheme
as well as javascript code
location.href = "myscheme:/test";
which both work fine from any browser. At first, nothing happened when I clicked the link/ran the JavaScript in Spotify. After extending the permissions in manifest.json to
"RequiredPermissions": [
"https://*",
"http://*",
"myscheme:/*"
]
I am getting this page in the content view for both cases (click and JS)
<head></head>
<body>Error -302 when loading url myscheme:/test</body>
and the console output says
I [mainview:6886] Load complete (1) url:
I [mainview:6886] Load complete (0) url: cef-error:
Update: For the scheme mailto: this seems to work just fine. Even without an explicit entry to RequiredPermissions.
Update 2: In more recent versions (e.g. 0.8.4.124) clicks on links with custom URIs have no effect to the content anymore. The log states:
W [CefAppInstance.cpp:49 ] App spotify:app:tutorial is not allowed to access resource: myscheme:/test
The mailto: still to works without explicit RequiredPermissions.
Do you have any idea?
Unfortunately, as far as I'm aware this isn't supported in the Apps API.