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 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
在JavaScript中如何使用宏详解
May 06 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
json跟xml的对比分析
2008/06/10 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
分享python数据统计的一些小技巧
2016/07/21 Python
一看就懂得Python的math模块
2018/10/21 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
高中生学习的自我评价
2013/12/14 职场文书
一句话工作感言
2014/03/01 职场文书
自荐信的格式
2014/03/10 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
无线电知识基础入门篇
2022/02/18 无线电