iOS Remote Debugging

198

Mit der jüngsten Version von Chrome für iOS habe ich mich gefragt, wie Sie das Remote-Debugging für Chrome iOS aktivieren können.

Update: Mit der Veröffentlichung von iOS 6 kann das Remote-Debugging jetzt mit Safari durchgeführt werden .

Hyangelo
quelle
2
Remote-Debugging kann jetzt mit Safari auf dem Mac durchgeführt werden. Aber wenn Sie unter Linux oder Windows entwickeln, müssen Sie immer noch weinre verwenden (wie in gregers Antwort angegeben).
Dehalion
3
Remote-Debugging mit Safari unterstützt nur Mobile Safari, nicht iOS Chrome.
Matt Jensen
Bitte werfen Sie einen Blick auf medium.com/@nikoloza/…
Machado

Antworten:

111

Aktualisieren:

Dies ist nicht mehr die beste Antwort. Bitte folgen Sie den Ratschlägen von Gregers .

Neue Antwort:

Verwenden Sie Weinre .

Alte Antwort:

Sie können Safari jetzt für das Remote-Debugging verwenden. Es erfordert jedoch iOS 6.

Hier ist eine kurze Übersetzung von http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

  1. Verbinden Sie Ihr iDevice über USB mit Ihrem Mac
  2. Öffnen Sie Safari auf Ihrem Mac und aktivieren Sie die Entwicklertools
  3. Gehen Sie auf Ihrem iDevice zu Einstellungen> Safari> Erweitert und aktivieren Sie den Webinspektor
  4. Gehen Sie mit Ihrem iDevice zu einer beliebigen Website
  5. Auf Ihrem Mac: Öffnen Sie das Entwicklermenü und wählen Sie die Site aus Ihrem iDevice aus (oben im Safari-Menü).

Wie von Simons Antwort hervorgehoben , muss das private Surfen deaktiviert werden, damit das Remote-Debugging funktioniert.

Einstellungen> Safari> Privates Surfen> AUS

F Lekschas
quelle
11
Ja, ich benutze diesen schon. Schließlich! Es ist schade, dass die Windows-Version von Safari es nicht hat.
Hyangelo
5
Ich hoffe, dass Chrome bald dieselbe Funktion aktiviert, sodass sie unter allen Betriebssystemen funktioniert.
F Lekschas
49
Ja - es wäre sicher schön, wenn dies die gestellte Frage beantworten würde!
Irene Knapp
4
Das Deaktivieren des privaten Browsings ist nicht mehr erforderlich.
Meilen
3
Downvote-Grund: Bei Fragen wird nach Chrome und nicht nach Safari gefragt .
NickG
230

Die ausgewählte Antwort gilt nur für Safari. Momentan ist es in Chrome unter iOS nicht möglich, echtes Remote-Debugging durchzuführen , aber wie bei den meisten mobilen Browsern können Sie WeInRe für ein einfaches Debugging verwenden. Das Einrichten ist ein bisschen mühsam, aber Sie können das DOM überprüfen, das Styling sehen, das DOM ändern und mit der Konsole spielen.

Geben Sie hier die Bildbeschreibung ein

So richten Sie ein:

  • Installieren Sie nodejs
  • npm install -g weinre
  • weinre --boundHost -all-
  • Öffnen Sie http: // {wifi-ip-address}: 8080 / und kopieren Sie den Zielskriptcode
  • Fügen Sie das Skript-Tag in Ihre Seite ein (oder verwenden Sie das Lesezeichen).
  • Klicken Sie auf den Link zur Benutzeroberfläche des Debug-Clients (http: // {WLAN-IP-Adresse}: 8080 / client / # anonym).
  • Wenn Sie unter Clients eine grüne Linie erhalten, ist der Browser verbunden

Die Installation des Lesezeichens ist etwas mühsamer. Am einfachsten ist es, wenn Sie die Lesezeichensynchronisierung sowohl für Desktop- als auch für mobiles Chrome aktiviert haben. Kopieren Sie die Lesezeichen-URL vom lokalen Weinre-Server (wie oben). Leider funktioniert es nicht, weil es nicht richtig url-codiert ist. Öffnen Sie also die JavaScript-Konsole und geben Sie Folgendes ein:

copy(encodeURI('')); // paste bookmarklet inside quotes

Sie sollten jetzt das URL-codierte Lesezeichen in Ihrer Zwischenablage haben. Fügen Sie es in ein neues Lesezeichen unter Mobile Lesezeichen ein . Nennen wir es weinre oder etwas einfach zu tippendes. Es sollte ziemlich schnell mit Ihrem Handy synchronisiert werden. Laden Sie also die Seite, die Sie überprüfen möchten. Geben Sie dann den Namen des Lesezeichens in die URL-Leiste ein, und Sie sollten das Lesezeichen als Vorschlag zur automatischen Vervollständigung sehen. Klicken Sie darauf, um den Lesezeichencode auszuführen :)

