Visual Studio Code前端调试（visual studio code前端插件）

在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器!Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。 如今已经代替 Sublime，成为前端工程师们最喜爱的代码编辑器。同时，软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

下面源码时web前端小编跟大家分享一下通过VS Code来提升调试代码的幸福度。接下来的内容将从以下几方面进行展开：

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。简要步骤概括为：

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 的调试模式推荐的端口，可以根据需要进行修改。

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

了解更多有关web前端信息：http://www.itsource.cn

转载文章：咀嚼之味