官网文档:https://code.visualstudio.com/docs/nodejs/nodejs-debugging

node调试方法(日志和debuuger):https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/

https://segmentfault.com/a/1190000014664764

https://www.jianshu.com/p/8b034954abc9

(1)调试npm包非script执行,调试vue-cli配置如下

launch.json

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node", //类型
"request": "launch", //有lanch和attach两种
"name": "Launch via NPM",
"runtimeExecutable": "node",
"args": ["${workspaceRoot}\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js","build","--mode=test"], //通过npm-link后的指令地址从node_modules的bin里面去找(vue-cli-service build)
"restart": true,
"protocol": "inspector", //相当于--inspect了
"sourceMaps": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"runtimeArgs": [ //对应nodemon --inspect之后除了启动文件之外的其他配置
// "--exec",
// "babel-node",
// "--presets",
// "env"
]
},
]
}
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\h5\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js",
"args": ["serve","--mode","test"],
"stopOnEntry": true
} ]
}

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

(2)调试npm包script执行

"scripts": {
"start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
"dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm", //runtimeExecutable表示要使用的运行时,默认为node,这里我们配置成了npm
"runtimeArgs": [
"run-script", "dev" //这里的dev就对应package.json中的scripts中的dev
],
"port": 9229 //这个端口是调试的端口,不是项目启动的端口
},

--inspect-brk=是node、nodemon打开调试,后面可加端口号--inspect-brk=5858

runtimeExecutable - This is the binary or script actually launched by VSCode. In this case it’s nodemon instead of your application. If you don’t have nodemon globally installed you can reference the relative path with ${workspaceRoot}/node_modules/nodemon/bin/nodemon.js.

args - This represents the last argument passed to nodemon, so it should be the main file of your application.

runtimeArgs - This is the glue that holds all of this together. These arguments get passed in the order you specify to nodemon before args. Order is important, and these settings won’t work if they are in args. The --require and babel-register need to be separate because arguments in this list cannot have spaces; you’ll get an error if you try to do that.

sourceMaps - VSCode needs to know about source maps. If this setting, or the one in package.json, is missing then you’ll get an error.

(3)在debug中使用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

https://www.jianshu.com/p/57cd63d169e0  vue-cli源码大体流程

vscode调试npm包技巧的更多相关文章

  1. 使用vscode调试小段的typescript代码

    最近在学习typescript.学习 嘛,当然免不了各种练习,试错.那么使用vscode就可以很方便的做到. 首先是安装node.js.我们知道,node.js提供了js脱离浏览器的执行平台.node ...

  2. 从零系列--开发npm包(一)

    一.目的 主要是纪录和回顾自己开发的一些步骤以及遇到的一些问题和解决方案 二.准备工作 1.IDE 选择 VS Code 2.安装node 环境 (https://nodejs.org/zh-cn/) ...

  3. nodejs进阶(1)——npm使用技巧和最佳实践

    nodejs进阶教程,小白绕道!!! npm使用技巧和最佳实践 前提:请确保安装了node.js npm的最佳实践 npm install是最常见的npm cli命令,但是它还有更多能力!接下来你会了 ...

  4. VSCode调试go

    VSCode调试go语言出现:exec: "gcc": executable file not found in %PATH%   1.问题描述 由于安装VS15 Preview ...

  5. npm包的更新说明,你还敢不看吗

    npm包的更新说明,你还敢不看吗 前言 平时工作少不了依赖一些第三方的npm包,站在各位大牛的肩膀上来更好的写bug,此外还可以学习各位大佬们的各种设计思路和优雅实现.不过npm包虽好,但使用之前也要 ...

  6. vscode 调试node.js

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...

  7. vscode调试html文件

    1. vscode调试html文件 1.1. 使用Debugger for Chrome进行调试 1.1.1. 基于本地file配置方式调试 1.1.2. 基于服务端配置方式调试 1.1.2.1. 启 ...

  8. 自定义npm包的创建、发布、更新和撤销

    大纲 1.准备2.自定义npm包3.发布自定义npm包4.引用npm包5.更新npm包6.撤销发布的npm包 简书原文 https://www.jianshu.com/p/d737bc5df5b7 1 ...

  9. 使用vscode调试Nodejs

    之前想用vscode调试nodejs,总是不成功,也走很多弯路,现在记录下来. 首先新建一个文件夹,用vscode打开这个文件夹, 用vscode自带的终端执行npm init,输入名称,其他的可不输 ...

随机推荐

  1. 查看MySQL 连接信息--连接空闲时间及正在执行的SQL

    MySQL 客户端与MySQL server建立连接后,就可以执行SQL语句了. 如何查看一个连接上是否正在执行SQL语句,或者连接是否处于空闲呢? 下面我们做下测试. 1.查看连接的空闲时间 首先看 ...

  2. Ubuntu下使用AMD APP编写OpenCL程序

    对于Ubuntu或其近亲(Lubuntu.Kubuntu.Mint等)编写OpenCL程序也不会太难.由于本例用的是AMD APP SDK,因此需要AMD的GPU以及相关驱动.首先,去AMD官网下载G ...

  3. 链接Linux工具(SecureCRT)

    SecureCRT下载 点我下载 http://download.csdn.net/download/weixin_39549656/10207279 安装 先运行注册机 链接 输入密码 出现以下界面 ...

  4. 关于Server2008 R2日志的查看

    Server 2008 r2通过 系统事件查看器 分析日志: 查看 系统 事件: 事件ID号: 审计目录服务访问 4934 - Active Directory 对象的属性被复制 4935 -复制失败 ...

  5. js手写数组Api--模拟实现常见数组Api

    数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使 ...

  6. maskrcnn_benchmark 理解

    转载与参考: 1,https://zhuanlan.zhihu.com/p/58101945 2,https://blog.csdn.net/linolzhang/article/details/71 ...

  7. python报错No module named 'pylab'

    pip instal matplotlib

  8. 深入解析d3弦图

    记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继 ...

  9. pixi小游戏开发(vue+typescript)

    一直以来都觉得typescript是以后前端发展的趋势,一些大厂的前端项目都已经在用ts来替代js了. 正好最近刚开始准备用pixi写个小游戏,因为刚开工没多久,于是今天就将之前的功能用ts去实现了一 ...

  10. axios中的qs介绍

    首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 地址: https://www.npmjs.com/package/qs qs.parse().qs.string ...