Geben Sie hier die Bildbeschreibung ein

gregers
quelle
27
Dies ist die einzig richtige Antwort, alle anderen beziehen sich auf Safari (Spaziergang in einem Park)
Mars Robertson
2
Sehr hilfreiche Anleitung! Ich füge nur hinzu, dass Sie zum Installieren des Lesezeichens anstelle des Kopierens den bereitgestellten Lesezeichen-Link "weinre target debug" auf Ihre Lesezeichen-Symbolleiste ziehen können (machen Sie die Symbolleiste sichtbar, Ctrl-Shift-Bwenn sie nicht sichtbar ist).
Kai Carver
Ich musste meinen Browser nach der Installation des Lesezeichens aktualisieren, damit es funktioniert.
Ooolala
npm install -g weinrearbeitete nicht für mich. Also musste ich es mit der Version ausführen npm install -g [email protected]. Überprüfen Sie die neueste Version hier npmjs.com/package/weinre .
Vinesh
1
FWIW, weinre unterstützt derzeit kein Schattendom - es werden nur die Elemente der obersten Ebene und ihr Lichtdom angezeigt. Es funktioniert auch nicht für schattige Doms, abgesehen von den Elementen der obersten Ebene und ihren schattigen Doms (und auch für helle Doms).
Max Waterman
52

Sie können Chrome unter iOS derzeit nicht direkt remote debuggen. Es wird eine uiWebView verwendet, die sich möglicherweise geringfügig von Mobile Safari unterscheidet.

Sie haben einige Möglichkeiten.

Option 1: Remote-Debugging von Mobile Safari mit dem Safari-Inspektor. Wenn sich Ihr Problem in Mobile Safari reproduziert, ist dies definitiv der beste Weg. Das Durchlaufen des iOS-Simulators ist sogar noch einfacher.

Option 2: Verwenden Sie Weinre für ein abgespecktes Debugging-Erlebnis . Weinre hat nicht viele Funktionen, aber manchmal ist es gut genug.

Option 3: Remote-Debugging einer ordnungsgemäßen uiWebView, die gleich funktioniert.

Hier ist der beste Weg, dies zu tun. Sie müssen XCode installieren .

  1. Gehen Sie zu github.com/paulirish/iOS-WebView-App und "Download Zip" oder klonen Sie.
  2. Öffnen Sie XCode, öffnen Sie ein vorhandenes Projekt und wählen Sie das gerade heruntergeladene Projekt aus.
  3. Öffnen Sie WebViewAppDelegate.m und ändern urlStringSie die URL, die Sie testen möchten.
  4. Führen Sie die App im iOS-Simulator aus.
  5. Öffnen Sie Safari, öffnen Sie das Entwicklungsmenü , wählen Sie iOS Simulator und wählen Sie Ihre Webansicht.
  6. Safari Inspector überprüft nun Ihr uiWebView.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Paul Irish
