Einführung in das Debugging von Chrome für VS Code

23. Februar 2016 von Andy Sterland und Kenneth Auchenberg

Seit der ersten Veröffentlichung von Visual Studio Code ist es eines unserer Hauptanliegen, den täglichen Workflow von Entwicklern zu vereinfachen, indem wir ihnen ermöglichen, ihren Code direkt aus dem Editor heraus zu debuggen. Wir haben mit dem Debugging von .NET und Node.js begonnen und gehen heute den nächsten Schritt mit der Einführung unseres Chrome-Debuggers für Visual Studio Code.

Unser Chrome-Debugger ermöglicht es Frontend-Entwicklern, ihren clientseitigen JavaScript-Code, der in Google Chrome ausgeführt wird, direkt aus Visual Studio Code zu debuggen.

Wie funktioniert es?

Unser Debugger verbindet sich über das Chrome Debugger-Protokoll mit Chrome, wo wir im Browser geladene Dateien den in Visual Studio Code geöffneten Dateien zuordnen. Das bedeutet, dass Entwickler jetzt Haltepunkte direkt in ihrem Quellcode setzen, Variablen zum Beobachten einrichten und den vollständigen Aufrufstapel beim Debuggen sehen können – und das alles, ohne den Editor zu verlassen.

Im obigen Beispiel zeigen wir eine AngularJS-App, die über Browserify gebündelt und minimiert wurde und die von VS Code aus gedebuggt wird. Das funktioniert, weil unser Debugger JavaScript-Source-Maps versteht, die wir verwenden, um Entwicklern das Debuggen direkt aus ihrem ursprünglichen Quellcode zu ermöglichen und nicht aus dem transpilierten Ergebnis, das der Browser sieht. Die Unterstützung von Source-Maps ermöglicht auch das Debuggen von TypeScript direkt aus VS Code.

Derzeit muss Chrome mit aktiviertem Remote-Debugging gestartet werden und unterstützt nur eine gleichzeitige Verbindung. Das bedeutet, dass die Verbindung zu VS Code durch Chrome beendet wird, wenn Sie die DevTools innerhalb von Chrome öffnen. Das ist etwas ärgerlich, und wir hoffen, dass dieses Problem bald behoben wird.

Erste Schritte

Um loszulegen, öffnen Sie die Ansicht Erweiterungen (⇧⌘X (Windows, Linux Ctrl+Shift+X)). Wenn die Liste der Erweiterungen erscheint, geben Sie 'chrome' ein, um die Liste zu filtern, und installieren Sie die Erweiterung Debugger for Chrome. Anschließend erstellen Sie eine Startkonfigurationsdatei, die wir in unserem README hier im Detail erklären.

Sie können VS Code entweder so konfigurieren, dass es sich mit einer bereits laufenden Chrome-Instanz verbindet, oder einfach eine neue Instanz mit aktiviertem Remote-Debugging starten. Lesen Sie mehr dazu in unserem README.

Unterstützte Funktionen

In dieser ersten Veröffentlichung unterstützen wir die folgenden Funktionen

• Setzen von Haltepunkten, auch innerhalb von Quelldateien bei aktivierten Source-Maps
• TypeScript, über Source-Maps
• Schrittweises Ausführen des Codes, einschließlich der Verwendung der Schaltflächen auf der Chrome-Seite
• Lokale Scope-Variablen über die VS Code Locals-Ansicht
• Debugging von eval-Skripten, Skript-Tags und dynamisch hinzugefügten Skripten
• Überwachung über das VS Code Watch-Panel.
• Die Debugging-Konsole
• Die meisten Konsolen-APIs

Weiterführend

Wir glauben, dass für Frontend-Entwickler noch viel zu tun ist, da die Entwicklung für das Web in den letzten Jahren unglaublich komplex geworden ist. Mit unserem Chrome-Debugger machen wir den ersten Schritt zu einem einfacheren Webentwicklungs-Workflow, bei dem Browser und Tools verschiedener Anbieter zusammenarbeiten können und die Webentwicklung integrierter wird.

Wir haben diese Erweiterung auf GitHub als Open-Source-Projekt unter MIT-Lizenz veröffentlicht. Es ist ein fortlaufendes Projekt, sehen Sie sich also unsere Issues-Seite für bekannte Fehler an – zum Beispiel haben wir einige Probleme bei der Unterstützung aller Varianten von generierten Source-Maps.

Derzeit unterstützen wir Google Chrome, erwägen aber auch die Erweiterung unserer Unterstützung auf Microsoft Edge und andere Browser. Wir freuen uns sehr über Ihr Feedback und Ihre Hilfe, um ein noch besseres Debugging-Erlebnis zu schaffen.

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

–

Andy Sterland, Senior Program Manager, JavaScript Diagnostics
Kenneth Auchenberg, Program Manager, JavaScript Diagnostics