Neues für das Debuggen mit Chrome

20. Dezember 2017 von Kenneth Auchenberg

In den letzten Monaten haben wir uns intensiv mit der Verbesserung des Debuggens mit Chrome für Visual Studio Code beschäftigt und freuen uns heute, drei neue Funktionen vorzustellen, die das clientseitige JavaScript-Debugging in VS Code Ihrer Meinung nach einfacher und zuverlässiger machen werden.

Wenn Sie mit der Microsoft Debugger for Chrome-Erweiterung nicht vertraut sind, können Sie damit Ihr clientseitiges JavaScript, das in Google Chrome ausgeführt wird, debuggen. Dies erweitert die bestehende JavaScript-Debugging-Erfahrung von VS Code, mit der Sie Out-of-the-box Ihr serverseitiges JavaScript in Node.js debuggen können. Wenn Sie beide Debugger installiert haben, können Sie nahtloses Full-Stack-JavaScript-Debugging durchführen.

Verwenden Sie VS Code und Chrome DevTools gleichzeitig!

Das erste, woran wir mit dem Google Chrome-Team gearbeitet haben, war die Möglichkeit, VS Code und Chrome DevTools gleichzeitig zu verwenden!

Dies war eine Benutzeranfrage seit Tag eins, aber wir waren durch Chromes mangelnde Unterstützung für mehrere Remote-Debugging-Verbindungen eingeschränkt. Das bedeutete, dass, wenn VS Code sich mit Chrome verband, ihre Chrome DevTools herausgeschmissen wurden, und wenn Sie Chrome DevTools öffneten, wurde VS Code herausgeschmissen.

Mehrere Verbindungen bedeuten, dass Sie jetzt Ihr JavaScript von VS Code debuggen können, während Sie den DOM-Explorer, den Profiler oder jedes andere Werkzeug in Chrome DevTools verwenden, ohne getrennt zu werden!

Das Chrome-Team begann vor einigen Monaten damit, und wir haben eng mit ihnen zusammengearbeitet, um sicherzustellen, dass die VS Code-Erfahrung optimal ist. Multi-Verbindungen wurden offiziell in Chrome 63 ausgeliefert und funktionieren Out-of-the-box mit VS Code. Um Multi-Connection-Unterstützung zu erhalten, aktualisieren Sie auf die neueste Chrome-Version, und Sie sind einsatzbereit.

Synchronisiertes Stepping zwischen Chrome DevTools und VS Code

Wir denken, dass die Möglichkeit, VS Code und Chrome DevTools zu kombinieren, eine extrem leistungsstarke Erfahrung ist. Es ermöglicht Ihnen, das richtige Werkzeug für das Szenario auszuwählen, ohne gezwungen zu sein, die schwierige Wahl zu treffen, ein Werkzeug durch ein anderes zu ersetzen. VS Code ermöglicht es Ihnen, JavaScript in Ihrem Editor zu debuggen, aber wir erkennen auch an, dass einige Benutzer es vorziehen, JavaScript von DevTools aus zu debuggen. Anstatt zu versuchen, DevTools zu ersetzen, sehen wir dies stattdessen als eine Gelegenheit zur Integration.

Der erste Schritt zu einer besseren Integration der Werkzeuge ist synchronisiertes Stepping zwischen Chrome DevTools und VS Code, wie hier gezeigt.

Synchronisiertes Stepping ermöglicht es Ihnen, Ihren JavaScript-Quellcode gleichzeitig in VS Code und Chrome DevTools zu debuggen, und gibt Ihnen die Möglichkeit, nahtlos zwischen den beiden Werkzeugen zu wechseln. Von jedem Werkzeug aus können Sie Ihr JavaScript schrittweise ausführen, fortsetzen und debuggen, ohne sich darum kümmern zu müssen, dass der andere Debugger aus dem Takt gerät.