quelle
7
Wie kann man iOS (iPhone / iPad) unter Windows mit Chrom überprüfen? Gibt es dafür eine Methode?
Surjith SM
@SurjithSM Diese Antwort hilft bei Windows nicht, solange Sie XCode nicht unter Windows installieren und keine iOS-App erstellen können. Versuchen Sie dies stattdessen stackoverflow.com/a/22047495/1737158
Lukas Liesis
Ich habe bereits Erfahrung mit github.com/google/ios-webkit-debug-proxy , einem großartigen Tool, und gestern versucht, Google Chrome mit iOS Emulator zu debuggen - es ist eine großartige Erfahrung. Vielen Dank für # 3
Oleg Andreyev
10

Nach meinem Verständnis verwendet Google Chrome das UIWebView von iOS anstelle einer vollständigen Implementierung von Chrome wie das Android-Gegenstück.

Stephan Leroux
quelle
1
Ja, das habe ich herausgefunden, nachdem ich diese Frage gestellt habe. Das ist wirklich eine Schande für Apple. Ich habe diese Frage offen gelassen, weil jemand einen Weg gefunden hat, dies zu tun.
Hyangelo
4

Viele Remote-Konsolen funktionieren einwandfrei. http://farjs.com ist mein Projekt, und ich konnte Probleme, die für Crome iOS spezifisch sind und nicht auf Safari auftreten, erfolgreich debuggen. (und wahrscheinlich alle anderen mobilen Browser)

Das Problem ist, dass das Einfügen des Debugging-Codes etwas schwierig ist, da Sie in Chrome keine Lesezeichen installieren können.

Stattdessen können Sie eine Registerkarte auf der Seite, die Sie debuggen möchten, und eine andere auf farjs.com öffnen und dann auf "das Lesezeichen" klicken.

Kopieren Sie den Lesezeichen-JS-Code, kehren Sie zur ersten Registerkarte mit der Seite zurück, die debuggt werden soll, und fügen Sie den Lesezeichen-Code in die Positionsleiste ein.

Der letzte Schritt besteht darin, zum Anfang der Positionsleiste zu scrollen und "Javascript:" hinzuzufügen, da Chrome es entfernt.

BlueStory
quelle
4

Ich empfehle Vorlon , funktioniert wie weinre. Ich mag die Benutzeroberfläche von Vorlon und sie unterstützt SSL . Meine Anwendung ist in HTTPS. Ich habe versucht, mit ngrok, Ghostlab und Vorlon zu arbeiten. Nur Vorlon funktioniert einwandfrei.

Tina Chen
quelle
3

Ich habe es nicht ausprobiert, aber mit dem iOS WebKit-Debug-Proxy (ios_webkit_debug_proxy / iwdp) können Sie angeblich UIWebView remote debuggen. Aus der README.md

Mit ios_webkit_debug_proxy (auch bekannt als iwdp) können Entwickler MobileSafari und UIWebViews auf realen und simulierten iOS-Geräten über die Chrome DevTools-Benutzeroberfläche und das Chrome Remote Debugging Protocol überprüfen. DevTools-Anforderungen werden in Apples Remote Web Inspector-Serviceaufrufe übersetzt.

Jiku
quelle
1
Die Unterstützung für Chrome Webview wird theoretisch implementiert über: github.com/RemoteDebug/remotedebug-ios-webkit-adapter, der auf dem iOS-Webkit-Debug-Proxy basiert. Ich hatte bisher nur begrenzten Erfolg mit diesem Projekt, aber ich gehe davon aus, dass es besser wird.
Matt Jensen
2

Sie müssen auch "Privates Surfen" deaktiviert haben.

Einstellungen> Safari> Privates Surfen> AUS

Simon Owen Design
quelle
Ich bin mir nicht sicher, warum ich diese Antwort ablehne. Das private Surfen muss tatsächlich ausgeschaltet sein, um Remote-Debugging zu ermöglichen.
Basecode
14
@basecode Da es sich um eine ergänzende Antwort handelt, die im Kommentar enthalten sein sollte.
GusDeCooL
2
@ GusDeCooL Ich verstehe, danke! Ein Kommentar eines Downvoter, der dies erklärt, wäre hilfreich gewesen.
Basecode
2

