Maison > outils de développement > VSCode > Comment exécuter vscode npm

Comment exécuter vscode npm

藏色散人
Libérer: 2019-11-18 09:42:40
original
7108 Les gens l'ont consulté

Comment exécuter vscode npm

Comment exécuter vscode npm ?

nœud de débogage vscode npm et nodemon

Il existe de nombreuses façons de déboguer nodejs. Vous pouvez lire cet article Comment déboguer Node.js avec les meilleurs outils disponibles Parmi elles, ma méthode préférée est d'utiliser V8 Inspector et vscode.

Dans vscode, cliquez sur le bouton araignée

pour voir la barre latérale de débogage, puis ajoutez la configuration

Sélectionnez l'environnement

Voir le fichier launch.json .

Au démarrage, sélectionnez la configuration correspondante, puis cliquez sur le triangle vert pointant vers la droite

mode de lancement et mode attachement

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}
Copier après la connexion

Lorsque la requête est lancée, elle est mode de lancement Oui, le programme est démarré à partir de vscode. S'il est en cours de débogage, il sera toujours en mode débogage. Le mode attachement consiste à se connecter à un service déjà démarré. Par exemple, si vous avez démarré le projet à l'extérieur et que vous avez soudainement besoin de le déboguer, vous n'avez pas besoin de fermer le projet démarré et de le redémarrer dans vscode. Tant que vous le démarrez en mode attachement, vscode peut se connecter au service déjà démarré. . Une fois le débogage terminé, déconnectez-vous simplement, ce qui est évidemment plus pratique que le lancement.

Utilisez npm pour démarrer en débogage

Souvent, nous écrivons de longues commandes et configurations de démarrage dans les scripts de package.json, telles que

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},
Copier après la connexion

Nous voulons que vscode démarre et débogue à l'aide de npm, ce qui nécessite la configuration suivante

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"//这里的dev就对应package.json中的scripts中的dev
  ],
    "port": 9229//这个端口是调试的端口,不是项目启动的端口
},
Copier après la connexion

Utilisez nodemon pour démarrer en débogage

Utilisez simplement npm pour démarrer, bien que nodemon soit utilisé dans la commande dev, le programme peut être redémarré normalement, mais après le redémarrage, le débogage est déconnecté. Vous devez donc laisser vscode utiliser nodemon pour démarrer le projet.

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",//相当于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [//对应nodemon --inspect之后除了启动文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},
Copier après la connexion

Faites attention aux runtimeArgs ici. Si ces configurations sont écrites dans package.json, cela ressemblera à ceci

nodemon --inspect --exec babel-node --presets env ./bin/www
Copier après la connexion
Copier après la connexion

C'est très pratique Le projet peut être redémarré normalement, pareil. à chaque redémarrage, la fonction de débogage sera activée.

Mais que devons-nous faire si nous ne voulons pas activer la fonction de débogage à tout moment ?

Cela nécessite d'utiliser le mode de pièce jointe mentionné ci-dessus.

Utilisez la commande suivante pour démarrer le projet normalement

nodemon --inspect --exec babel-node --presets env ./bin/www
Copier après la connexion
Copier après la connexion

Lorsque nous voulons déboguer, exécutez la configuration suivante dans vscode debug

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}
Copier après la connexion

Parfait !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal