wake-up-neo.net

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

Ich habe ein wirklich einfaches Projekt in VSCode, eine index.html-Datei, die mit einer einzelnen app.js-Datei verknüpft ist.

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

Wie kann ich VSCode so konfigurieren, dass index.html im Browser geöffnet wird, und dann kann ich Haltepunkte in app.js festlegen, die durch meine Interaktion mit der App im Browser ausgelöst werden?

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

Ich habe einige Beispiele für das Debuggen von Javascript-Apps gesehen, beispielsweise 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
        }
    ]
}

Dadurch wird die js-Datei ausgeführt, aber ich verstehe nicht, wie ich mit der App interagieren kann.

34

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

Wie Sie auf dieser Seite sehen können, gibt es zwei Modi für das Debugging: Starten und Anhängen. Ich habe es nur geschafft, den Attach-Modus zu verwenden, wahrscheinlich weil ich keinen Server habe. Diese Erweiterung verfügt über alle wichtigen Debug-Tools, die funktionsfähig sind: lokale Variablen, Haltepunkte, Konsole, Aufrufstack.

Ein weiterer Grund für das erneute Überdenken von vscode ist, dass es jetzt IntelliSense-Unterstützung für ECMAScript 6 bietet, das Methoden anzeigt, die in anderen "IntelliSense-like-Lösungen" wie SublimeCodeIntel oder der neuesten Version von WebStorm nicht sichtbar sind.

19
Macovei Vlad

Es scheint, dass das, was ich tun möchte, in VSCode (noch nicht?) Möglich ist. Meine Lösung im Moment ist die Verwendung des Knotenpakets live-server . Installieren Sie mit 

> npm install -g live-server

Öffnen Sie dann VSCode, klicken Sie mit der rechten Maustaste auf eine beliebige Datei im Stammordner Ihres Projekts und wählen Sie "In Konsole öffnen". Dann tippen Sie 

> live-server

um einen Server mit Ihrem Projekt als Root-Ordner zu starten. Der Live-Server öffnet Ihren Standardbrowser und überwacht Ihren Projektordner auf etwaige Dateiänderungen und lädt die HTML-Seite jedes Mal neu, wenn Sie Änderungen vornehmen.

Ich sollte erwähnen, dass meine Lösung mit live-server es mir nicht erlaubt, meine App in VSCode zu debuggen, sondern nur im Browser auszuführen. Ich debugge in Chrome.

16

Wie andere gesagt haben, installierst du dies:

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

Und wenn Sie keinen localhost, sondern HTML und JavaScript ausführen, können Sie diesen launch.json Code verwenden.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}

3
Hellonearthis

Falls Sie einen Pfad wie C:\C #\mypage.htm haben, können Sie FF & ex verwenden. fileBasename oder Ähnliche Variable - funktioniert in Chrome nicht:

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

Oder einfacher vollständiger Pfad, der mit node.js getestet wurde:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}
1
Tom

VSCode verwendet node zum Starten Ihrer App. Dies bedeutet, dass Ihre App auf einem bestimmten PORT ausgeführt wird. Sie können mit Ihrer App interagieren, indem Sie http: // localhost: PORT/ .__ besuchen. Wenn Sie in app.js einen Haltepunkt setzen, sollte dieser Punkt erreicht werden, wenn Sie Ihre Site besuchen, die über den Knoten local ausgeführt wird. .Here ist eine schöne Demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

1
Isidor Nikolic

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

In der launch.json müssen Sie nur den URL-Wert des Servers, den Sie verwenden, ausgeben, und dann können Sie Ihre HTML + Js mit dem Editor-Code für visuelles Studio bearbeiten

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

Ich wollte keinen Server nur für HTML und JavaScript ausführen (im Gegensatz zu einem ähnlichen Beispiel). Diese VS Code-Startkonfiguration zusammen mit der Erweiterung "Debugger for Chrome" hat auf meinem Windows 10-Computer den Trick ausgeführt:

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }
0
Binary Galaxy