iOS-Remote-Debugging

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

Einrichten:

• Installiere 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 Bookmarklet).
• Klicken Sie auf den Link zur Debug-Client-Benutzeroberfläche (http: // {wifi-ip-address}: 8080/client/# anonymous).
• Wenn Sie unter Clients eine grüne Linie sehen, ist der Browser verbunden

Das Bookmarklet ist etwas schwieriger zu installieren. Dies ist am einfachsten, wenn die Lesezeichen-Synchronisierung für Desktop und mobiles Chrome aktiviert ist. Kopieren Sie die URL des Bookmarklets vom lokalen weinre-Server (wie oben). Leider funktioniert es nicht, weil es nicht richtig kodiert ist. Öffnen Sie also die JavaScript-Konsole und geben Sie Folgendes ein:

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

Sie sollten jetzt das url-codierte Bookmarklet in Ihrer Zwischenablage haben. Fügen Sie es unter Mobile Bookmarks in ein neues Lesezeichen ein. Nennen Sie es weinre oder etwas einfach zu tippen. 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. Das Lesezeichen sollte als Vorschlag für eine automatische Vervollständigung angezeigt werden. Klicken Sie darauf, um den Bookmarklet-Code auszuführen :)

Sie können derzeit kein direktes Debugging für Chrome unter iOS durchführen. Es verwendet eine uiWebView, die sich geringfügig von Mobile Safari unterscheiden kann.

Sie haben einige Möglichkeiten.

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

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

Option 3: Remote debuggen ein richtiges uiWebView, das 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. 
2. Öffnen Sie XCode, öffnen Sie das vorhandene Projekt und wählen Sie das gerade heruntergeladene Projekt aus.
3. Öffnen Sie WebViewAppDelegate.m und ändern Sie die Variable urlString in die URL, die Sie testen möchten.
4. Führen Sie die App im iOS-Simulator aus.
5. Öffnen Sie Safari, öffnen Sie das Menü Entwickeln, wählen Sie iOS Simulator und wählen Sie Ihre Webansicht.
6. Safari Inspector prüft nun Ihre uiWebView.

Soweit ich weiß, nutzt Google Chrome die UIWebView von iOS anstelle einer vollständigen Implementierung von Chrome wie dem Android-Pendant. 

Viele Remote-Konsolen funktionieren gut. http://farjs.com ist mein Projekt, und ich konnte Probleme beheben, die spezifisch für Crome iOS waren und nicht in der Safari auftreten. (und wahrscheinlich alle anderen mobilen Browser)

Das Problem ist, dass das Einfügen des Debugging-Codes etwas schwierig ist, da Chrome es Ihnen nicht erlaubt, Bookmarklets zu installieren. 

Sie können stattdessen eine Registerkarte auf der Seite öffnen, die Sie debuggen würden, und eine andere auf farjs.com. Klicken Sie anschließend auf "das Bookmarklet".

Kopieren Sie den JS-Code des Bookmarklets, kehren Sie zur ersten Registerkarte mit der zu debuggenden Seite zurück und fügen Sie den Bookmarklet-Code in die Adressleiste ein.

Der letzte Schritt besteht darin, zum Anfang der Adressleiste 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 weinre mit ngrok, ghostlab und vorlon ausprobiert, nur vorlon funktioniert einwandfrei.

Ich habe es nicht ausprobiert, aber iOS WebKit-Debug-Proxy (ios_webkit_debug_proxy/iwdp) ermöglicht angeblich das Remote-Debuggen von UIWebView. Aus der README.md

Mit dem ios_webkit_debug_proxy (auch bekannt als iwdp) können Entwickler .__ überprüfen. MobileSafari und UIWebViews auf real und simulierte iOS-Geräte über die Chrome DevTools-Benutzeroberfläche und das Chrome Remote Debugging-Protokoll. DevTools Anfragen werden in den Remote Web Inspector-Dienst von Apple übersetzt Anrufe.

Sie müssen auch "Private Browsing" deaktivieren.

Einstellungen> Safari> Privates Surfen> AUS

Vorlon.JS eignet sich am besten für das Remote-Debugging von iOS oder anderen Clients.

1. Einfach global installieren 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 Ihrer App dieses Skript-Tag hinzufügen:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Alle verbundenen Clients, z. iPhone, Android wird in der Client-Liste im Dashboard von Vorlon.JS verfügbar sein  

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

Verweise

http://vorlonjs.com

https://ngrok.com

Haftungsausschluss

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

Mit Adobe Edge Inspect ( https://creative.Adobe.com/products/inspect ) können Sie alle Ihre mobilen Geräte IOS und Android (kein Windows Phone) jedoch debuggen. Es verwendet weinre für die Fernüberwachung von DOMs. Es ist nicht die schnellste Methode, aber es funktioniert unter Windows. 

Hinweis: Ich habe keinerlei Verbindung zu den Ghostlab-Schöpfern Vanamco.

Für mich war es wichtig, Chrome-spezifische Probleme zu debuggen, also habe ich mich auf die Suche nach etwas gemacht, das mir dabei helfen kann. Am Ende warf ich glücklich mein Geld bei Ghostlab 3 . Ich kann mobile 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.

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, um dies zu ermöglichen. Danach wird vielleicht das Debuggen von Safari verfügbar sein.

Ich verwende den Remotedebug-IOS-Webkit-Adapter Funktioniert gut mit IOS und dem Debugger, der in Chrome unter Windows 10 geöffnet ist.

Freue mich wenn es jemandem hilft Link

Auch ich bin auf der Suche nach dem gleichen Feature, und bis heute muss es noch implementiert werden. Ich kann mir jedoch zwei Möglichkeiten vorstellen: 

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

2. Versuchen Sie auch Adobe Shadow, das Debuggen/Prüfen und Synchronisieren per Fernzugriff ermöglicht.

HTH.