网页端部分#

在用户浏览器上运行的在线 IDE 中，一个被称作 Extension Frontend 的模块负责和和服务器上的 Debug Adapter 通信。它监听Debug Adapter接收和发出的消息并做出反馈，如更新用户界面、根据用户请求发送 Requests、响应 Responses 和 Events等。Extension Frontend会解析接收到的Responds和Events并将需要的信息转发至WebView。如果WebView向Extension Frontend传递了某个消息，Extension Frontend也会将这个消息转换为Requests发送给Debug Adapter（图2.3）。这种传递信息的方式有比较高的自由度。

../_images/2-3.png

不同类型的数据的更新策略是不一样的，具体见下表：

表2.1 不同类型数据的更新策略

名称

功能

更新策略

寄存器信息

显 示寄存器名及寄存器值

触发断点或暂停时更新

内存信息

显示指定位置和长 度的内存信息，可增删

触发 断点、暂停、用户修改 请求的内存信息时更新

断点信息

显示当前设置的 断点以及暂未设置的， 缓存的其他内存空间下 的断点（比如在内核态 时某用户程序的断点）

触发断点或暂停时更新

VSCode在近期的更新中，添加了一些新的API，提供了原生debugger 界面的支持，因此最外层 WebView 与 VSCode 的交互会显得比较冗余。一个更好的方案是使用VSCode的 TreeView 来取代 WebView 的一部分功能，使调试器界面和VSCode原生界面更好地融合，提高用户体验。（图2.4）

../_images/2-4.png

在这个新的架构中，我们通过VSCode 提供的几个重要的原生 request 接口来展示数据。比如 variablesRequest，其功能是在在线IDE窗口左侧的 debugger 标签页中，顶部VARIABLES 标签栏里展示变量的名字与值。每当代码调试因触发断点等原因发生了暂停，在线 IDE 都会自动发送一个 variablesRequest 向 Debug Adapter 请求变量数据。我们添加了一个自定义的 variablesRequest获取到寄存器数据，从而在更贴近原生界面的 TreeView 里展示寄存器数据。（图2.5）

../_images/2-5.png

WebView除了展示数据外，还提供了一些命令按钮。我们利用新API将这些WebView中的命令按钮改为原生按钮，放置到编辑器的上方，和原生界面融为一体，如下图所示：

../_images/2-6.png

其中按钮的功能如下表所示：

表2.2 调试界面按钮的名称及功能

名称

功能

gotokernel

在用户态设置内核态出 入口断点，从用户态重新进入内核态

setKernelInBreakpoints

设置用户态到内核态的边界处的断点

setKernelOutBreakpoints

设置内核态到用户态的边界处断点

removeAllCliBreakpoints

重置按钮。清空编辑器，Debug Adapter, GDB中所有断点信息

disableCurrentSpaceBreakpoints

令G DB清除当前设置的断点且不更改Debug Adapter中的断点信息

updateAllSpacesBreakpointsInfo

手动更新断点信息表格

此外我们还支持了VSCode自带的继续、单步等常见的调试功能按钮，如下图所示：

../_images/2-7.png