iOS Remote Debugging

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 .

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

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.

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 :)

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.

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

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.

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.

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.

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

Einstellungen> Safari> Privates Surfen> AUS

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

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

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.

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.

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.

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

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.

Sehr empfehlenswert.

Ö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.

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.

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.

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

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 .