web-dev-qa-db-fra.com

débogage dans Visual Studio Code avec babel-node

J'utilise:

  • VS Code v1.3.1
  • noeud v6.3.1
  • noeud babel v6.11.4
  • Windows 10

Je ne parviens pas à m'arrêter à un point d'arrêt avec le fichier de lancement suivant. Le débogueur s'exécute et se connecte à un port, mais lorsque j'exécute les applications avec un point d'arrêt, il ne s'arrête pas au point d'arrêt et s'exécute directement. Quiconque a réussi à le faire fonctionner, veuillez en informer.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}
visual-studio-codebabel-node
36
restassured

J'ai pu le faire fonctionner en suivant ces étapes:

Package.json

Assurez-vous que vous disposez d'un script de génération avec la génération sourcemaps.

"scripts": {
    "build": "babel src -d dist --source-maps"
}

tasks.json

Assurez-vous que vous disposez du tâche qui permet VS Code de construire avec le script npm.

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

launch.json

Configurez le script sur build avant le lancement avec un preLaunchTask, démarrez le program à partir du point d'entrée source, mais avec le outDir pointant vers le dossier dist et avec sourceMaps activé.

{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/server.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [ "--nolazy" ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist"
}

Maintenant, chaque fois que vous appuyez sur F5, la transpilation babel s'exécute avant que le processus Node ne démarre, mais avec tous les sourcemaps synchronisés. Avec lui, j'ai pu utiliser des points d'arrêt et toutes les autres choses du débogueur.

26
Erick Petrucelli

Pas besoin de transpiler avec babel-node

Configuration de base (sourcemaps - toujours)

Notez les options sourceMaps et retainLines dans .babelrc:

{
  "presets": [
    "env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

Et puis dans launch.json:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"]
}

Configuration avancée (sourcemaps - débogage uniquement)

Vous pouvez modifier ce qui précède uniquement pour générer des sources-maps/retentionLines en mode débogage:

{
  "presets": ["env"],
  "env": {
    "debug": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

Et:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"],
  "env": {
    "BABEL_ENV": "debug"
  },
}
63
Izhaki

À partir de la version 1.9, VS Code essaie automatiquement d'utiliser les cartes sources par défaut, mais vous devez spécifier outFiles si les fichiers transpilés ne se trouvent pas dans le même dossier que les fichiers source.

À titre d'exemple, voici les fichiers pertinents. Dans ce cas, babel transpile du dossier src vers le dossier lib.

Remarque: Les entrées dans package.json et .vscode/tasks.json n'est requis que si vous voulez que VS Code transpile les fichiers avant le débogage.

.vscode/launch.json

Ctrl+Shift+P, >Debug: Open launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "build",
            "outFiles": [
                "${workspaceRoot}/lib/**.js"
            ]
        }
    ]
}

Remarque: Spécifiez uniquement preLaunchTask si vous configurez également les tâches build dans package.json et .vscode/tasks.json.

package.json

Ctrl+P, package.json

{
  "scripts": {
    "build": "babel src -d lib -s"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.10"
  }
}

Remarque: Vous pouvez utiliser une version différente de babel-cli et différents préréglages babel.

.vscode/tasks.json

Ctrl+Shift+P, >Tasks: Configure Task Runner

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": ["run", "build"],
            "isBuildCommand": true
        }
    ]
}

Documentation officielle du code VS

Cartes sources

Le débogueur Node.js de VS Code prend en charge les cartes source JavaScript qui aident au débogage des langues transpilées, par exemple TypeScript ou JavaScript minifié/uglifié. Avec les cartes sources, il est possible de parcourir ou de définir des points d'arrêt dans la source d'origine. Si aucune carte source n'existe pour la source d'origine ou si la carte source est cassée et ne peut pas réussir la correspondance entre la source et le JavaScript généré, les points d'arrêt apparaissent comme non vérifiés (cercles creux gris).

Les cartes sources peuvent être générées avec deux types d'inlining:

  • Cartes source en ligne: le fichier JavaScript généré contient la carte source comme URI de données à la fin (au lieu de référencer la carte source via un URI de fichier).
  • Source en ligne: la carte source contient la source d'origine (au lieu de référencer la source via un chemin).

VS Code prend en charge à la fois les cartes source en ligne et la source en ligne.

La fonctionnalité de carte source est contrôlée par l'attribut sourceMaps qui est par défaut true à partir de VS Code 1.9.0. Cela signifie que le débogage de noeud essaie toujours d'utiliser des cartes sources (s'il en trouve) et, par conséquent, vous pouvez même spécifier un fichier source (par exemple, app.ts) avec l'attribut program.

Si vous devez désactiver les mappages source pour une raison quelconque, vous pouvez définir l'attribut sourceMaps sur false.

Si les fichiers JavaScript générés (transpilés) ne vivent pas à côté de leur source mais dans un répertoire séparé, vous devez aider le débogueur VS Code à les localiser en définissant l'attribut outFiles. Cet attribut prend plusieurs modèles glob pour inclure et exclure des fichiers de l'ensemble de fichiers JavaScript générés. Chaque fois que vous définissez un point d'arrêt dans la source d'origine, VS Code essaie de trouver le code JavaScript généré dans les fichiers spécifiés par outFiles.

Étant donné que les cartes sources ne sont pas créées automatiquement, vous devez configurer le transpilateur que vous utilisez pour les créer. Pour TypeScript, cela peut être fait de la manière suivante:

tsc --sourceMap --outDir bin app.ts

Il s'agit de la configuration de lancement correspondante pour un programme TypeScript:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "launch",
            "program": "app.ts",
            "outFiles": [ "bin/**/*.js" ]
        }
    ]
}

Source

10
jordanbtucker

Ajoutez cette configuration à votre launch.json,

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

N'oubliez pas d'avoir un fichier .babelrc avec un préréglage défini dans la racine de votre projet. L'attribut cwd dans launch.json doit également être correct, sinon le compilateur babel ne pourra pas trouver .babelrc et vous obtiendrez des erreurs de compilation.

    {
        "presets": ["@babel/preset-env"]
    }

L'exécution avec cette configuration démarrera automatiquement l'application sur le port par défaut (généralement 5000) et se connectera au port de débogage généré. Les cartes sources fonctionneront sans aucune configuration supplémentaire à moins que vous n'utilisiez un super vieux vscode

1
Zigzauer

Voici ce qui a fonctionné pour moi (aucune des autres solutions n'a fonctionné pour moi avec vscode v1.33):

./ project.json

"scripts": {
  "build": "babel src -d dist --source-maps",
},

. vscode/task.json

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

. vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}
1
Kevin

Ce qui manquait dans mon cas (VSCode 1.36.0) était le remplacement des chemins de la carte source:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

La compilation a été invoquée via gulp pipeline et les sourcemaps faisaient référence à cli/index.js au lieu de src/cli/index.js. Le remappage avec sourceMapPathOverrides a corrigé cela.

0
qbik