node系列:学会node调试

前言

该文章来自于chh大佬的投稿,为他打call

为何需要node调试?

熟练使用node调试能让你在日常开发中更快的定位问题所在的代码,提高开发效率

如何进行node调试?

node调试方式多样,本篇只介绍笔者最熟悉的使用vscode的调试方式

使用vscode运行

vscode左侧共有五个按钮,第四个按钮即为"运行"按钮,假如你的根目录没有.vscode文件夹,点及"创建launch.json"文件后选择Node.js,创建成功后在文件夹目录下新增了一个.vscode文件夹及launch.json文件

launch.json文件介绍

创建后默认的launch.json文件长这样,当然这是对于Node.js调试而言,如果选择其他的调试方式,会有不用的调试配置字段,接下来简单介绍下这些字段。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\index.js"
    }
  ]
}
  • type:用于此启动配置的调试器的类型

  • request:此启动配置的请求类型。

  • name:在调试启动配置下拉列表中显示的易于阅读的名称(即下图红框中的标题名称)

  • skipFiles:指定跳过单步调试的代码,"<node_internals>/**"表示跳过node核心模块,因为是数组所以很明显可以添加选项:

 "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",  //跳过node_modules
    "<node_internals>/**/*.js"//跳过node核心模块
  ]
  • program:指定调试入口文件地址。本例我测试代码只在根目录创建index.js文件,所以会自动生成${workspaceFolder}\index.js。通常我们的node项目根目录入口文件为app.js,这种情况下会生成${workspaceFolder}\app.jsworkspaceFolder表示工作区文件夹的根路径,如果你想调试的入口文件为你当前所打开文件,可新增如下配置(新增的配置项只需在configurations下如同默认配置项一样新增对象配置即可):

"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "启动程序",
    "skipFiles": [
      "<node_internals>/**"
    ],
    "program": "${workspaceFolder}\index.js"
  },
  {
    "type": "node",
    "request": "launch",
    "name": "test",
    "skipFiles": [
      "<node_internals>/**"
    ],
    "program": "${file}"
  }
  ...
]

调试入门

首先在需要在文件行数右侧点击打上断点(红色圆),然后点击下图绿色启动按钮即可开始调试,代码自动运行到断点所在行,此时鼠标移入变量可以看到每个变量的当前状态

nodemon调试

很多时候我们希望每次修改完文件ctrl+s保存后调试可自动重新启动,而不是每次修改都需要点击绿色启动按钮开启调试,这时nodemon调试就派上用场了

什么是nodemon?

nodemon是一种node工具,通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于node.js的应用程序。总而言之,我们修改node文件后,不用再每次node+文件名启动node文件,而只需通过nodemon命令启动一次,后面每次保存文件都会自动重启node文件。

nodemon配置

前提条件

  • 安装nodemon包

配置nodemon调试

打开根目录的.vscode文件下的launch.json文件,添加配置选择Node.js:Nodemon安装程序,选择后configurations下自动新增了nodemon配置项

使用nodemon调试

当你配置完并且ctrl+s保存后,调式启动列表新增了nodemon的启动选项,点击启动即可:

启动成功后自动跳转到启动文件:

我们在代码上添加一行console.log,然后ctrl+s保存试试:

是不是看起来很棒的样子~(=^▽^=)~

在线笔记

最近花了点时间把笔记整理到语雀上了,方便同学们阅读:语雀笔记入口:https://www.yuque.com/wanggangfeng/bsp75t/inu4gw

最后

1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。

2.关注公众号前端壹栈,回复「1」加入前端交流群!「在这里有好多前端开发者,会讨论前端知识,互相学习」!

3.也可添加公众号【前端壹栈】,一起成长

原文地址:https://www.cnblogs.com/vnues/p/14300325.html