本文最初宣布于我的个人博客：品味之味

Visual Studio Code (以下简称 vscode) 现在已替代 Sublime，成为前端工程师们最喜欢的代码编辑器。它作为一个大型的开源项目，不停推陈出新；社区中涌现出大批优良的插件，以支撑我们越发惬意地举行开辟事情。在近期的事情中，我尝试经由过程 vscode 来提拔调试代码的幸运度，积累了一点点小心得在此与人人分享一下。

接下来的内容将从以下几方面举行睁开：

1. launch / attach

2. 调试前端代码

3. 调试经由过程 Nodemon 启动的 Node 效劳器

1. launch / attach

要运用 vscode 的调试功用，起首就得设置 .vscode/launch.json 文件。以最简朴的 Node 调试设置为例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "program": "${workspaceRoot}/index.js"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        }
    ]
}

个中最重要的参数是 request ，它的取值有两种 launch 和 attach。

• launch形式：由 vscode 来启动一个自力的具有 debug 形式的顺序

• attach形式：附加于（也能够说“监听”）一个已启动的顺序（必需已开启 Debug 形式）

这两种判然不同的形式到底有什么细致的运用场景呢？且看后文。

2. 调试前端代码

经由过程 vscode 调试前端代码重要依赖于一个插件：Debugger for Chrome，该插件重要应用 Chrome 所开放出来的接口 来完成对其衬着的页面举行调试。能够经由过程 Shift + Cmd + X 翻开插件中间，搜刮对应插件后直接装置。装置完成并从新加载 vscode 后，能够直接点击调试按钮并建立新的启动设置。假如你之前已建立过启动设置了，就可以够直接翻开 .vscode/launch.json 举行修正。

个中调试 Chrome 页面的设置以下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动一个自力的 Chrome 以调试 frontend",
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

如之前所述，经由过程第一个 launch 设置就可以启动一个经由过程 vscode 调试的 Chrome。人人能够直接运用我构造好的项目 zry656565/vscode-debug-sample 举行测试，测试要领在该项目标 README 内里写得很清晰了。扼要步骤归纳综合为：

1. npm run frontend

2. 启动调试设置：“启动一个自力的 Chrome 以调试 frontend”

3. 在 frontend/index.js 中加断点

4. 接见 http://localhost:8091/frontend/

延长题目

运用 launch 形式调试前端代码存在一个题目，就是 vscode 会以新访客的身份翻开一个新的 Chrome 历程，也就是说你之前在 Chrome 上装的插件都没法在这个页面上见效（以下图所示）。

在这类情况下 attach 形式就有它存在的意义了：对一个已启动的 Chrome 举行监听调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "监听一个已启动调试形式的 Chrome",
            "port": 9222,
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

个中 9222 是 Chrome 的调试形式引荐的端口，能够依据须要举行修正。不过现在我并没有胜利实行这个想象，对此有兴致的同砚能够从下面这两个链接入手去研究一下：

• Chrome DevTools Protocol Viewer

• Debugger for Chrome / Attach

有一部分碰到的题目能够直接在 Debugger for Chrome 的 FAQ 中获得解答。

3. 调试经由过程 Nodemon 启动的 Node 效劳器

现在，运用 Node 效劳器开辟一些中间层的效劳也逐步纳入了所谓“大前端”的领域。而在开辟 Node 效劳时，我们一般要借助类似于 nodemon 如许的东西来防止频仍手动重启效劳器。在这类情况下，我们又怎样应用 vscode 来举行断点调试呢？先来看看示例设置文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "附加于已启动的 Node 效劳器（debug形式）",
            "port": 5858,
            "restart": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "附加于已启动的 Node 效劳器（inspect形式）",
            "port": 9229,
            "restart": true
        }
    ]
}

起首，为了合营 nodemon 在监听到文件修正时重启效劳器，此处须要增加一个 restart 参数。同时人人能够注重到了，这里给出了两种形式，人人能够依据以下区别来挑选适宜本身的协定：

浅显来讲，旧版 Node (< 6.3) 引荐运用 Legacy Protocol (--debug形式，默许 5858 端口)，而新版的 Node (>= 6.3) 引荐运用 Inspector Protocol (--inspect形式，默许 9229 端口)。

须要注重的是，在启动 nodemon 顺序时，也要增加对应的参数，比方：

nodemon --debug server/app.js
nodemon --inspect server/app.js

细致的例子一样能够在 zry656565/vscode-debug-sample 中找到。

参考资料

• VS Code – Debugger for Chrome – README

• Debugging in VS Code

• Chrome DevTools Protocol Viewer

• bdspen/nodemon_vscode

• Node.js Debugging in VS Code