2012-11-11 6 views
27

Ich möchte meine Website CSS/HTML-Elemente in meinem Android-Browser überprüfen. Allerdings wird es über ein Smartphone oder das Android SDK sein.Wie kann ich Elemente in einem Android-Browser überprüfen?

Was ist der beste Weg, es zu tun?

+0

möglich Duplikat von [Inspire UI Elemente in Android] (http://stackoverflow.com/questions/8304358/inspect-ui-elements-in-android) – rid

Antwort

11

Chrome für Android ermöglicht die Verwendung der Chrome-Entwicklertools auf dem Desktop, um den HTML-Code zu prüfen, der von der Chrome-Anwendung auf dem Android-Gerät geladen wurde.

See: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

+5

Ich bin damit einverstanden, aber ich wäre glücklicher wenn Ich konnte dies im Android Browser tun, nicht in Chrome, hauptsächlich weil Chrome bereits gut funktioniert und Kompatibilitätsprobleme dazu führen, dass ich Sachen herunterstufen muss, aber ich habe keine Möglichkeit es zu testen :( – Goodwine

+2

@Goodwine Take Ein Blick in https://www.jshybugger.com/ Es ist derzeit die beste Lösung zum Debuggen von Android Browser. –

+1

@PaulIrish Zum Zeitpunkt dieses Beitrags habe ich weiter gesucht, und gefunden [weinre] (http: // people. apache.org/~pmuellr/weinre/docs/latest/Home.html), und es funktioniert wirklich gut, sobald Sie in der Lage sind, damit umzugehen :) – Goodwine

30

Hat eine Website für die native Android-Browser zu debuggen und kam hier. Also habe ich versucht weinre auf einem OS X 10.9 (wie weinre server) mit Firefox 30.0 (weinre client) und einem Android 4.1.2 (target). Ich bin wirklich sehr überrascht von dem Ergebnis.

  1. herunterladen und installieren Knoten Laufzeit von http://nodejs.org/download/
  2. installieren weinre: sudo npm -g install weinre
  3. Ihre aktuelle IP-Adresse an Einstellungen finden Sie> Netzwerk
  4. Einrichten eines weinre Server auf Ihrem Rechner: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. In Ihrem browser call: http://YOUR.IP.ADRESS.HERE:8080
  6. Sie werden ein Skript Snippet sehen, legen Sie es auf Ihrer Website: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. öffnen Sie das Debug-Client in Ihrem lokalen Browser: http://YOUR.IP.ADDRESS.HERE:8080/client
  8. schließlich auf Ihrem Android: Rufen Sie die Website, die Sie (die mit dem Skript innen) und sehen, wie es scheint, als „Ziel“ in Ihrem lokalen Browser prüfen wollen. Jetzt können Sie "Elemente" oder was auch immer Sie wollen öffnen.

Vielleicht 8080 ist nicht Ihr Standard-Port. Dann müssen Sie in Schritt 4 weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE anrufen.

Und ich erinnere mich nicht genau, wann es war, vielleicht irgendwo nach Schritt 5 musste ich natürlich eingehende Verbindungen akzeptieren.

:) Glückliche Fehlersuche

P.S. Ich bin immer noch überwältigt, wie gut das funktioniert. Auch Elemente Hervorhebung Arbeit O_O °

+0

Einfach unglaublich. Danke für die Schritt für Schritt. – rsc

+1

Oder benutze in Schritt 4 'weinre --boundHost -all-' um an alle Schnittstellen zu binden – awidgery

+1

Außerdem musste ich ngrok benutzen, um einen Tunnel fern zu machen. Stellen Sie sicher, dass Sie nggrok an die gleiche IP-Adresse (und nicht localhost) binden oder es wird nicht funktionieren 'ngrok http 192.168.0.104: 8080' Dann verwenden Sie die Ngrok-URL im Skript-Tag. –

4

Sie können Elemente einer Website in Ihrem Android-Gerät mit Chrome-Browser überprüfen. Öffnen Sie Ihren Chrome-Browser und gehen Sie zu der Website, die Sie untersuchen möchten. Gehen Sie zur Adressleiste und geben Sie "view-source:" vor dem "http" ein und laden Sie die Seite neu. Die gesamten Elemente der Seite werden angezeigt.

Verwandte Themen