使用vscode调试原生node环境下的js代码

赵晟鼎
789 阅读4分钟

文章前期准备

本文前提是安装好了node，并已经拥有了vscode，并进行了vscode的汉化。

首先先写一个node.js环境下的js文件。 例如下面的代码：

const readline = require('readline')
const rl = readline.createInterface({
    input:process.stdin,
    output:process.stdout
});
let countLine = 1
let N;
let tireTree = [], inx = 0, res = 0;
let item;
rl.on('line', function(line) {
    if(countLine === 1) {
        //求和
        N = parseInt(line);
    } else {
        // 处理input
        item = line;
        if(countLine <= N + 1) {
            item = item.split("");
            let p = 0, before = 0;
            item.forEach((it, index) => {
                if (tireTree[p] === undefined) {
                    tireTree[p] = {};
                }
                if (tireTree[p][it] === undefined) {
                    tireTree[p][it] = {};
                    tireTree[p][it].index = ++inx;
                    tireTree[p][it].count = before;
                    if (index === item.length - 1) {
                        tireTree[p][it].count++;
                        res = Math.max(res, tireTree[p][it].count);
                    }
                }
                before = tireTree[p][it].count;
                p = tireTree[p][it].index;

            })
        }
        if (countLine === N + 1) {
            console.log(res)
        }
    }

    countLine++;
})

之后开始下一步。

配置vscode

  1. 使用vs访问项目根目录或是你js文件所在的文件夹。
  2. 点击右边的运行调试栏。

image.png

  1. 点击下图的蓝色字样【创建launch.json文件】

image.png

  1. 此时会弹出一个选项框，选择node.js

image.png 5. 此时会生成一个全新的launch.json文件，该文件就是调试时的配置。默认代码如下：

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

以上代码中的"program": "${file}"是指定点击debug开始调试时，是调试哪个文件，${file}指的是你点击debug时，当时vscode所展现的界面。当然可以写固定路径，当路径写错时，会在下图中的位置得到报错，并退出调试模式。

image.png

要修改的内容

现在要修改"request": "launch",为"request": "attach",

launch.json 配置文件里有 request 字段，取值范围为：launch 和 attach

  • launch：vscod e独立自主的跑起一个调试进程

  • attach：是通过 node --inspect-brk xxx.js 自行运行支持调试的代码，然后 vscode 再去链接代码，开启代码调试

另一种做法

或者你不用做以上步骤，直接在项目中的.vscode文件夹中创建一个lauch.json文件并书写相应的配置。若是看不到.vscode文件夹。是因为没有开启隐藏文件的查看。

点击文件夹上的查看后，勾选相应的选项。 image.png

调试没有输出的代码

当代码中无输出时，此时可以在文件中设置断点，然后点debugger中的绿色播放键进行调试

image.png

其中可以在监视中添加你想要查看的变量数据

image.png

而这些按钮中最常用的是第一个、第二个和最后两个，第一个在代码进行调试时会变为三角形，点击会继续运行，直到程序再次遇到断点，第二个按钮是逐步运行下一步，倒数第二个按钮是重新执行代码，最后一个是结束调试。

调试有输入的代码

但是这样的调试方法并不适用于咱们的样例代码————有输入的代码。

想调试有输入的代码还得增加以下步骤:

  1. 首先在vscode的终端键入node --inspect 文件路径【文件路径写要启动的文件的路径】。这段命令运行了指定的node文件，并开启调试模式
  2. 之后再点击debugger中的开始键，运行代码进行调试。

此时就可以键入输入安全调试了，但是你若是在之前调试无输入的代码的地方————调试控制台，进行输入和输出时，你会发现输入无法接入到程序，直接像是在浏览器控制台随便输入一样。

这是因为我们在这里进行的第一步操作是在终端运行node代码，此时调试的是正在运行的node代码，所以输入输出应该都是在终端中进行的，而不是在调试控制台中进行的。所以有关输入与输出的应该在终端进行。

顺带一提，不开调试模式时，键入node --inspect 文件路径可以直接运行指定node.js文件。

最终效果

在调试控制台试下效果【输入 2 回车 i 回车 ii】

你会发现输入第二个数据的时候就报错了，发现跟我当前的代码对接不上，是类似于直接在浏览器控制台键入命令一样。

image.png

在终端尝试同样输入，最终答案符合预期。

image.png

备注【样例代码】

样例代码是洛谷题：魔族密码的题解。

avatar
文章
阅读
粉丝