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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
解决vuecli3中img src 的引入问题
Aug 04 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
从刷票了解获得客户端IP的方法
2015/09/21 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python 列表推导式使用详解
2019/08/29 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
军训自我鉴定200字
2014/02/13 职场文书
百日安全活动总结
2014/05/04 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
消防安全培训工作总结
2015/10/23 职场文书