vscode 调试 node.js的方法步骤


Posted in Javascript onSeptember 15, 2020

引言

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome,在 Chrome 中调试是非常方便的,直接在 开发者工具的 source 栏打断点就可以了。那么,如果遇到需要写 node 相关的代码,比如 webpack 配置项,应该怎么调试来实现我们的需求呢?

VS Code 配置

在 VS Code 中单独有 debug 的菜单,需要指定 launch.json 文件,该文件为 VS Code 提供启动调试所需的各项配置。

// launch.json
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch via NPM",
   "runtimeExecutable": "npm",
   "runtimeArgs": ["run-script", "debug"],
   "cwd": "${workspaceFolder}/envloader/mobile",
   "port": 9229
  }
 ]
}

上面是我们项目的调试配置, runtimeExecutable 指明调试方式是 npm 方式, runtimeArgs 为执行调试传的参数, cwd 指定工作目录。

// package.json

"scripts": {
  "debug": "node --max_old_space_size=12288 --inspect-brk node_modules/webpack/bin/webpack.js --config build/webpack.dev.js --watch"
 },

注意 debug 脚本要传入 --inspect-brk ,这样才可以开启 node 的调试功能。

VS Code 调试菜单点击执行按钮,我们就可以愉快的调试 webpack.dev.js 代码了。

vscode 调试 node.js的方法步骤

可以看到,webpack 内部的数据结构尽收眼底。

Chrome 开发者工具风格

刚才的 launch.json 中,有 port: 9229 这个属性,我们可以在浏览器访问 chrome://inspect ,就能以我们熟悉的 chrome 风格来调试 node 程序了。

vscode 调试 node.js的方法步骤

总结

调试程序能够帮助我们对代码有更深刻的了解,能够提供运行时的执行上下文、调用栈等信息。此外,在调试线上混淆后的代码时,对各种 a、o、f 等难以理解的变量名参数名也能通过运行时的变量数据轻易分析出代码的基本逻辑。

到此这篇关于vscode 调试 node.js的方法步骤的文章就介绍到这了,更多相关vscode 调试 node.js内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
JavaScript实现串行请求的示例代码
Sep 14 #Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
You might like
PHP中基本符号及使用方法
2010/03/23 PHP
php生成随机密码的几种方法
2011/01/17 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python中Genarator函数用法分析
2015/04/08 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python Flask-web表单使用详解
2017/11/18 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python pandas库的安装和创建
2019/01/10 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
宣传部部长竞选演讲稿
2014/04/26 职场文书
政风行风建设责任书
2014/07/23 职场文书
小学三年级语文教学反思
2016/03/03 职场文书