it-swarm.com.de

Wie debuggen Sie im internen Browser von Facebook (Mobile)?

Ich entwickle eine Website mit vielen HTML5- und CSS3-Funktionen. Ich verwende auch iframe, um mehrere Inhalte auf meiner Website einzubetten. Es funktioniert gut, wenn ich es mit dem mobilen Browser Chrome/Firefox/Safari öffne. Wenn ich jedoch auf Facebook teile (Post/Seite) und es mit der Facebook-Anwendung mit dem internen Browser von Facebook geöffnet habe, ist meine Website durcheinander. 

Gibt es Werkzeuge oder Möglichkeiten zum Debuggen in Facebook-Browser? Vielen Dank.

22
Eldwin Eldwin

So können Sie das Debuggen selbst durchführen. Es ist schmerzhaft, aber der einzige Weg, auf den ich bisher gekommen bin. 

tl; dr Laden Sie die Facebook-App, um eine Seite auf Ihren lokalen Server zu laden, damit Sie schnell iterieren können. Drucken Sie dann Debug-Anweisungen direkt auf die Seite, bis Sie wissen, was los ist.

  1. Rufen Sie einen Link zu einer Seite auf Ihrem lokalen Server ab, auf die Sie mit Ihrem mobilen Gerät zugreifen können (testen Sie in Mobile Safari, ob dies funktioniert). Sehen Sie sich dies an, um Ihre lokale IP-Adresse herauszufinden Wie können Sie vom iPhone-Browser aus auf eine Website zugreifen, die auf localhost ausgeführt wird . Es sieht ungefähr so ​​aus http: //192.xxx.1.127: 3000/facebook-test

  2. Poste diesen Link auf deiner Facebook-Seite (du kannst ihn privat machen, damit deine Freunde nicht alle wie WTF sind?)

  3. Klicken Sie in der mobilen App von Facebook auf den Link, der im mobilen Browser von Facebook geöffnet wird

  4. Da Sie keine Konsole haben, müssen Sie Debug-Anweisungen grundsätzlich direkt auf die Seite drucken, damit sie sichtbar ist. Fügen Sie Ihrem Code Debug-Anweisungen hinzu. Wenn Ihre Probleme in erster Linie mit CSS zusammenhängen, können Sie das Material so lange auskommentieren, bis Sie die Probleme gefunden haben, oder die entsprechenden CSS-Attribute mit JavaScript drucken. ZB etwas wie (mit JQuery)

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

  5. Möglicherweise der schmerzhafteste Teil. Der Facebook-Browser speichert sehr aggressiv. Wenn Sie Änderungen vornehmen und nichts passiert ist, liegt dies daran, dass der Inhalt zwischengespeichert wird. Sie können dies manchmal beheben, indem Sie die URLs aktualisieren, z. B./facebook-test-1,/facebook-test-2, oder Dummy-Parameter hinzufügen, z. B./facebook-test? Dummy = 1. Wenn sich die Änderungen jedoch in externen CSS- oder Js-Sheets befinden, werden sie manchmal noch zwischengespeichert. Um den Cache zu 100% zu löschen, löschen Sie die Facebook-App von Ihrem mobilen Gerät und installieren Sie sie erneut.

20
AllTheCodez

Der von der Facebook-App verwendete interne Browser ist im Wesentlichen eine uiWebView. Paul Irish hat eine einfache iOS-App entwickelt, mit der Sie eine beliebige URL in ein uiWebView laden können, die Sie dann mit den Developer Tools von Safari debuggen können.

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

5
Simen Brekken

Ich habe einen Weg gefunden, wie ich es einfacher debuggen kann. Sie müssen die Ghostlab-App installieren (Sie haben dort eine 7-tägige kostenlose Testversion, die sich jedoch absolut lohnt).

  1. Fügen Sie in Ghostlab die Website-Adresse (oder eine localhost-Adresse) hinzu, die Sie debuggen möchten, und starten Sie die Sitzung.
  2. Ghostlab generiert einen Link für den Zugriff.
  3. Diesen Link kopieren und auf Facebook posten (als privater Post)
  4. Öffne den Link auf deinem Handy und das war's! Ghostlab identifiziert Sie, sobald Sie den Link öffnen, und ermöglicht Ihnen das Debuggen der Seite. 

Für das Debuggen stehen Ihnen dieselben Tools wie in den Chrome-Tools zur Verfügung (wie cool ist das!). Sie können beispielsweise CSS optimieren und die Änderungen live anzeigen.

3
Lys

Wenn Sie einen möglichen Fehler debuggen möchten, können Sie versuchen, ihn zu fangen und anzuzeigen.

Setzen Sie dies ganz oben in Ihren 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);
    }
}

(Quelle: MDN )

Dadurch werden Ihre Fehler aufgefangen und alert.

Teilen Sie einen Link auf Facebook (privat) oder senden Sie sich selbst eine Nachricht in Facebook Messenger (einfacher). Um den Cache zu brechen, erstellen Sie jedes Mal eine neue URL, z. indem Sie eine zufällige Zeichenfolge an die URL anhängen.

Folgen Sie dem Link und sehen Sie, ob Sie Fehler finden.

0
nicoqh
  • Erstellen Sie mithilfe von ngrok eine temporäre http- und https-Adresse anstelle Ihres normalen lokalen Hosts: 3000 (oder eines anderen Ports), und Sie können Ihre App auf jedem Gerät ausführen . Es ist super einfach zu bedienen.
  • und wie es vor allen anderen nützlichen Informationen geschrieben wurde, solltest du irgendwo innerhalb des div-Elements (im Falle von React)) schreiben Dies hilft, da JS in FB möglicherweise früher ausgeführt wird, als Ihre Informationen angezeigt werden.) Beachten Sie, dass Warnungen nicht zuverlässig sind und manchmal blockiert werden
  • bonus von ngrok, dass Sie in der Konsole sehen, welche Dateien angefordert wurden und Antwortcode (es wird das Fehlen eines Netzwerkregisters ersetzen )
  • und zu iFrame.Wenn Sie es auf einer anderen Domain verwenden und auf Cookies setzen, sollten Sie wissen, dass der Facebook-In-App-Browser Cookies von Drittanbietern blockiert
  • test auf Android und iOS separat, da technisch unterschiedliche Browser verwendet werden

exampe in windows console

0
Dmitriy Sakhno