web-dev-qa-db-fra.com

Comment déboguer sur le navigateur interne de Facebook (Mobile)?

Je développe un site Web avec de nombreuses fonctionnalités HTML5 et CSS3. J'utilise également iframe pour intégrer plusieurs contenus sur mon site Web. Cela fonctionne bien si je l'ouvre à l'aide du navigateur mobile Chrome/Firefox/Safari. Cependant, si je partage sur Facebook (poste/page) et que je l'ouvre avec l'application Facebook avec le navigateur interne de Facebook, mon site Web est en ruine. 

Existe-t-il des outils ou des moyens de déboguer sur le navigateur Facebook? Merci.

facebook
22
Eldwin Eldwin

C'est comment vous pouvez faire le débogage vous-même. C'est douloureux, mais c'est le seul moyen que j'ai rencontré jusqu'à présent. 

tl; dr Obtenez l’application Facebook en chargeant une page sur votre serveur local pour pouvoir itérer rapidement. Imprimez ensuite les instructions de débogage directement sur la page jusqu'à ce que vous sachiez ce qui se passe.

  1. Obtenez un lien vers une page de votre serveur local à laquelle vous pouvez accéder sur votre appareil mobile (testez dans Safari mobile qu'il fonctionne). Consultez cette section pour connaître votre adresse IP locale Comment accéder à un site Web exécuté sur localhost à partir du navigateur iPhone . Cela ressemblera à quelque chose comme ceci http: //192.xxx.1.127: 3000/facebook-test

  2. Publiez ce lien sur votre page Facebook (vous pouvez le rendre privé pour que vos amis ne ressemblent pas tous à la WTF?)

  3. Cliquez sur le lien affiché dans l'application mobile Facebook et celui-ci s'ouvrira dans le navigateur mobile de Facebook.

  4. Puisque vous n'avez pas de console, vous devez en principe imprimer les instructions de débogage directement sur la page afin qu'elles soient visibles. Mettez des instructions de débogage sur tout votre code. Si vos problèmes sont principalement liés aux CSS, vous pouvez alors commenter itérativement des choses jusqu'à ce que vous ayez trouvé le (s) problème (s) ou imprimer les attributs CSS appropriés à l'aide de JavaScript. Par exemple, quelque chose comme (en utilisant JQuery)

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

  5. Très probablement la partie la plus douloureuse. Le navigateur Facebook met en cache de manière très agressive. Si vous apportez des modifications et que rien ne s'est passé, c'est que le contenu est mis en cache. Vous pouvez parfois résoudre ce problème en mettant à jour les URL, par exemple/facebook-test-1,/facebook-test-2, ou en ajoutant des paramètres factices, par exemple/facebook-test? Dummy = 1. Mais si les modifications concernent des feuilles externes css ou js, il est parfois mis en cache. Pour vider le cache à 100%, supprimez l'application Facebook de votre appareil mobile, puis réinstallez-la.

20
AllTheCodez

Le navigateur interne utilisé par l'application Facebook est essentiellement un uiWebView. Paul Irish a créé une application iOS simple qui vous permet de charger n'importe quelle URL dans un uiWebView que vous pouvez ensuite déboguer à l'aide des outils de développement de Safari.

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

5
Simen Brekken

J'ai trouvé un moyen de déboguer plus facilement. Vous aurez besoin d'installer l'application Ghostlab (vous disposez d'un essai gratuit de 7 jours, mais cela vaut la peine de payer pour cela).

  1. Dans Ghostlab, ajoutez l'adresse du site Web (ou une adresse localhost) que vous souhaitez déboguer et démarrer la session.
  2. Ghostlab générera un lien d'accès.
  3. Copiez ce lien et publiez-le sur Facebook (en tant que message privé)
  4. Ouvrez le lien sur mobile et c'est tout! Ghostlab vous identifiera une fois que vous aurez ouvert ce lien et vous permettra de déboguer la page. 

Pour le débogage, vous aurez tous les mêmes outils que dans les devtools de Chrome (c'est cool ça!). Par exemple, vous pouvez modifier le CSS et voir les modifications appliquées en direct.

3
Lys

Si vous souhaitez déboguer une erreur éventuelle, vous pouvez essayer de la détecter et de l'afficher.

Placez ceci au sommet de votre 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 )

Cela va attraper et alert vos erreurs.

Partagez un lien sur Facebook (en privé) ou envoyez-vous un message sur Facebook Messenger (plus facile). Pour casser le cache, créez une nouvelle URL à chaque fois, par exemple. en ajoutant une chaîne aléatoire à l'URL.

Suivez le lien et voyez si vous pouvez trouver des erreurs.

0
nicoqh