如何在VsCode中进行JS后缀文件的代码调试

啪的一下，很快啊，今天想在VsCode中直接调试JS代码，包括断点调试、实时看到中间变量之类的效果。大意了啊，按下F5的才发现没有闪，啥子都么得，根本不像C、matlab这样可以直接调试的效果。折腾了一会才发现需要进行一些配置，现在简单总结一下，希望能帮到同是小白的你。

首先明确一下，这种配置只针对以 .js为后缀的代码文件直接在VsCode直接调试使用，至于包含在 .html文件内的调试，暂未探索。

 1.安装nodejs与Code Runner

1.1 安装node.js

对的，你没看错，虽然你可能像我一样还没开始学nodejs，不过并不难，下载地址：https://nodejs.org/en/download/，具体安装方法参考：https://www.runoob.com/nodejs/nodejs-install-setup.html。

1.2 安装扩展包：Code Runner

直接在VsCode应用商店搜索Code Runner扩展包，并点击安装即可。

 2.环境配置

①依次点击运行(Run)-打开配置(Open Configurations)，会弹出“选择环境”的窗口，选择Node.js，会弹出一个名为 launch.json的窗口。

②修改配置文件，在将图中 "program": "${workspaceFolder}\\01-栈的先入后出.js" 这一行替换为

//"program": "${workspaceFolder}\\js名称.js"//调试当前文件夹下面指定的名字的js文件
"program": "${file}"//调试当前JS文件

注意，上图中每个人的第14行代码并不一致，"program": "${workspaceFolder}" 后面的是自己当前所打开的JS文件，不用在意。

或者可以完全用以下代码替换

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            //"program": "${workspaceFolder}\\js文件名称.js"//调试当前文件夹下面指定的名字的js文件
            "program": "${file}"//调试当前JS文件
        }
    ]
}

至此，配置结束。

③关于上述配置文件的一些简单解释

第14行的意思是调试指定JS文件，${workspaceFolder} 为当前文件夹，后面就是你具体的JS文件，但是这样比较麻烦，每次还需要重新改文件名。我更建议第15行，意思就是当前JS文件。

还需注意第10行，这个name里的名字就是这个配置文件的名字，在具体调试窗口是可选的，具体可看下图，调试时选择自己所对应的名字。

3. 代码验证

新建一个JS文件，设置断点可以看到中间变量与结果。

//验证调试环境是否搭建成功
const arr_1 = [];//定义了一个空数组
arr_1.push(1);//在空数组填充一个数据
arr_1.push(2);
const item_1 = arr_1.pop(1);//吐出第一个数据，实际上吐出的是最后进入的数据
const item_2 = arr_1.pop(2);
console.log("hello world");

PS：后续对其原理有所理解后会补充，学习阶段还是希望自己能对技术有更深入的理解。