iOS Web Debugging unter Windows und Mac

24. August 2016 von Kenneth Auchenberg

Update

Der iOS Web Debugger wurde eingestellt und wir empfehlen nun die Verwendung des RemoteDebug iOS WebKit Adapters in Verbindung mit Visual Studio Code. Weitere Informationen finden Sie in dieser Einführung Anleitung zum RemoteDebug iOS WebKit Adapter.

Einleitung

Das Debuggen von Websites auf iOS-Geräten ist nur einer Teilmenge von Entwicklern zugänglich. Beispielsweise erfordert die Verwendung des Safari Web Inspectors (Safari DevTools) eine Instanz des Desktop-Safari, die nur für macOS-Benutzer verfügbar ist. Heute ermöglichen wir mobilen Webentwicklern, JavaScript, das auf ihren iOS-Geräten ausgeführt wird, direkt aus ihrem Editor mit einem neuen iOS Web Debugger für Visual Studio Code zu debuggen. Diese Debug-Erweiterung funktioniert sowohl unter Mac als auch unter Windows.

Unser neuer iOS Web Debugger funktioniert ziemlich ähnlich wie unser Chrome Debugger, den wir im Februar vorgestellt haben. Unter der Haube ist es derselbe Debugger, der in VS Code ausgeführt wird und der von unserer Open-Source-Bibliothek vscode-chrome-debug-core unterstützt wird. Um die Verbindung von unserer Debugging-Bibliothek zum iOS-Gerät herzustellen, nutzen wir zwei Open-Source-Projekte, ios-webkit-debug-proxy und ios-webkit-debug-proxy-win32, die die Kommunikation mit den iOS-Geräten über USB über das WebKit Remote Debugging Protocol ermöglichen. Das Protokoll ist mit dem Chrome Debugging Protocol für die Skript-Debugging-APIs kompatibel, was bedeutet, dass unser Debugger ohne zusätzliche Mapping-Logik funktioniert.

Einfache lokale Entwicklung durch emuliertes Port-Forwarding

Bei der Entwicklung von lokal ausgeführten Websites ist es ein umständlicher Prozess, mobilen Geräten den Zugriff auf Ihren lokalen Entwicklungsserver zu ermöglichen, der normalerweise ein HTTP-Server unter localhost ist. Um dies zu erleichtern, unterstützen Plattformen wie Android Port-Forwarding nativ, aber iOS unterstützt dies nicht.

Daher haben wir einen Weg gefunden, Port-Forwarding zu emulieren, indem wir die Option hinzugefügt haben, eine Instanz von localtunnel zu starten, die im Hintergrund einen HTTP-Tunnel von Ihrem lokalen Computer zum öffentlichen Internet für die angegebene Eigenschaft tunnelPort erstellt. Dieser HTTP-Tunnel wird dann vom iOS-Gerät verwendet, um auf Ihren lokalen Entwicklungsserver zuzugreifen, genau wie jede andere öffentliche Website.

Erste Schritte

Um zu beginnen, öffnen Sie die Ansicht Erweiterungen (⇧⌘X (Windows, Linux Ctrl+Shift+X)). Wenn die Erweiterungsliste angezeigt wird, geben Sie "ios" ein, um die Liste zu filtern, und installieren Sie die Debugger for iOS Web-Erweiterung. Anschließend erstellen Sie eine Startkonfigurationsdatei, die wir in unserem README hier im Detail erklären.

Unterstützte Funktionen

In dieser Version unterstützen wir die folgenden Funktionen

• Setzen von Breakpoints, auch in Quelldateien, wenn Source Maps aktiviert sind
• Schrittweises Debuggen
• Stack-Traces
• Der Lokale Variablenbereich
• Debuggen von eval-Skripten, Skript-Tags und dynamisch hinzugefügten Skripten
• Überwachungen
• Konsole
• Virtuelles Port-Forwarding über HTTP-Tunnel vom lokalen Computer.

Experimentieren in der Öffentlichkeit

Unser neuer iOS Web Debugger ist ein öffentliches Experiment, und das bedeutet, dass wir ihn der Öffentlichkeit zugänglich machen, um herauszufinden, ob integriertes Skript-Debugging für iOS für Entwickler wertvoll ist. Bitte lassen Sie uns wissen, was Sie davon halten.

Wenn Sie Probleme oder Verbesserungsideen haben, können Sie uns gerne auf Twitter oder auf GitHub kontaktieren.

–

Kenneth Auchenberg, Program Manager, JavaScript Diagnostics