Heim  >  Artikel  >  Entwicklungswerkzeuge  >  So führen Sie vscode npm aus

So führen Sie vscode npm aus

藏色散人
藏色散人Original
2019-11-18 09:42:407049Durchsuche

So führen Sie vscode npm aus

Wie führe ich vscode npm aus?

Vscode-Debugging-Knoten npm und nodemon

Es gibt viele Möglichkeiten, Node.js mit den besten verfügbaren Tools zu debuggen. Meine Lieblingsmethode ist die Verwendung von V8 Inspector und vscode.

Klicken Sie in vscode auf die Spider-Schaltfläche

, um die Debug-Seitenleiste anzuzeigen, und fügen Sie dann die Konfiguration hinzu.

Wählen Sie die Umgebung aus.

Sehen Sie sich die Datei launch.json an .

Wählen Sie beim Starten die entsprechende Konfiguration aus und klicken Sie dann auf das nach rechts zeigende grüne Dreieck

Startmodus und Anhängemodus

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

Wenn die Anfrage gestartet wird, wird sie gestartet Startmodus Ja, dies ist das Programm, das von vscode aus gestartet wird. Wenn es debuggt, befindet es sich immer im Debugging-Modus. Im Anhängemodus wird eine Verbindung zu einem bereits gestarteten Dienst hergestellt. Wenn Sie beispielsweise das Projekt außerhalb gestartet haben und es plötzlich debuggen müssen, müssen Sie das gestartete Projekt nicht schließen und in vscode neu starten. Solange Sie es im Anhängemodus starten, kann vscode eine Verbindung zum bereits gestarteten Dienst herstellen . Wenn das Debuggen abgeschlossen ist, trennen Sie einfach die Verbindung, was offensichtlich bequemer ist als das Starten.

Verwenden Sie npm, um im Debug zu starten

Oft schreiben wir lange Startbefehle und Konfigurationen in die Skripte von package.json, wie zum Beispiel

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

Wir möchten, dass vscode mit npm startet und debuggt, was die folgende Konfiguration erfordert

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

Verwenden Sie nodemon, um im Debug zu starten

Verwenden Sie einfach npm zum Starten, obwohl nodemon verwendet wird Im Befehl dev kann das Programm normal neu gestartet werden, aber nach dem Neustart wird das Debuggen unterbrochen. Sie müssen also zulassen, dass vscode nodemon verwendet, um das Projekt zu starten.

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

Achten Sie auf die runtimeArgs hier. Wenn diese Konfigurationen in package.json geschrieben sind, sieht es so aus

nodemon --inspect --exec babel-node --presets env ./bin/www

Das ist sehr praktisch. Das Projekt kann normal neu gestartet werden Bei jedem Neustart wird die Debugging-Funktion aktiviert.

Aber was sollen wir tun, wenn wir die Debugging-Funktion nicht ständig aktivieren möchten?

Hierfür ist die Verwendung des oben genannten Anhängemodus erforderlich.

Verwenden Sie den folgenden Befehl, um das Projekt normal zu starten

nodemon --inspect --exec babel-node --presets env ./bin/www

Wenn wir debuggen möchten, führen Sie die folgende Konfiguration im Debug von vscode aus

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}

Perfekt!

Das obige ist der detaillierte Inhalt vonSo führen Sie vscode npm aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn