web-dev-qa-db-fra.com

Comment déboguer HTML et JavaScript ensemble dans VSCode (Visual Studio Code)?

J'ai un projet très simple en VSCode, un fichier index.html qui relie à un fichier app.js unique.

Je veux exécuter et déboguer ce mini site Web quand je frappe F5.

Comment configurer VSCode pour ouvrir index.html dans le navigateur, puis me permettre de définir des points d'arrêt dans app.js qui seront déclenchés par mon interaction avec l'application dans le navigateur?

Dans Visual Studio, cela "fonctionnerait", car il lance son propre serveur Web, IIS Express. En VSCode, je ne sais pas comment j'ai configuré launch.json et/ou tasks.json pour créer un serveur Web node.js simple et servir index.html.

J'ai vu quelques exemples de débogage d'applications javascript, par exemple this 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
        }
    ]
}

Cela va exécuter le fichier js, mais je ne comprends pas comment je peux interagir avec l'application.

debuggingvisual-studio-code
34
Bjarte Aune Olsen

Il est désormais possible de déboguer des pages Web Chrome dans vscode via le débogage à distance de Chrome avec une extension publiée par Microsoft . Debugger for Chrome

Comme vous pouvez le voir sur cette page, il existe deux modes de débogage, Lancer et Attacher. J'ai seulement réussi à utiliser le mode Attach, probablement parce que je n'ai pas de serveur en cours d'exécution. Cette extension regroupe tous les outils de débogage importants: variables locales, points d'arrêt, console, pile d'appels.

Une autre raison de revisiter vscode est qu’il prend désormais en charge IntelliSense pour ECMAScript 6, qui affiche des méthodes non visibles dans d’autres solutions "IntelliSense like" que j'ai essayées, comme SublimeCodeIntel ou la dernière version de WebStorm.

19
Macovei Vlad

Il semble que ce que je veux faire n'est pas possible dans VSCode (pas encore?). Ma solution pour le moment consiste à utiliser le paquet de nœuds live-server . Installer avec 

> npm install -g live-server

Ensuite, ouvrez VSCode, cliquez avec le bouton droit de la souris sur n’importe quel fichier du dossier racine de votre projet et sélectionnez "Ouvrir dans la console". Puis tapez 

> live-server

pour démarrer un serveur avec votre projet en tant que dossier racine. Live-server ouvrira votre navigateur par défaut et surveillera également votre dossier de projet pour toute modification de fichier, et rechargera la page HTML à chaque fois que vous apporterez des modifications.

Je dois mentionner que ma solution utilisant live-server ne me permet pas de déboguer mon application en VSCode, mais de l'exécuter dans le navigateur. Je suis en train de déboguer dans Chrome.

16
Bjarte Aune Olsen

VSCode utilisera node pour lancer votre application, ce qui signifie que votre application s'exécute sur certains ports. Vous pouvez interagir avec votre application en visitant http: // localhost: PORT/ Si vous définissez un point d'arrêt dans app.js, il convient de l'activer lorsque vous visitez votre site qui s'exécute en local via un noeud ..__ Voici une démo de Nice https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

1
Isidor Nikolic

Vous pouvez utiliser https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Dans le fichier launch.json, vous devez simplement indiquer la valeur de l’URL du serveur que vous utilisez, puis vous pouvez déboguer votre code html + js avec votre éditeur Visual Studio

{
    "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