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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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 静态化实现代码
2009/03/20 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
法律专业实习鉴定
2013/12/22 职场文书
给国外客户的邀请函
2014/01/30 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
校园安全广播稿范文
2014/09/25 职场文书
三八妇女节标语
2014/10/09 职场文书
召开会议通知范文
2015/04/15 职场文书
2015中学教学工作总结
2015/07/22 职场文书