vscode 调试node之npm与nodemon

eechen 发布于2019-08-26 11:51 / 1486人阅读

摘要：而模式，是连接已经启动的服务。当调试结束了，断开连接就好，明显比更方便一点。可是，我们并不想时刻开启调试功能怎么办这就需要使用上面说的模式了。使用如下的命令正常的启动项目当我们想要调试的时候，在的中运行如下的配置完美参考资料我在

更多相关内容见博客 https://github.com/zhuanyongxigua/blog

调试nodejs有很多方式，可以看这一篇How to Debug Node.js with the Best Tools Available，其中我最喜欢使用的还是V8 Inspector和vscode的方式。

在vscode中，点击那个蜘蛛的按钮

就能看出现debug的侧栏，接下来添加配置

选择环境

就能看到launch.json的文件了。

启动的时候，选择相应的配置，然后点击指向右侧的绿色三角

launch模式与attach模式

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

当request为launch时，就是launch模式了，这是程序是从vscode这里启动的，如果是在调试那将一直处于调试的模式。而attach模式，是连接已经启动的服务。比如你已经在外面将项目启动，突然需要调试，不需要关掉已经启动的项目再去vscode中重新启动，只要以attach的模式启动，vscode可以连接到已经启动的服务。当调试结束了，断开连接就好，明显比launch更方便一点。

在debug中使用npm启动

很多时候我们将很长的启动命令及配置写在了package.json的scripts中，比如

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

我们希望让vscode使用npm的方式启动并调试，这就需要如下的配置

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

在debug中使用nodemon启动

仅仅使用npm启动，虽然在dev命令中使用了nodemon，程序也可以正常的重启，可重启了之后，调试就断开了。所以需要让vscode去使用nodemon启动项目。

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

注意这里的runtimeArgs，如果这些配置是写在package.json中的话，就是这样的

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

这样就很方便了，项目可以正常的重启，每次重启一样会开启调试功能。

可是，我们并不想时刻开启调试功能怎么办？

这就需要使用上面说的attach模式了。

使用如下的命令正常的启动项目

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

当我们想要调试的时候，在vscode的debug中运行如下的配置

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

完美！

参考资料

Debugging

Node.js Debugging in VS Code

Nodemon + Babel + VSCode

我在github https://github.com/zhuanyongx...

混合云云服务器 nodemon webrtc 环境搭建与调试服务器的调试与安装 js与html调试器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107686.html

Visual Studio Code 前端调试不完全指南

摘要：接下来的内容将从以下几方面进行展开调试前端代码调试通过启动的服务器要使用的调试功能，首先就得配置文件。调试前端代码通过调试前端代码主要依赖于一个插件，该插件主要利用所开放出来的接口来实现对其渲染的页面进行调试。本文最初发布于我的个人博客：咀嚼之味 Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime，成为前端工程师们最喜爱的代码编辑器。它作为...

dongfangyiyu 2019-08-20 16:44 评论0 收藏0
开始使用 VSCode 调试

一些由浅入深的 VScode 调试例子，能让你快速理解和上手 VSCode 调试。为什么使用 VSCode ? 我是深度 vi 用户，之前 Atom 深度使用者，现在基本上转到 VSCode，下面是我选择 VSCode 的原因：颜值高，早期不如 Atom，现在已经逐渐赶上 vi 支持度好，和 Atom 还差点，但已够用调试体验好，完爆 Vim 和 Atom 插件多，和 Vim 和 Atom...

阿罗 2019-08-23 11:30 评论0 收藏0
如何搭建Electron开发环境

摘要：原文发表于如何搭建开发环境这个项目结构是我在编写基于和的七牛文件上传总结出来的本文主要介绍如何从零开始搭建高效的开发环境主要内容如下通过合理的目录划分来组织代码使用简化开发如何在渲染进程开发时使用热更新如何在主进程开发时使用自动重启如何在主原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写...

TwIStOy 2019-08-21 12:05 评论0 收藏0
vue+koa2+mongo前后端分离restful，配置和部署到云

摘要：前端项目使用搭建项目，这里就不发了安装和配置或加载。目录下文件修改来个请求，查看结果。一。前端项目 1.使用vue-cli（vue2.0）搭建项目，这里就不发了. axios安装和配置～ npm install axios 1. main.js或app.js加载axios。 import axios from axios Vue.prototype.$axios =...

miracledan 2019-06-26 17:42 评论0 收藏0
Nuxt项目支持eslint+pritter+typescript

摘要：脚手架安装好的基本项目项目名，如，按照提示安装你想要的东西，本次项目预装模式下，默认的项目目录如下保存自动格式化修复本人习惯缩进为个空格，但是生成的项目默认为个，因此需要更改配置文件下的更改为保存时自动修复错误保存自动格式化开启支脚手架安装好nuxt的基本项目 npx create-nuxt-app ，如：npx create-nuxt-app nuxt-ts，按照提示安装你想要的...

draveness 2019-08-26 13:51 评论0 收藏0