web-dev-qa-db-fra.com

vscode debug ES6 application

J'ai VSCode 0.5.0. J'ai défini l'indicateur compilerOptions sur "ES6" et l'éditeur a commencé à reconnaître mon code ES6 comme étant correct. J'ai installé babel. Mes tests Mocha utilisent les compilateurs babel et mes tests réussissent. Mon application s'exécute à partir de la ligne de commande sans problème lorsque je la lance avec babel-node. Lorsque je débogue l'application à partir de VSCode, elle démarre sans le support ES6 et l'application échoue pour des problèmes de syntaxe ES6. Y a-t-il des paramètres de débogage que j'ai manqué d'activer?

node.jsdebuggingecmascript-6babeljsvisual-studio-code
22
Jim Argeropoulos

Par défaut, VSCode lance le nœud uniquement avec une option --debug-brk. Cela ne suffit pas pour activer la prise en charge ES6. Si vous pouvez découvrir quelles options 'babel-node' passe à node, vous pouvez spécifier les mêmes options dans la configuration de lancement de VSCode (via l'attribut runtimeArgs). Mais cela ne résout pas le problème que babel-node transpile votre code ES6 avant de l'exécuter.

Alternativement, vous pouvez essayer de définir "runtimeExecutable" dans votre configuration de lancement sur "babel-node". Cette approche fonctionne avec d'autres wrappers de nœuds, mais je n'ai pas vérifié que cela fonctionne avec babel-node.

Une troisième option (qui devrait fonctionner) consiste à utiliser le mode attach de VSCode: pour ce lancement, babel-node à partir de la ligne de commande avec l'option '--debug'. Il doit imprimer un numéro de port. Créez ensuite une configuration de lancement "attachée" dans VSCode avec ce port.

6
Andre Weinand

Voici comment faire fonctionner le débogueur VSCode avec Babel 6+:

Installez d'abord les dépendances localement:

$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save

Exécutez ensuite babel-node:

$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

Par défaut, le débogueur écoutera sur le port 5858, assurez-vous donc que le port correspond à launch.json pour Attach configuration:

{
  "name": "Attach",
  "type": "node",
  "request": "attach",
  "port": 5858
}

Attachez maintenant le débogueur dans VSCode:

  • assurez-vous que la configuration de débogage est définie sur Attach et non Launch
  • courir avec F5

Nodemon

Bien que cela ne soit pas obligatoire, si vous souhaitez également utiliser nodemon pour récupérer les modifications de code sans redémarrer le serveur, vous pouvez procéder comme suit:

Assurez-vous que nodemon est installé:

$ npm install nodemon --save-dev

Exécutez le serveur

$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

Enfin, connectez le débogueur comme indiqué ci-dessus.

19
Johnny Oshika

En supposant que vous avez babel-cli installé en tant que module local dans votre projet, les éléments suivants devraient fonctionner.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
            "stopOnEntry": false,
            "args": [
                "${workspaceRoot}/server.js"
            ],
...
8
Craig McKenna

Tu peux essayer babel-register (vous aurez également besoin d'autres modules babel compagnons comme requis):

npm install --save-dev babel-register

avec un launch.json configuration le long de ces lignes:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/index.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy",
                "--require",
                "babel-register"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": true,
            "outFiles": [
            ]
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outFiles": [],
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outFiles": []
        }
    ]
}

Ceci est vaguement basé sur vscode-debug-nodejs-es6 avec l'ajout de l'argument d'exécution babel-register.

8
songololo

babel + nodemon

Dans le VS Code Terminal, lancez votre serveur avec le --inspect argument:

nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js

Parmi les autres lignes, l'une affichera le port sur lequel le débogueur écoute:

...
Debugger listening on port 9229
...

Créez la configuration de débogage suivante:

{
    "type": "node",
    "request": "attach",
    "name": "Attach to Port",
    "address": "localhost",
    "port": 9229
}

Lancez le débogueur, et si tout s'est bien passé, vous verrez dans le terminal de sortie:

Debugger attached.

Désormais, vous pouvez déboguer votre application.

6
Luca Fagioli

Ceci est ma configuration et cela fonctionne très bien! J'utilise le débogage VSCode, mocha 6.1.4, node: v8.16.0 et Babel version 6.

Assurez-vous de charger babel-register et babel-polyfill dans runtimeArgs, sinon vous obtiendrez regeneratorRuntime is not defined!

{
    "type": "node",
    "request": "launch",
    "name": "Mocha test debug",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "protocol": "inspector",
    "stopOnEntry": false,
    "runtimeArgs": [
        "--nolazy",
        "--require",
        "babel-register",
        "--require",
        "babel-polyfill",
        "tests/*.js"
    ],
    "sourceMaps": true
}
1
helsont

Il y a deux façons de procéder:

Première option à l'aide de l'invite de commande npm

Dans le fichier package.json, créez une commande de construction qui exécutera babel

{
  "scripts": {
    "build": "babel src --out-dir dist --watch --source-maps"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-es2015-node6": "^0.4.0",
    "eslint": "^3.16.0"
  }
}

Dans launch.json Entrez le code suivant:

{
  "configurations": [
    {
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": [
        "--nolazy"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js"
      ]
    }
  ]
}

Ouvrez votre fenêtre cmd, accédez à votre fichier package.json et exécutez:

npm run build

Ouvrez votre code VS et exécutez votre code. Il s'exécutera et s'arrêtera à tous vos points d'arrêt. La raison pour laquelle cela fonctionne parce que les cartes sources sont générées et VS sait comment les mapper à votre code.

Deuxième option utilisant la tâche VS Code:

Dans VS Code, ajoutez la tâche suivante (Ctrl + Maj + P) et tapez "Tâches: configurer le gestionnaire de tâches":

Ajoutez le code suivant au fichier tasks.json

{
  "version": "0.1.0",
  "command": "${workspaceRoot}/node_modules/.bin/babel",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "args": [
        "src",
        "--out-dir",
        "dist",
        "--watch",
        "--source-maps"
      ],
      "suppressTaskName": true,
      "isBuildCommand": true
    }
  ]
}

Maintenant, exécutez la tâche, mais en appuyant sur Ctrl + Maj + B (commande de génération) et maintenant vous pouvez exécuter et déboguer votre code. VS Code fait la même chose que ce que fait npm à la première étape.

Vous devrez également configurer babel dans un fichier .babelrc (situé à la racine du projet) comme ceci:

{
  "presets": [
    "es2015-node6"
  ]
}

et jsconfig.json (situé à la racine du projet)

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}
1
Vlad Bezden

babel-node et vs code attach

  1. config un script npm dans package.json:

    "scripts": {
    "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}

  2. ajouter une configuration de débogage vs code:

    {
    "name": "Attach",
    "type": "node",
    "protocol": "legacy",
    "request": "attach",
    "port": 5858
}
0
承彬熊

Lorsque vous transpilez avec bael-node, vous devez ajouter "--inspect-brk" dans le script, afin que le script puisse se casser lorsqu'un point d'arrêt est atteint.

Ex:

"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"

Maintenant, lorsque vous exécutez à l'aide de npm run start, le débogueur sera lancé et vous pouvez voir ce qui suit dans votre console:

Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724 For help see https://nodejs.org/en/docs/inspector

Cela montre que le processus de débogage a commencé et que nous pouvons l'attacher sur le port # 9229.

Maintenant, vous devez ajouter la configuration de débogage suivante pour vs-code à attacher à ce processus: (dans launch.json)

{ "version": "0.2.0", "configurations": [ { "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229 } ] }

Après l'enregistrement, cliquez sur le bouton "démarrer le débogage", pour attacher au processus initié par le nœud plus tôt. Vous pouvez en savoir plus à ce sujet ici

0
Blaze