Ik gebruik:

• VS-code v1.3.1
• knooppunt v6.3.1
• babel-node v6.11.4
• Windows 10

Ik kan niet stoppen bij een onderbrekingspunt met het volgende startbestand.
De debugger wordt uitgevoerd en wordt aan een poort gekoppeld, maar wanneer ik de toepassingen met een breekpunt uitvoer, stopt het niet bij het breekpunt en loopt het er gewoon doorheen.
Iedereen die dit aan het werk heeft gekregen, gelieve te adviseren.

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

Antwoord 1, autoriteit 100%

Transpileren met @babel/node is niet nodig

Basisconfiguratie (bronkaarten – altijd)

Let op de opties sourceMapsen retainLinesin .babelrc:

{
  "presets": [
    "@babel/preset-env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

En dan in launch.json:

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

Geavanceerde instellingen (bronkaarten – alleen ontwikkeling)

U kunt het bovenstaande zo aanpassen dat u alleen source-maps/retainLines genereert in ontwikkelingsmodus:

{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "development": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

En:

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

Opmerkingen

• Momenteel "type": "pwa-node"(zie meer)werkt niet met deze setup.
• Voor "--nolazy"zie dit.
• "BABEL_ENV": "development"– Tenzij een andere waarde is setde standaard is development, dus het is niet essentieel om dit toe te voegen aan de startconfiguratie (maar maakt de zaken wel explicieter).

Antwoord 2, autoriteit 33%

Ik heb het werkend gekregen door deze stappen te volgen:

Pakket.json

Zorg ervoor dat je een buildscript hebt met sourcemapsgeneratie.

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

tasks.json

Zorg ervoor dat je de taakhebt waarmee VS Codekan bouwen met het npm-script.

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

launch.json

Configureer het script om voor de lancering te bouwenmet een preLaunchTask, start het programvanaf het broningangspunt, maar met de outDirwijzend naar de map disten met sourceMapsingeschakeld.

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

Elke keer dat u op F5drukt, wordt de transpilatie van babeluitgevoerd voordat het Node-proces start, maar met alle bronkaarten gesynchroniseerd. Hiermee kon ik breekpunten en alle andere debugger-dingen gebruiken.

Antwoord 3, autoriteit 12%

Vanaf versie 1.9 probeert VS Code standaard automatisch bronkaarten te gebruiken, maar u moet outFilesopgeven als de getranspileerde bestanden zich niet in dezelfde map bevinden als de bronbestanden.

Als voorbeeld zijn hier de relevante bestanden. In dit geval transpileert babel van de map srcnaar de map lib.

Opmerking:de vermeldingen in package.jsonen .vscode/tasks.jsonzijn alleen vereist als u wilt dat VS Code de bestanden voordat u gaat debuggen.

.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"
            ]
        }
    ]
}

Opmerking:Geef alleen preLaunchTaskop als u ook de build-taken in package.jsonen .vscode/tasks.json.

pakket.json

Ctrl+P, package.json

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

Opmerking:u kunt een andere versie van babel-clien andere voorinstellingen voor babel gebruiken.

.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
        }
    ]
}

Officiële VS-codedocumentatie

Bronkaarten

De Node.js debugger van VS Code ondersteunt JavaScript-bronkaarten die helpen bij het debuggen van getranspileerde talen, b.v. TypeScript of geminimaliseerd / lelijk JavaScript. Met bronkaarten is het mogelijk om één stap door de oorspronkelijke bron te bladeren of breekpunten in te stellen. Als er geen bronkaart bestaat voor de originele bron of als de bronkaart is verbroken en niet succesvol kan worden toegewezen tussen de bron en het gegenereerde JavaScript, worden breekpunten weergegeven als niet-geverifieerd (grijze holle cirkels).

Bronkaarten kunnen worden gegenereerd met twee soorten inlining:

• Inline bronkaarten: het gegenereerde JavaScript-bestand bevat de bronkaart als een gegevens-URI aan het einde (in plaats van naar de bronkaart te verwijzen via een bestands-URI).
• Inline-bron: de bronkaart bevat de originele bron (in plaats van naar de bron te verwijzen via een pad).

VS Code ondersteunt zowel de inlined source mapsals de inlined source.

De bronkaartfunctie wordt beheerd door het sourceMaps-attribuut dat standaard is ingesteld op truebeginnend met VS Code 1.9.0. Dit betekent dat debugging van knooppunten altijd probeert om bronkaarten te gebruiken (als het die kan vinden) en als gevolg daarvan kun je zelfs een bronbestand (bijv. app.ts) specificeren met het programattribuut.

Als u om de een of andere reden bronkaarten moet uitschakelen, kunt u het kenmerk sourceMapsinstellen op false.

Als de gegenereerde (getranspileerde) JavaScript-bestanden niet naast hun bron staan, maar in een aparte map, moet u de VS Code-debugger helpen ze te lokaliseren door het kenmerk outFilesin te stellen. Dit kenmerk heeft meerdere glob-patronen nodig voor het opnemen en uitsluiten van bestanden uit de set gegenereerde JavaScript-bestanden. Telkens wanneer u een onderbrekingspunt instelt in de oorspronkelijke bron, probeert VS Code de gegenereerde JavaScript-code te vinden in de bestanden die zijn gespecificeerd door outFiles.

Aangezien bronkaarten niet automatisch worden gemaakt, moet u de transpiler configureren die u gebruikt om ze te maken. Voor TypeScript kan dit op de volgende manier worden gedaan:

tsc --sourceMap --outDir bin app.ts

Dit is de corresponderende opstartconfiguratie voor een TypeScript-programma:

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

Bron

Antwoord 4, autoriteit 5%

Dit is wat voor mij werkte (geen van de andere oplossingen werkte voor mij met 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"]
  }]
}

Antwoord 5, autoriteit 2%

Voeg deze configuratie toe aan uw 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"]
    }
]
}

Vergeet niet om het .babelrc-bestand met de voorinstelling in de hoofdmap van uw project te definiëren. Ook het cwd-kenmerk in launch.json moet correct zijn, anders kan de babel-compiler .babelrc niet vinden en krijg je compilatiefouten.

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

Als u met deze configuratie werkt, wordt de toepassing automatisch gestart op de standaardpoort (meestal 5000) en gekoppeld aan de gegenereerde foutopsporingspoort.
Bronkaarten werken zonder extra configuratie, tenzij je een super oude vscode gebruikt

Antwoord 6

Wat in mijn geval (VSCode 1.36.0) ontbrak, was het overschrijven van bronkaartpaden:

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

De compilatie werd aangeroepen via de gulp-pijplijn en de bronkaarten verwezen naar cli/index.jsin plaats van src/cli/index.js. Opnieuw toewijzen met sourceMapPathOverridesheeft dat opgelost.