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 相关文章推荐
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
vue组件与复用详解
Apr 08 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue 自定义组件的写法与用法详解
Mar 04 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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 八种基本的数据类型小结
2011/06/01 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
Python字符串处理函数简明总结
2015/04/13 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
简单实现python爬虫功能
2015/12/31 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python OpenCV实现视频分帧
2019/06/01 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
拓展培训心得体会
2014/01/04 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
小学科学教学计划
2015/01/21 职场文书