已触发了一个断点 vs_VSCode源码分析-断点调试

715ac60704c75f35c162073eb3b164c2.png

背景

今年年初，有幸参与了阿里集团IDE 共建项目组，打造阿里生态体系内的公共IDE底层，而作为一款面向开发者的IDE，调试能力的支持一定程度上决定着一款IDE的开发体验；VSCode作为微软体系下一款当前最热的IDE开发工具，在调试领域上的探索实践是很好的学习案例，有道是：借他山之石,逐已身之玉，故本文着力于分析VCode中调试功能的设计与实现，让后来的人可以较为简单的理解调试这件事情是如何做到的。

源码解析

了解VSCode中的实现，最简单的方式便是直接调试VSCode源码工程，到VSCode官方github下载对应源码工程 microsoft/vscode，下面的分析以Tag 0.10.11 版本为例，可跳过该部分直接看下面结论。

调试技巧：在安装依赖后点击`调试`按钮，先点击`Launch VS Code`，待`VSCode-OSS`启动后打开一个简单的调试项目，再点击`Attach to Extension Host`对ExtensionHost进程进行调试，此时便可针对调试的核心代码进行调试了。

了解调试，很简单便可以想到先从Electron的render进程着手，搜索Debug相关代码可以发现，debugViewlet.ts 文件中针对Electron的Render进程的页面进行了Action注册及绑定，如下：

// vscode/src/vs/workbench/contrib/debug/browser/debugViewlet.ts@memoize
private get startAction(): StartAction {return this._register(this.instantiationService.createInstance(StartAction, StartAction.ID, StartAction.LABEL));
}

同时，在后续调试元素创建过程中针对StartDebugActionItem按钮的action类型绑定对应的this.actionRunner.run(this.action, this.context) 监听函数, 代码见：

// vscode/src/vs/workbench/contrib/debug/browser/debugActionItems.ts:77
this.toDispose.push(dom.addDisposableListener(this.start, dom.EventType.CLICK, () => {this.start.blur();this.actionRunner.run(this.action, this.context);
}));

这里的actionRunner最终执行到的是基于AbstractDebugAction抽象类封装出来StartAction类，通过workbench.action.debug.start这个ID进行直接的关联，即当用户点击调试开始按钮时，便会触发StartAction类中的run方法，执行vs/workbench/contrib/debug/common/debugUtils模块封装的startDebugging方法，这里基于debugUtils模块封装的意义在于更好的复用于各个模块，将获取启动参数及启动调试的逻辑抽象到工具类中实现。

接下来便到DebugService中的执行逻辑初始化操作，初始化过程会保证在文档保存并且插件正常加载之后执行，通过textFileService及extensionService实现，见：

// vscode/src/vs/workbench/contrib/debug/electron-browser/debugService.ts// 保持当前文件
return this.textFileService.saveAll().then(() => this.configurationService.reloadConfiguration(launch ? launch.workspace : undefined
).then(() => {// 等待已安装的插件注册完毕return this.extensionService.whenInstalledExtensionsRegistered().then(() => {...})
})

在启动调试进程的时候可能存在复合类型的调试配置，即多task，需要在错误检查后分别启动，这里不做赘述。

执行完毕，此时便会返回this.createSession(launch, config, noDebug, parentSession);函数的执行结果作为返回值，进到createSession函数，可以发现该函数主要针对调试类型查找对应的debuggers，同时针对配置文件进行处理，调整变量即运行prelaunch任务，代码见: vscode/src/vs/workbench/contrib/debug/electron-browser/debugService.ts:341。

处理完成后，执行this.doCreateSession(workspace, { resolved: resolvedConfig, unresolved: unresolvedConfig }, parentSession)函数创建新的调试会话，同时对会话进行对应的事件监听，接下来便是通过this.launchOrAttachToSession(session)方法启动对应的调试器

// vscode/src/vs/workbench/contrib/debug/electron-browser/debugService.ts
private launchOrAttachToSession(session: IDebugSession, focus = true): Promise<void> {
// 根据配置类型获取调试器const dbgr = this.configurationManager.getDebugger(session.configuration.type);// 初始化会话return session.initialize(dbgr!).then(() => {// 会话启动return session.launchOrAttach(session.configuration).then(() => {if (focus) {this.focusStackFrame(undefined, undefined, session);}});}).then(undefined, err => {// 出现错误，会话关闭session.shutdown();return Promise.reject(err);});
}

进到 session.initialize方法，随着startSession方法的调用，render进程会通过JSONRPC方法调用向main进程发送启动指令

// vscode/src/vs/workbench/api/browser/mainThreadDebugService.ts
public startSession(): Promise<void> {return Promise.resolve(this._proxy.$startDASession(this._handle, this._ds.getSessionDto(this._session)));
}
注: VSCode中带$符号的调用基本上都为RPC调用，详细实现可见: vscode/src/vs/workbench/services/extensions/common/rpcProtocol.ts

进到main进程的vscode/src/vs/workbench/contrib/debug/node/debugAdapter.ts文件，在startSession方法处打上断点，可以看到，对于command类型为node的adapter进程，采用cp.fork的方法启动，其他的采用 cp.spawn的方式启动，此时会针对进程绑定对应的监听函数，输出该输出的内容，同时连接对应DebugAdapter(后面简称DA)的输入输出流，见：

// vscode/src/vs/workbench/contrib/debug/node/debugAdapter.ts
this.connect(this.serverProcess.stdout, this.serverProcess.stdin);

针对客户端发来的消息，需要通过调用StreamDebugAdapter类下的sendMessage方法进行DAP协议转换，从DA发送到主进程的消息也需要通过handleData方法进行数据转换。

基于StreamDebugAdapter有SocketDebugAdapter及ExecutableDebugAdapter两种实现的封装，分别实现socket监听及stdin/stdout两种方式的通信方式，基于这两种通信方式基本可以覆盖所有消息通信场景。

接着便是客户端ready后发送initialize指令，DA返回initialize结果，后续的通信亦同理通过该通道进行。

结论

最终我们可以分析得到如下时序图：

326b2acf866550d9ba6066cd1037e2a7.png

从时序图我们可以看出，整个调试的流程无非就是简单的视图层到调试进程间的通讯，调试的核心在于在多个调试器中实现了统一的数据传输协议，即DAP(Debug Adapter Protocol) 协议。

什么是DAP？

调试适配器协议（DAP）背后的想法是抽象开发工具的调试支持与调试器或运行时通信协议的方式。对于现有的调试器想要去快速去实现这套协议是不现实的，故我们宁愿去实现一个调试的中间层，即一个调试适配器，去使现有的调试器去适应这套调试适配器协议。 调试适配器协议让开发工具实现通用调试器成为可能，同时对应的调试器也可以通过调试适配器与不同的调试器通信。调试适配器可以在多个开发工具中重复使用，这大大减少了在不同工具中支持新调试器的工作量。

上文引用简单翻译自[DAP 协议介绍页](Debug Adapter Protocol)，很容易理解，通过实现适配器，让不同的调试器实现在工具端上的接入达到统一，即由适配器负责去管理上下游消息通信时的数据处理及转换工作，从多个IDE工具自己去适配调试器，逐渐演变为多个IDE工具去适配同一套调试协议，如下图所示

b0049815d9f8ba80fd3c984dfbe22fcb.png

图右可以看出，从左侧调试UI消息到达对应调试器（Debugger）中间通过Adaptor层统一进行消息的转换，一旦调试相关的消息通讯协议达到一定完成度，工具侧便可无需进行任何修改支持多个调试器中的调试逻辑。

如何使用DAP？

知道了DAP协议带来的好处，在开发一款IDE或开发工具时，我们该如何去使用它呢？

以`Node`调试为例，我创建了一个Web版本的Demo工程简单对DAP协议进行验证，见 monaco-node-debug-sample，安装依赖后运行`yarn start`即可运行项目，接下来跟随我一步步实现一个适配DAP的调试工具；

实现一个例子

视图层

UI部分我魔改了`Monaco`的Web版本作为界面代码展示及断点操作区，同时简单实现了基本的调试按钮UI及控制台，如图所示：

6eccea120e1e62f8b4471b355777980c.png

详细代码可见 client.ts

消息通讯层

消息层引入`reconnecting-websocket` 模块作为websocket链接工具，创建DAP专用的通讯渠道，视图层通过监听该消息下的信息响应对应的调试操作，将对应的调试指令转化为视图可读的信息（正式项目中可将这层逻辑也下层于Node层实现），如图所示：

59a4921105e8125296b1179158b0fcff.png

解析上我们只需根据 DebugProtocol 解析我们需要的调试信息即可，这里我们简单实现一次调试下必要的一些调试信息即可；

服务层

服务层我们需要实现对应在`/dap`路径下的调试服务器，新建一个对应的 DebugSession 类用于创建调试链接，实现如下几个功能：

1. 接收`initialize`指令，启动`Debug Adaptor`进程；

2. 接收`Debug Adaptor`进程消息，转发到视图层Socket；

3. 接收视图层消息，转发至`Debug Adaptor`进程;

因为调试的逻辑基本上均为异步响应，故Demo中没有实现完整的JSONRPC通讯；

调试进程

调试进程需实现 DebugAdapter 类，用于`Lanunch` 或 `Attach` 调试器，通过消息转化逻辑将对应的JSON消息转换为调试器可读的信息，以Node为例，需要将如下消息：

{"seq": 153,"type": "request","command": "next","arguments": {"threadId": 3}
}

转换为`Node Debugger` 可读的消息：

Content-Length: 119rn
rn
{"seq": 153,"type": "request","command": "next","arguments": {"threadId": 3}
}

同时，Debug Adaptor 需要管理与调试器间的进程通讯，所有的调试器均需要在子进程中启动，并通过进程间通信来实现消息传递，基础的启动逻辑如下：

1ac8e1ade7285e887b65dbc4633a1685.png

调试器引入了VSCode中使用的node-debug2模块作为调试器，支持Node 7.6+ 版本调试，通过进程中的stream.Writable及stream.Readable接口接口读写对应的进程消息实现通信；

以上即可完整实现DAP的调试链路；

效果

效果演示如下：

438766692d31560dbf581a232fe3c0bb.png

调试器上可以断点到界面断点对应的位置，输出对应的调试堆栈，同时，通过在控制台中执行`a`变量取值操作，也可以获取到在Node执行阶段对应的值，如图所示：

1c2aea0054fcee318c1da6e26928371b.png

完整效果体验可至， github/monaco-node-debug-sample 下载对应源码查看。

未来能做什么？

在工具端支持DAP协议，能够轻松的去适配多个语言环境下的调试场景；在调试器端支持DAP协议，则能让更多的工具能便捷的接入，达到接入层的统一；

未来我们希望做的事情：

1. 在Web环境中有许多针对页面的直接调试场景，我们希望从中探索模拟器调试场景，探索IDE在模拟器上是否能达到与网页调试一样的调试体验；

2. 实现Web端与Electron端统一的调试体验；

3. 支持远程调试协议，即可通过本地调试界面，链接到远程的调试服务器中进行调试；

4. 支持多个DebugSession调试，同时支持subDebugSession特性；

更多场景，期待留言分享讨论~

目前我们正在建设阿里经济体体系下的IDE底层，欢迎有志之士简历至 danwu.wdw@alibaba-inc.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/428355.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

移动web——touch事件介绍

移动web——touch事件介绍

基本概念 1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的 2、click事件在移动端会有0.2秒的延迟&#xff0c;下面是测试click在移动web端的延迟&#xff0c;最好在手机浏览器中测试 <script>window.onl…
阅读更多...
如何计算一年总共有多少周_一年有几个周?怎么计算周数及闰年?

如何计算一年总共有多少周_一年有几个周?怎么计算周数及闰年?

用这一年的天数除以7。因为一周有七天。分析过程如下&#xff1a;假设这一年是2018年&#xff0c;2018年是一个平年&#xff0c;因为2018/4504……2。平年的全年有365天&#xff0c;365752……1。由此可得2018年有52周多1天。扩展资料&#xff1a;闰年的计算方法&#xff1a;1、…
阅读更多...
linux系统安装应用商店失败,在Deepin/UOS系统应用商店中安装KiCad失败的解决方法...

linux系统安装应用商店失败,在Deepin/UOS系统应用商店中安装KiCad失败的解决方法...

在Deepin/UOS系统应用商店中搜索并安装KiCad可能会提示安装失败&#xff0c;原因就是缺少必要的依赖包及KiCad的封装库文件。下面分享解决方法及附上Deepin系统安装KiCad5的方法。参考深度商店应用Inkscape、KiCad、MyPaint、中望CAD Linux预装版。解决方法在系统中通过终端执行…
阅读更多...
linux ubantu扩展空间,ubuntu 扩展存储空间

linux ubantu扩展空间,ubuntu 扩展存储空间

今天解决了一个Ubuntu存储空间不足的问题。我在网上查了很多资料&#xff0c;都没有什么让我满意的方法。我是菜鸟级的用户&#xff0c;当然使用最菜的方法。以下是我的解决方案&#xff0c;供大家参考。方法步骤&#xff1a;第一步&#xff0c;在Ubuntu系统下&#xff0c;进入…
阅读更多...
从使用到原理学习Java线程池

从使用到原理学习Java线程池

来源&#xff1a;SilenceDut http://www.codeceo.com/article/java-threadpool-learn.html线程池的技术背景 在面向对象编程中&#xff0c;创建和销毁对象是很费时间的&#xff0c;因为创建一个对象要获取内存资源或者其它更多资源。在Java中更是如此&#xff0c;虚拟机将试图跟…
阅读更多...
docker 镜像修改的配置文件自动还原_PVE部署LXC运行docker

docker 镜像修改的配置文件自动还原_PVE部署LXC运行docker

PVE部署Ubuntu20.04 LXC容器用于安装docker&#xff0c;LXC部署完成后可以进行如下操作。1、PVE打开LXC的嵌套&#xff0c;不然运行docker会报错 https://lala.im/6793.htmlLXC需要勾选“无特权的容器”在创建完成后需要到“选项-签名”下勾选“嵌套”&#xff0c;这个主要是可…
阅读更多...
linux下c 链接mongodb,Linux下mongoDB下载与安装

linux下c 链接mongodb,Linux下mongoDB下载与安装

百度网盘下载&#xff1a;https://pan.baidu.com/s/1r0JoOtoYzJEC_HOe-NALwg 提取码&#xff1a;rm12 此处提供的是mongodb-linux-x86_64-4.0.11.tgz 版本java开发工具下载地址及安装教程大全&#xff0c;点这里。更多深度技术文章&#xff0c;在这里。二、安装1、上传到linux系…
阅读更多...
oracle12 pl/sql

oracle12 pl/sql

pl/sql块介绍 介绍 块(block)是pl/sql的基本程序单元&#xff0c;编写pl/sql程序实际上就是编写pl/sql块&#xff0c;要完成相对简单的应用功能&#xff0c;可能只需要编写一个pl/sql块&#xff0c;但是如果想要实现复杂的功能&#xff0c;可能需要在一个pl/sql块中嵌套其它的p…
阅读更多...
注册登录页面代码用js判断是否填入信息_php实现登录功能

注册登录页面代码用js判断是否填入信息_php实现登录功能

原文&#xff1a;https://blog.csdn.net/ccy1995414/article/details/80638685自然是从最简单的功能起步&#xff0c;我第一个任务选择了做一个登录操作&#xff0c;其实也没想象中那么简单。1.首先自然是连接和创建数据库这部分我写在model.php中$userNameroot;$passWord;$hos…
阅读更多...
CAS单点登陆的两个原理图

CAS单点登陆的两个原理图

最近学习CAS单点登录&#xff0c;所以在网上找了两张比较清晰的原理图以供参考&#xff1a; 【CAS浏览器请求认证序列图】 其中&#xff1a;* ST&#xff1a;Service Ticket&#xff0c;用于客户端应用持有&#xff0c;每个ST对应一个用户在一个客户端上* TGT&#xff1a;Tick…
阅读更多...
java api帮助文档_JAVA的Swagger界面丑、功能弱怎么破？

java api帮助文档_JAVA的Swagger界面丑、功能弱怎么破？

在做CRMEB-JAVA开源商城系统时&#xff0c;我们团队用到了uni-app&#xff0c;也是时下比较流行的移动端开发技术&#xff0c;这里边就牵扯到了前后端全部分离的问题&#xff0c;一般在使用java开发前后端分离项目的时候&#xff0c;都会用到Swagger&#xff0c;Swagger 是一个…
阅读更多...
C语言作业不足之处,C语言和汇编语言的优缺点分析-控制器/处理器-与非网

C语言作业不足之处,C语言和汇编语言的优缺点分析-控制器/处理器-与非网

本文主要是关于汇编和 C 语言的相关介绍&#xff0c;并着重对汇编和 C 语言的不同及其编程技巧进行了详尽的阐述。汇编和 C 语言C 语言和汇编语言的区别在于他们之间优缺点几乎是相反的。C 语言和汇编语言的优缺点&#xff1a;以 c 来举例优点&#xff1a;c 的运行效率高&#…
阅读更多...
python xlrd模块_python之xlrd模块

python xlrd模块_python之xlrd模块

xlrd模块 一、xlrd模块 1、python操作excel主要用到xlrd和xlwt这两个库&#xff0c;即xlrd是读excel&#xff0c;xlwt是写excel的库&#xff0c;这两个适用于.xls格式有效 2、 xlrd模块安装 在cmd窗口 pip install xlrd 二、使用介绍 1、常用单元格中的数据类型 ♦ 0. empty&am…
阅读更多...
set集合判断集合中是否有无元素_一文了解 JavaScript 中的 Set（集合）- 对 Set 的扩展...

set集合判断集合中是否有无元素_一文了解 JavaScript 中的 Set（集合）- 对 Set 的扩展...

阅读全文需要 4 分钟。主要介绍对 ES6 中的 Set 集合方法的扩展。阅读本文后&#xff0c;你能创建出对 Set 方法扩展&#xff0c;并且结合下期内容&#xff0c;将其发布到 NPM 中。往期回顾一文了解 JavaScript 中的 Set(集合)一文了解 JavaScript 中的 Set(集合)- 多种去重技巧…
阅读更多...
站怎么点都是一样_老鼠被卡在轮胎里，像是被点了穴道一样：这可怎么办才好？...

站怎么点都是一样_老鼠被卡在轮胎里，像是被点了穴道一样：这可怎么办才好？...

从小就被灌输了一个思想&#xff1a;猫和老鼠是天敌&#xff0c;也没有想过这样根深蒂固的思想有一天会发生变化。直到有天偶然看到猫咪被老鼠吓到四处乱窜才觉得这一定理并非是永恒不变的&#xff0c;毕竟生活总是充满着惊喜与惊吓。来看看下面这个小故事&#xff0c;感受一下…
阅读更多...
sql空字符串判断函数_access常用的内置函数

sql空字符串判断函数_access常用的内置函数

&#xfeff;&#xfeff;新朋友点“Office交流网“蓝字关注我们Access提供了几种类型的函数&#xff0c;可将这些函数分为以下几类&#xff1a;转换&#xff1a;把一个值转换为另一个。日期/时间&#xff1a;返回日期和/或时间值。判断检查&#xff1a;判断是否正确算术计算&a…
阅读更多...
实验吧—Web——WP之 Guess Next Session

实验吧—Web——WP之 Guess Next Session

打开链接&#xff0c;他有给出查看原码的按钮&#xff0c;那么我们打开看看 在这个里面&#xff0c;如果GET的值等于session的就会给出flag 那么我们进行抓包改包 在输入框内随意输入一个值然后抓包 将password的值删去&#xff0c;并且将cookie后面的PHPsessid的值也删去&…
阅读更多...
linux命令行提示符居中,linux命令行学习（54）：修改提示符

linux命令行提示符居中,linux命令行学习（54）：修改提示符

提示符由环境变量PS1决定&#xff0c;所以&#xff0c;修改提示符就是修PS1的值。一、保存PS1原来的值以及恢复原值为了防止麻烦&#xff0c;在修改PS1的值之前&#xff0c;可以先将PS1的值保存起来&#xff0c;以备以后恢复。我们建立一个环境变量ps1执行命令&#xff1a;ps1&…
阅读更多...
flask（精讲）

flask（精讲）

Flask 一&#xff1a;web框架Django和Flask本质 socket服务端 ?123wsgi&#xff1a; Web服务网关接口- wsgiref # Django内部内置模块- werkzeug # Flask安装完成后&#xff0c;内部默认已经安装好werkzeugfrom werkzeug.wrappers import Request, Respons…
阅读更多...
c++builder 运行网站的api_04 将您的API Builder Docker映像发布到AMPLIFY运行时服务（ARS）...

c++builder 运行网站的api_04 将您的API Builder Docker映像发布到AMPLIFY运行时服务（ARS）...

「注&#xff1a;转载请注明出处&#xff0c;谢谢&#xff01;」注意&#xff1a;请参考在线文档以获取最新信息。将APIBuilder应用程序部署到AMPLIFY Runtime Services在先前文章中&#xff0c;我们描述了如何轻松地使用API Builder Standalone创建微服务并将其打包为可在任何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023