Vorlon.JS kann zum Remote-Debuggen von iOS oder einem anderen Client verwendet werden.

  1. Installieren Sie es einfach global mit npm i -g vorlon
  2. Starten Sie den Server mit vorlon
  3. Öffnen Sie bei laufendem Server http: // localhost: 1337 in Ihrem Browser, um das Vorlon.JS-Dashboard anzuzeigen
  4. Der letzte Schritt besteht darin, Vorlon.JS zu aktivieren, indem Sie dieser App dieses Skript-Tag hinzufügen:
    <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
  5. Alle verbundenen Clients, z. B. iPhone, Android, werden in der Client-Liste im Vorlon.JS-Dashboard verfügbar Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass dieser Ansatz auch zum Debuggen von Apps verwendet werden kann, die nicht mit ngrok auf localhost ausgeführt werden . Weitere Informationen finden Sie unter https://stackoverflow.com/a/45443203/2073920 .

Haftungsausschluss

Ich bin nur ein Benutzer und nicht mit Vorlon.JS und ngrok verbunden

Abdul Rauf
quelle
Ich habe alle Schritte befolgt, aber der Ausblick meines iPhones wird im VorlonJS auf dem Mac nicht erkannt
Amarjit Singh
0

Sogar ich suche nach der gleichen Funktion, die bis heute noch nicht implementiert ist. Ich kann mir jedoch zwei Möglichkeiten vorstellen:

  1. Mir ist aufgefallen, dass das Verhalten von Chrome und Safari ziemlich identisch ist. Chrome unterstützt sogar das Gyroskop und andere verwandte Ereignisse, die von Safari unterstützt werden. Ich debugge derzeit meine Web-App, indem ich die Debug-Konsole in Safari aktiviere (über Einstellungen-> Safari).

  2. Probieren Sie auch Adobe Shadow aus, das Remote-Debugging / Inspektion und Synchronisierung ermöglicht.

HTH.

Weinstock
quelle
0

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) ist eine weitere Möglichkeit, alle Ihre Mobilgeräte unter iOS und Android zu debuggen (allerdings ohne Windows Phone). Es verwendet weinre für die Remote-DOM-Inspektion / -Änderung. Es ist nicht die schnellste Methode, aber es funktioniert unter Windows.

Peter Sinke
quelle
Adobe Edge Inspect ist nicht mehr in der Adobe Creative Cloud aufgeführt. Siehe adobe.com/products/edge-inspect.html .
Ron Inbar
Es stimmt, Sie können es jedoch weiterhin mit einem aktuellen Abonnement herunterladen, obwohl es sich nicht mehr in der Entwicklung befindet. Sehen Sie hier, wie es geht: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings
Die iOS-App ist jedoch nicht mehr verfügbar.
Arbeitet
0

Es gibt einen offenen Fehler in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Leider sind sie darauf angewiesen, dass Apple eine API in WKView öffnet, damit dies geschieht. Danach ist möglicherweise ein Debugging von Safari verfügbar.

Noam Rosenthal
quelle
0

Ich verwende den Remotedebug-iOS-Webkit-Adapter und funktioniert gut mit IOS und Debugger, die in Chrome unter Windows 10 geöffnet sind.

Werde mich freuen wenn es jemandem hilft Link

Beny
quelle
0

Hinweis: Ich habe keinerlei Beziehung zu den Ghostlab-Entwicklern Vanamco.

Es war mir wichtig, Chrome-spezifische Probleme beheben zu können, daher machte ich mich auf die Suche nach etwas, das mir dabei helfen könnte. Am Ende warf ich mein Geld glücklich auf Ghostlab 3 . Ich kann die mobilen Browser von Chrome und Safari so testen, als würde ich sie auf meinem Desktop anzeigen. Es gibt mir nur eine LAN-Adresse, die ich für jedes Gerät verwenden kann, das ich debuggen möchte. Jede Anwendung, die diese Adresse verwendet, wird in der Liste in Ghostlab angezeigt.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Sehr empfehlenswert.

Brandon Durham
quelle
-2

Öffnen Sie Safari Desktop iOS

Entwickeln -> Responsive Design-Modus

