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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
最简单的tab切换实例代码
May 13 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
详解A标签中href=""的几种用法
Aug 20 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 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/04/25 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Vue实现简易计算器
2020/02/25 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python切片用法实例教程
2014/09/08 Python
Python格式化输出%s和%d
2018/05/07 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python中GIL的使用详解
2018/10/03 Python
python3实现微型的web服务器
2019/09/03 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
党员公开承诺书和承诺事项
2014/03/25 职场文书
小学二年级评语
2014/04/21 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
自荐信格式范文
2015/03/04 职场文书
患者身份识别制度
2015/08/06 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers