node.js react vscode debug dell'applicazione ES6




visual studio code angular js (7)

Ho VSCode 0.5.0. Ho impostato il flag compilerOptions su "ES6" e l'editor ha iniziato a riconoscere il mio codice ES6 come corretto. Ho installato Babel. I miei test di Moka usano i compilatori Babel e i miei test passano. La mia app viene eseguita dalla riga di comando senza problemi quando la avvio con babel-node. Quando eseguo il debug dell'applicazione da VSCode, si avvia senza il supporto ES6 e l'app non riesce per problemi di sintassi ES6. Ci sono impostazioni di debug che mi sono sfuggito?


Answer #1

Quando si esegue la traspolazione con il nodo bael, è necessario aggiungere "--inspect-brk" nello script, in modo che lo script possa interrompersi quando viene colpito un punto di interruzione.

Ex:

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

Ora quando si esegue utilizzando npm run start , verrà avviato il debugger e sarà possibile visualizzare i seguenti npm run start nella console:

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

Ciò mostra che il processo di debug è iniziato e possiamo collegarci alla porta # 9229.

Ora, è necessario aggiungere la seguente configurazione del debugger per il vs-code da allegare a questo processo: (in launch.json)

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

Dopo aver salvato, fare clic sul pulsante "Avvia debug" per collegarsi al processo avviato dal nodo in precedenza. Puoi leggere di più su questo qui


Answer #2

babele + nodemon

Nel terminale VS Code, avvia il tuo server con l'argomento --inspect :

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

Tra le altre linee, una mostrerà la porta su cui il debugger è in ascolto:

...
Debugger listening on port 9229
...

Crea la seguente configurazione di debug:

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

Avvia il debugger e se tutto è andato bene vedrai nel terminale di output:

Debugger attached.

D'ora in poi, puoi eseguire il debug dell'applicazione.


Answer #3

Supponendo che babel-cli installato come modulo locale nel tuo progetto, dovrebbe funzionare quanto segue.

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

Answer #4

Di default VSCode lancia il nodo solo con un'opzione --debug-brk. Questo non è sufficiente per abilitare il supporto ES6. Se riesci a scoprire quali opzioni 'nodo babel' passa al nodo, puoi specificare le stesse opzioni nella configurazione di avvio VSCode (tramite l'attributo runtimeArgs). Ma questo non risolve il problema che il nodo babel traspone il tuo codice ES6 prima di eseguirlo.

In alternativa, puoi provare a impostare "runtimeExecutable" nella configurazione di avvio su "babel-node". Questo approccio funziona con altri wrapper di nodi, ma non ho verificato che funzioni con babel-node.

Una terza opzione (che dovrebbe funzionare) consiste nell'utilizzare la modalità attach di VSCode: per questo lancio babel-node dalla riga di comando con l'opzione '--debug'. Dovrebbe stampare un numero di porta. Quindi creare una configurazione di avvio 'attach' in VSCode con quella porta.


Answer #5

Ecco come far funzionare il debugger di VSCode con Babel 6+:

Per prima cosa installa le dipendenze localmente:

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

Quindi esegui babel-node:

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

Per impostazione predefinita, il debugger ascolterà sulla porta 5858 , quindi assicurati che la porta corrisponda a launch.json per la configurazione di Attach :

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

Ora collega il debugger in VSCode:

  • assicurati che la configurazione di debug sia impostata su Attach e non su Launch
  • corri con F5

Nodemon

Sebbene non sia necessario, se si desidera utilizzare nodemon per nodemon modifiche al codice senza riavviare il server, è possibile farlo:

Assicurati che nodemon sia installato:

$ npm install nodemon --save-dev

Esegui il server

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

Infine, collega il debugger come mostrato sopra.


Answer #6

Ci sono due modi per farlo:

Prima opzione usando il prompt dei comandi di npm

Nel file package.json creare il comando build che eseguirà 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"
  }
}

In launch.json inserire il seguente codice:

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

Apri la finestra di cmd, vai al file package.json ed esegui:

npm run build

Apri il tuo codice VS ed esegui il tuo codice. Verrà eseguito e si fermerà in tutti i punti di interruzione. La ragione per cui funziona perché le mappe sorgente sono generate e VS sa come mapparle sul tuo codice.

Seconda opzione utilizzando l'attività VS Code:

In VS Code aggiungi la seguente attività (Ctrl + Shift + P) e digita "Task: Configure Task Runner":

Aggiungi il seguente codice al file 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
    }
  ]
}

Ora esegui l'operazione, ma premendo Ctrl + Maiusc + B (comando di build) e ora puoi eseguire ed eseguire il debug del tuo codice. Il codice VS fa lo stesso di quello che sta facendo npm nel primo passaggio.

Dovrai anche configurare babel nel file .babelrc (che si trova nella radice del progetto) in questo modo:

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

e jsconfig.json (che si trova nella radice del progetto)

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

Answer #7

nodo babel e collegamento del codice

  1. config uno script npm in package.json :

    "scripts": {
        "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
    }
  2. aggiungi la configurazione del debug del codice vs:

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






visual-studio-code