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类和继承 this属性使用说明
Sep 03 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
详解ES6中的let命令
2020/04/05 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
工作失职检讨书范文
2014/01/16 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
典型事迹材料范文
2014/12/29 职场文书
学校社团活动总结
2015/05/07 职场文书
房贷工资证明范本
2015/06/12 职场文书
初三英语教学反思
2016/02/15 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL