作者：魁梧 淘系前端团队
转发链接：https://mp.weixin.qq.com/s/qET5iXtrBZ2R4YRK_x1qzw
背景
今年年初，有幸参与了IDE 共建项目组, 打造阿里生态体系内的公共IDE底层，而作为一款面向开发者的IDE，调试能力的支持一定程度上决定着一款IDE的开发体验；VSCode作为微软体系下一款当前最热的IDE开发工具，在调试领域上的探索实践是很好的学习案例，有道是：借他山之石,逐已身之玉，故本文着力于分析VCode中调试功能的设计与实现，让后来的人可以较为简单的理解调试这件事情是如何做到的。
源码解析
了解VSCode中的实现，最简单的方式便是直接调试VSCode源码工程，到VSCode官方github下载对应源码工程；
调试技巧：在安装依赖后点击调试按钮，先点击Launch VS Code，待VSCode-OSS启动后打开一个简单的调试项目，再点击Attach to Extension Host对ExtensionHost进程进行调试，此时便可针对调试的核心代码进行调试了。
从时序图我们可以看出，整个调试的流程无非就是简单的视图层到调试进程间的通讯，调试的核心在于在多个调试器中实现了统一的数据传输协议，即DAP(Debug Adapter Protocol) 协议。
什么是DAP？
调试适配器协议（DAP）背后的想法是抽象开发工具的调试支持与调试器或运行时通信协议的方式。对于现有的调试器想要去快速去实现这套协议是不现实的，故我们宁愿去实现一个调试的中间层，即一个调试适配器，驱使现有的调试器去适应这套调试适配器协议。调试适配器协议让开发工具实现通用调试器成为可能，同时对应的调试器也可以通过调试适配器与不同的调试器通信。调试适配器可以在多个开发工具中重复使用，这大大减少了在不同工具中支持新调试器的工作量。
上文引用简单翻译自DAP 协议介绍页，很容易理解，通过实现适配器，让不同的调试器实现在工具端上的接入达到统一，即由适配器负责去管理上下游消息通信时的数据处理及转换工作，从多个IDE工具自己去适配调试器，逐渐演变为多个IDE工具去适配同一套调试协议，如下图所示
图右可以看出，从左侧调试UI消息到达对应调试器（Debugger）中间通过Adaptor层统一进行消息的转换，一旦调试相关的消息通讯协议达到一定完成度，工具则便可无需进行任何修改支持多个调试器中的调试逻辑。
如何使用DAP？
知道了DAP协议带来的好处，在开发一款IDE或开发工具时，我们该如何去使用它呢？
以Node调试为例，我创建了一个Web版本的Demo工程简单对DAP协议进行验证
视图层
UI部分我修改了Monaco的Web版本作为界面代码展示及断点操作区，同时简单实现了基本的调试按钮UI及控制台，如图所示：
消息通讯称
消息层引入reconnecting-websocket 模块作为websocket链接工具，创建DAP专用的通讯渠道，视图层通过监听该消息下的信息响应对应的调试操作，将对应的调试指令转化为视图可读的信息（正式项目中可将这层逻辑也下层于Node层实现），如图所示：
解析上我们只需根据debugProtocol解析我们需要的调试信息即可，这里我们简单实现一次调试下必要的一些调试信息即可；
服务层
服务层我们需要实现对应在/dap路径下的调试服务器，新建一个对应的 DebugSession 类用于创建调试链接，实现如下几个功能：
- 接收initialize指令，启动Debug Adaptor进程；
- 接收Debug Adaptor进程消息，转发到视图层Socket；
- 接收视图层消息，转发至Debug Adaptor进程;
因为调试的逻辑基本上均为异步响应，故Demo中没有实现完整的JSONRPC通讯；
调试进程
调试进程需实现 debugAdapter 类，用于Lanunch 或 Attach 调试器，通过消息转化逻辑将对应的JSON消息转换为调试器可读的信息，以Node为例，需要将如下消息：
{
"seq": 153,
"type": "request",
"command": "next",
"arguments": {
"threadId": 3
}}转换为Node Debugger 可读的消息：
Content-Length: 119\r\n
\r\n
{
"seq": 153,
"type": "request",
"command": "next",
"arguments": {
"threadId": 3
}
}同时，Debug Adaptor 需要管理与调试器间的进程通讯，所有的调试器均需要在子进程中启动，并通过进程间通信来实现消息传递，基础的启动逻辑如下：
调试器引入了VSCode中使用的node-debug2模块作为调试器，支持Node 7.6+ 版本调试，通过进程中的stream.Writable及stream.Readable接口接口读写对应的进程消息实现通信；
以上即可完整实现DAP的调试链路；
效果
效果演示如下：
调试器上可以断点到界面断点对应的位置，输出对应的调试堆栈，同时，通过在控制台中执行a变量取值操作，也可以获取到在Node执行阶段对应的值，如图所示：
未来能做什么？
在工具端支持DAP协议，能够轻松的去适配多个语言环境下的调试场景；在调试器端支持DAP协议，则能让更多的工具能便捷的接入，达到接入层的统一；
未来我们希望做的事情：
- 在Web环境中有许多针对页面的直接调试场景，我们希望从中探索模拟器调试场景，探索IDE在模拟器上是否能达到与网页调试一样的调试体验；
- 实现Web端与Electron端统一的调试体验；
- 支持远程调试协议，即可通过本地调试界面，连接到远程的调试服务器中进行调试；
- 支持多个DebugSession调试，同时支持subDebugSession特性；
推荐VS Code 相关文章
VS Code 调试完全攻略系列：调试由 TypeScript 开发的 React
VS Code 调试完全攻略系列：基于浏览器的 React 应用
VS Code 调试完全攻略系列：launch.json 和调试控制台
2020必备VS Code 插件-大大提高开发效率(内附 gif 图)
作者：魁梧 淘系前端团队
转发链接：https://mp.weixin.qq.com/s/qET5iXtrBZ2R4YRK_x1qzw