Klicken Sie unter Gerät auf "Andere"

Fügen Sie Folgendes ein: Mozilla / 5.0 (iPad; CPU OS 10_2_1 wie Mac OS X) AppleWebKit / 602.1.50 (KHTML, wie Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Verwenden Sie Safari Inspect Tools.

user3521314
quelle
-3

Haftungsausschluss: Ich arbeite bei BrowserStack. [Bestätigt], ob ich dies posten darf ( Kann ich ein Produkt des Unternehmens vorschlagen, bei dem gearbeitet wird? )


Debuggen Sie Safari unter iOS ( derzeit nicht für Chrome, lesen Sie weiter, um weitere Informationen zu erhalten.)

Wie funktioniert das?

  • Sie müssen eine Sitzung auf einem realen Gerät (es gibt Emulatoren, aber Sie müssen eine Sitzung auf einem realen Gerät starten) auf BrowserStack starten, z. B. iPhone 6S - Safari / Chrome (noch keine Devtools für Chrome, aber auf unserer Roadmap).
  • Geben Sie die URL ein
  • Sie können DevTools auslösen, um die auf dem BrowserStacks-Remote-Gerät geöffnete Webseite zu überprüfen. Ich habe die Bildschirme für das gleiche unten geteilt.

Verwenden von DevTools mit echten Telefonen

Bewegen Sie den Mauszeiger über die Elemente, bearbeiten Sie HTML und CSS, genau wie die Desktop-Browser-Devtools funktionieren.

DevTools auf echten Telefonen, Debuggen reaktionsfähiger Websites.


Ausführen von JavaScript in einem echten Telefon mit DevTools

Wechseln Sie zur ConsoleRegisterkarte, führen Sie JavaScript-Code aus, überprüfen Sie die console.log()Ausgabe usw.

Führen Sie JavaScript in realen Telefonen mit devtools aus


Registerkarte Netzwerk, Anforderungsheader, Antwort usw. überprüfen ...

Registerkarte "Netzwerk" zum Überprüfen von Anforderungen


Unterstützung für DevTools auf BrowserStack?

  • DevTools sind verfügbar auf:

    • Echte Geräte - iOS - Safari (DevTools für iOS Chrome steht auf unserer Roadmap)
    • Echte Geräte - Android - Chrome (Derzeit ist nur Chrome auf Android-Geräten verfügbar.)
  • Der Client-Browser muss Chrome oder Firefox sein. Das bedeutet, dass Sie unter MacOSX oder Windows den Chrome- oder Firefox-Browser verwenden müssen, um BrowserStack Real Device DevTools verwenden zu können.

Hinweis: Sie müssen einen Plan kaufen, um auf allen realen Geräten zu testen. Als kostenloser Benutzer erhalten Sie einige echte Android-Geräte (einschließlich Tablets) und einige echte iOS-Geräte (einschließlich Tablets). Hervorheben des Wortes Real Devices, da diese auch Emulatoren bereitstellen.

Weitere Informationen hierzu finden Sie im Abschnitt DevTools auf der Seite Mobile Features .

Mr. Alien
quelle
3
Er bat um das Debuggen von Chrome unter iOS. Ich bin ein Browserstack-Kunde und besitze einen Mac, so dass das Debuggen von Safari unter iOS möglich ist, aber Chrome verzögert die Möglichkeit, remote debuggbar zu sein
Fabs
@fabs Das haben wir auf unserer Roadmap. Außerdem habe ich erwähnt, dass es nur auf Safari - iOS-Geräten und Chrome für Android-Geräte funktioniert :)
Mr. Alien
Bei Layoutproblemen sollte dies kein Problem sein, da die Layout-Engine beider Browser ein Webkit ist. In Kombination mit der Funktion zum Testen lokaler Server ist hierfür kein zusätzliches Setup zum Debuggen von localhost erforderlich.
Tim Vermaelen
1
Die Antwort geht ohnehin nicht auf die Frage ein. Während Browserstack einen großartigen Service bietet, ist diese Antwort völlig unangebracht.
Matt Jensen