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中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
js实现无缝滚动特效
Dec 20 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
vue实现滑动到底部加载更多效果
Oct 27 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
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
AngularJS 路由详解和简单实例
2016/07/28 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python实现批量下载图片的方法
2015/07/08 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python数据集切分实例
2018/12/08 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python中append函数用法讲解
2020/12/11 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
python中PyQuery库用法分享
2021/01/15 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
方正Java笔试题
2014/07/03 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
优良学风班总结材料
2014/02/08 职场文书
大学毕业感言200字
2014/03/09 职场文书
就业协议书样本
2014/08/20 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2019思想汇报范文
2019/05/21 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python