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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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的分页功能
2007/03/21 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python关闭windows进程的方法
2015/04/18 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python中six模块基础用法
2019/12/08 Python
python内置模块collections知识点总结
2019/12/19 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
党员个人思想汇报
2013/12/28 职场文书
精彩自我鉴定
2014/01/16 职场文书
监察建议书范文
2014/03/12 职场文书
高中教师评语大全
2014/04/25 职场文书
工业设计专业自荐书
2014/06/05 职场文书