VS Code + Node.js 断点调试

一、安装Node.js

详情参考Node.js 安装配置

首先下载链接下载Windows Installer (.msi)并安装,之后一路next,安装模式选择add to path,可以自动添加路径至环境变量中。

win+r
cmd
path

测试是否成功添加至环境路径中

node -v

测试是否成功安装

因为nmp会随同NodeJS一起安装,所以不用单独安装。

npm -v

测试nmp是否安装成功

二、VS Code

1.打开左下角插件库,搜索 code runner 并下载

在这里插入图片描述
这样在js文件中,可以直接右键=》run code 或快捷键 ctrl + alt + n 直接运行js文件
在这里插入图片描述
下面的输出面板直接显示console.log内容,不用在浏览器中打开和查看了

2. 打开左下角插件库,搜索debugger for chrome 并下载

在这里插入图片描述

三、断点调试

点击左栏运行与调试按钮,然后在下拉框处选择添加配置

在这里插入图片描述

编辑launch.js

在这里插入图片描述
在configurations中添加一段:

		{
            "type": "node",
            "name": "调试js程序",
            "request": "launch",
            "program": "${workspaceFolder}/bd.js"
        },

变成:

{
    "configurations": [
        {
            "type": "node",
            "name": "调试js程序",
            "request": "launch",
            "program": "${workspaceFolder}/bd.js"
        },
        {
            "type": "pwa-chrome",
            "name": "http://127.0.0.1:5500/3.html",
            "request": "launch",
            "url": "http://127.0.0.1:5500/3.html"
        }
    ]
}
  • type 指类型,因为是调试js,所以这里选择node
  • name 为下拉框下的命名,根据命名选择调试配置
  • request”: “launch”
  • program为当前入口,${workspaceFolder}/bd.js"表示当前工作路径下的bd.js文件,之后调试新的文件可以直接修改这里的路径,或者新增配置

点击左栏运行与调试按钮,打断点,然后在下拉框处选择添加刚刚加的配置,点击旁边绿色运行按钮就可以开始断点调试了


版权声明:本文为tensixchuan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。