Wie debugge ich HTML und JavaScript zusammen in VSCode (Visual Studio Code)?

Question

Ich habe ein sehr einfaches Projekt in VSCode, eine index.html Datei, die auf eine einzige app.js Datei verweist.

Ich möchte diese Mini-Website ausführen und debuggen, wenn ich F5 drücke.

Wie konfiguriere ich VSCode, um index.html im Browser zu öffnen, und erlaube mir dann, Haltepunkte in app.js zu setzen, die durch meine Interaktion mit der App im Browser ausgelöst werden?

In Visual Studio würde dies "nur funktionieren", weil es seinen eigenen Webserver, IIS Express, startet. In VSCode bin ich mir nicht sicher, wie ich launch.json und/oder tasks.json eingerichtet habe, um einen einfachen node.js Webserver zu erstellen und index.html zu liefern.

Ich habe einige Beispiele für das Debuggen Javascript-Anwendungen gesehen, zum Beispiel dieses launch.json:

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch Bjarte's app", 
      "type": "node", 
      "program": "app.js", 
      "stopOnEntry": true, 
      "args": [], 
      "cwd": ".", 
      "runtimeExecutable": null, 
      "runtimeArguments": [], 
      "env": {}, 
      "sourceMaps": false 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      "address": "localhost", 
      "port": 5858, 
      "sourceMaps": false 
     } 
    ] 
} 

Dies wird die js-Datei ausführen, aber ich verstehe nicht, wie ich mit der App interagieren können.

Answer 1

Es ist jetzt möglich, Chrome-Webseiten in vscode über das Chrome Remote Debugging mit einer von Microsoft freigegebenen Erweiterung zu debuggen. Debugger for Chrome

Wie Sie auf dieser Seite sehen können, gibt es zwei Debug-Modi, Launch und Attach. Ich habe es nur geschafft, den Attach-Modus zu benutzen, wahrscheinlich weil ich keinen Server laufen habe. Diese Erweiterung hat alle wichtigen Debug-Tools funktional: lokale Variablen, Breakpoints, Konsole, Call-Stack. Ein weiterer Grund, VSCode erneut zu betrachten, ist, dass es nun IntelliSense-Unterstützung für ECMAScript 6 bietet, das Methoden anzeigt, die in anderen "IntelliSense-ähnlichen" Lösungen wie SublimeCodeIntel oder der neuesten Version von WebStorm nicht sichtbar sind.

Answer 2

VSCode verwendet den Knoten, um Ihre App zu starten, was bedeutet, dass Ihre App auf einem PORT ausgeführt wird. Sie können mit Ihrer App interagieren, indem Sie http://localhost:PORT/ aufrufen. Wenn Sie in app.js einen Haltepunkt festlegen, sollte er beim Besuch Ihrer Site, die lokal über den Knoten ausgeführt wird, aktiviert werden. Hier ist eine nette Demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Answer 3

Es scheint, was ich tun möchte, ist in VSCode (noch?) Nicht möglich. Meine Lösung im Moment ist, das Knotenpaket Live-Server zu verwenden. Installieren Sie mit

> npm install -g live-server 

Dann öffnen VSCode rechten Maustaste auf eine beliebige Datei im Stammordner Ihres Projekts und wählen Sie „Öffnen in Console“. Geben Sie dann

> live-server 

ein, um einen Server mit Ihrem Projekt als Stammordner zu starten. Live-Server öffnet Ihren Standard-Browser und überwacht Ihren Projektordner auf Änderungen der Datei und lädt die HTML-Seite jedes Mal neu, wenn Sie Änderungen vornehmen.

Ich sollte erwähnen, dass meine Lösung mit Live-Server mir nicht erlaubt, meine App in VSCode debuggen, führen Sie es nur im Browser. Ich debugge in Chrome.

Answer 4

können Sie https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

In der Einführung verwenden.JSon Sie haben einfach die URL-Wert des Servers zu pu, die Sie verwenden, und dann können Sie debuggen Ihre HTML + js mit Ihrem Editor Visual Studio Code

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome against localhost", 
      "url": "http://127.0.0.1:8081", 
      "webRoot": "${workspaceFolder}" 
     } 
    ] 
}