提升面试印象分，一些简单的 js 调试方法

校招面试时，经常看到前端小伙伴做编程题的时候，不会断点调试。少有几个知道断点调试的，也常常需要把 js 复制到一个 html 文件中，然后用 Chrome 打开调试。

下面分享一些简单的 js 调试方法，希望对前端初学者有些帮助。

【推荐】vscode launch.json

用 VSCode 打开一个项目或文件夹，在根目录下添加 .vscode/launch.json 文件，往里面添加以下内容。如果项目中已经存在 launch.json，可以只是添加 configurations 数组中的内容。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceRoot}/${relativeFile}",
            "cwd": "${workspaceRoot}"
        }
    ]
}

添加完之后，如果 configurations 中有多项配置，确保调试面板中这个是默认配置。然后打开任意 js 文件，打上断点，按 F5 即可进入调试。这个配置的关键就在于 ${relativeFile}，看一看 VSCode 的文档就明白。

node --inspect-brk

假设你有一个 app.js 文件需要调试，可以在命令行输入以下命令。

node --inspect-brk app.js

然后打开 Chrome 开发者工具，点击 nodejs 调试按钮（可能一开始没有出现，需要稍等一会儿）。

然后你会发现代码在第一行停住了，你可以继续在其他行打断点。

参考文档：nodejs debugger

补充调试 cli 工具的方法

如果你已经习惯了配置 .vscode/launch.json 来调试，知道了如何指定入口文件，但可能对于调试 cli 工具束手无策，当然你可以指定 cli 工具的 bin 目录下的文件作为入口文件。

其实你还可以这么写，以 hexo-starter 为例，当你在命令行执行 npm run build 命令，就可以调试 hexo 相关的代码了。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "build",
                "--",
                "--inspect-brk"
            ],
            "console": "integratedTerminal",
        }
    ]
}

  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },