官网文档: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. Winform运行外部控制台程序,并在程序结束后执行其他动作

    ProcessStartInfo psi = new ProcessStartInfo(); psi.FileName = @"程序名"; psi.Arguments = @&qu ...

  2. C++ STL——模板

    目录 一 函数模板的特性 二 模板的实现机制 三 类模板 四 类模板如何派生子类 五 普通类的.h和.cpp文件分离 六 类模板在类内类外的实现 七 模板的应用实例 注:原创不易,转载请务必注明原作者 ...

  3. <JavaScript>数组的sort()方法中比较函数是怎么工作的

    sort()函数比较时调用的是每个数组项的toString()方法,并非按数值大小进行比较,所以往往得不到我们想要的结果. 比如: ,,,,]; values.sort( ); alert(value ...

  4. 加载自定义目录下的springmvc.xml配置文件

    在默认情况下:springmvc框架的配置文件必须叫<servlet-name>-servlet.xml 且必须放在/WEB-INF/目录下,我们可以在web.xml文件中,为Dispat ...

  5. jQuery.extend函数

    http://www.cnblogs.com/luckboy/archive/2009/06/25/1510870.html 1.扩展jQuery静态方法. 1$.extend({ 2test:fun ...

  6. 四、VSCode调试vue项目

    1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...

  7. android破解AndroidManifest.xml文件

     使用java -jar E:\AXMLPrinter2.jar E:\AndroidManifest.xml > E:\manifest.txt 但要先下载AXMLPrinter2.jar(h ...

  8. Django 虚拟化环境创建

    A:linux下的方法: 1.用python3.6内置的venv创建名为 typeidea-env虚拟化环境: python3.6 -m venv typeidea-env 2.激活环境: cd ty ...

  9. 【AMAD】django-formapi -- 一个DJANGO API框架,可使用签名request,可使用form作为API的验证工具

    动机 简介 个人评分 动机 如何快速构建API,使用view就行了? 如果快速构建一个可以验证参数的API,使用django-formapi1吧! 简介 class DivisionCall(call ...

  10. kubeadm快速安装k8s

    1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@localhost ~]# systemc ...