Es ist noch früh, und wir sind begeistert, die neue Welt der Integration zu erkunden, die mit verbundenen Editoren und DevTools möglich ist.

Lokalisierte Debugging-UI

In dieser Version haben wir auch die Lokalisierung von Kernteilen unseres Debuggers aktiviert, was bedeutet, dass Funktionen wie break on uncaught exceptions und Eigenschaftsbeschreibungen in unserer launch.json jetzt lokalisiert und für unsere unterstützten Sprachen wie Chinesisch verfügbar sind.

Breakpoints, die vor der Ausführung Ihrer App gesetzt werden

Eine weitere Funktion, an der wir mit unseren Freunden in Visual Studio gearbeitet haben, ist die Möglichkeit, Breakpoints in JavaScript zu setzen, bevor es in Chrome ausgeführt wird. Das klingt sehr einfach, ist aber recht kompliziert, wenn man die Details der asynchronen JavaScript-Ladung und -Ausführung betrachtet.

Viele Benutzer haben die Erfahrung gemacht, dass ihre Breakpoints beim Starten von Chrome nicht getroffen werden. Zu ihrer Verwirrung werden ihre Breakpoints nach einem einfachen Seiten-Refresh getroffen. Warum sollte das so sein? Es ist etwas kompliziert, aber es kommt auf ein Timing-Problem zwischen VS Code und Chrome an, das am besten in einer Zeitachse dargestellt wird.

Wie Sie auf der Zeitachse in Gelb sehen können, ist das Problem, dass einige JavaScript ausgeführt wird, bevor VS Code die Breakpoints setzt.

Das bedeutet, dass, wenn Sie Breakpoints in Quellcode haben, der als Teil eines Seitenaufrufs sofort ausgeführt wird, VS Code die Breakpoints nicht setzen konnte, bevor die Ausführung abgeschlossen war. Die Problemumgehung besteht darin, einen Seiten-Refresh durchzuführen, der den Code erneut ausführt und somit den Breakpoint auslöst.

Gute Nachrichten! Wir haben einen Weg gefunden, wie Sie zuverlässig Breakpoints in früh ausgeführten Quellcodes setzen können, den wir break-on-load breakpoints nennen.

Break-on-load-Breakpoints werden durch DOM-Instrumentierungs-Breakpoints in Chrome unterstützt, die es uns ermöglichen, die Skriptausführung jedes Mal anzuhalten, wenn ein neues Skript geladen wird. Dies ändert den Workflow für unseren Debugger und gibt uns mehr Zeit, Breakpoints zu setzen, bevor Ihr JavaScript ausgeführt wird.

Break-on-load aktivieren

Wir veröffentlichen Break-on-load-Breakpoints als experimentelle Funktion für unseren Chrome-Debugger, und Sie können die Funktion aktivieren, indem Sie die neue Eigenschaft breakOnLoad auf true in Ihrer launch.json-Konfiguration setzen.

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "https://:3000",
  "webRoot": "${workspaceRoot}/src",
  "breakOnLoad": true
}

Die Aktivierung von Break-on-load-Breakpoints wirkt sich auf die Leistung Ihres anfänglichen Seitenaufrufs aus, da der Debugger Chrome jedes Mal kurz pausiert, wenn ein neues Skript geladen wird. Aus diesem Grund ist dies derzeit eine Opt-in-Funktion. Wenn Sie fehlende Breakpoints erleben, versuchen Sie, Break-on-load-Breakpoints zu aktivieren und lassen Sie uns wissen, wie sie für Sie funktionieren.

Das war's für jetzt. Es ist ein großes Update für unseren Chrome-Debugger, und wir können es kaum erwarten, Ihr Feedback zu diesen neuen Funktionen zu hören. In einer Welt, in der Ihr Editor stärker in DevTools integriert ist, lassen Sie uns wissen, was Sie von Ihren Werkzeugen erwarten oder wünschen würden.

Viel Spaß beim Programmieren!

Kenneth (@auchenberg)