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 .
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 .
Antworten:
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
Wie von Simons Antwort hervorgehoben , muss das private Surfen deaktiviert werden, damit das Remote-Debugging funktioniert.
Einstellungen> Safari> Privates Surfen> AUS
quelle
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:
npm install -g weinre
weinre --boundHost -all-
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:
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 :)
quelle
Ctrl-Shift-B
wenn sie nicht sichtbar ist).npm install -g weinre
arbeitete nicht für mich. Also musste ich es mit der Version ausführennpm install -g [email protected]
. Überprüfen Sie die neueste Version hier npmjs.com/package/weinre .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 .
urlString
Sie die URL, die Sie testen möchten.quelle
Nach meinem Verständnis verwendet Google Chrome das UIWebView von iOS anstelle einer vollständigen Implementierung von Chrome wie das Android-Gegenstück.
quelle
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.
quelle
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.
quelle
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
quelle
Sie müssen auch "Privates Surfen" deaktiviert haben.
Einstellungen> Safari> Privates Surfen> AUS
quelle
Vorlon.JS kann zum Remote-Debuggen von iOS oder einem anderen Client verwendet werden.
npm i -g vorlon
vorlon
<script src="http://<yourExternalIP>:1337/vorlon.js"></script>
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
quelle
Sogar ich suche nach der gleichen Funktion, die bis heute noch nicht implementiert ist. Ich kann mir jedoch zwei Möglichkeiten vorstellen:
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).
Probieren Sie auch Adobe Shadow aus, das Remote-Debugging / Inspektion und Synchronisierung ermöglicht.
HTH.
quelle
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.
quelle
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.
quelle
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
quelle
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.
quelle
Ö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.
quelle
Debuggen Sie Safari unter iOS ( derzeit nicht für Chrome, lesen Sie weiter, um weitere Informationen zu erhalten.)
Wie funktioniert das?
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
Console
Registerkarte, führen Sie JavaScript-Code aus, überprüfen Sie dieconsole.log()
Ausgabe usw.Registerkarte Netzwerk, Anforderungsheader, Antwort usw. überprüfen ...
Unterstützung für DevTools auf BrowserStack?
DevTools sind verfügbar auf:
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 .
quelle