如何使用vscode远程debug linux图形界面程序

X11规范与X-Forwarding

在Linux系统上，图形界面的显示由X11标准负责。该标准采用了C/S架构。具体而言，负责与硬件交互，绘制图形界面的部分为X Server，而应用程序则作为X Client与 X Server进行交互，将需要绘制的内容传递给X Server进行绘制。当然，一般的应用程序不会直接使用X Client与X Server进行通信，而是使用进一步封装好易于使用的图形界面库例如QT等。

当我们启动一台带有图形界面的Linux机器时，在启动阶段就会启动一个图形界面的X Server，这个X Server运行在本地，后续的其他应用程序所使用的X client也将运行在本地。此时如果打开终端，输入echo $DISPLAY，将看到如下所示的输出：

~$ echo $DISPLAY
:11.0

这一环境变量的格式为HOST:D.S，D表示Display编号，默认情况下表示X Server运行在6000+D的TCP端口上，而S则是屏幕编号（同一个Display可能有多个Screen）。Host字段为空时默认为localhost，当然也可以使用远程的X Server的地址与端口，例如可以在Windows下运行一个VcXsrv作为X Server。关于DISPLAY环境变量，更详细的说明可以参考(X11 - DISPLAY (environment variable)。

在使用SSH协议连接到远端服务器时，可以使用ssh -X 选项来开启X11-Forwarding，这样会将远端的X Client请求都转发到本地的X Server来进行绘制。当然需要支持X11-Forwarding的SSH客户端，例如Moba-Xterm。

在使用了X-Forwarding进行连接后，可以通过运行一个图形界面的时钟程序xclock检查显示是否正常。

~$ xclock

如果一切正常，应该看到如下的时钟窗口。

如果使用了不支持X11-Forwarding的客户端，则可能会输出如下的错误信息：

~$ xclock
Error: Can't open display:

相应的，此时查看$DISPLAY变量的值也多半为空。

在Vscode中开启X11 Forwarding

方法1

可以通过第三方插件来在vscode中开启X11 Forwarding：

Remote X11 - Visual Studio Marketplace

Remote X11 (SSH) - Visual Studio Marketplace

安装如上两个插件后，在vscode自带的Terminal中运行xclock应该可以看到图形化的时钟界面。并且，此时在终端中应该可以可以正确输出$DISPLAY环境变量的值。

~$ echo $DISPLAY
localhost:11.0

但是这时仍然无法使用gdb插件调试带有图形界面的程序：vscode内建的终端与其用于运行调试程序的进程并不共享同样的环境变量，还需要使用另一个vscode插件environment-injector设置DISPLAY环境变量。

environment-injector - Visual Studio Marketplace

安装好该插件后，按F1或者Ctrl + Shift + P呼出vscode的命令面板，输入Inject environment variable，然后在后续的窗口中分别输入环境变量DISPLAY的变量名和上一步在终端中输出的变量值如localhost:11.0即可。

设置完成后，再启动debug就可以正确地看到图形界面的显示了。

reference: Issue #41 · joelspadin/vscode-remote-x11 · GitHub

方法2

使用微软提供的Remote -SSH插件以及X Server程序例如VcXsrv。

前提条件：可以通过目标服务器访问本机IP地址，即至少从服务器Ping本机有响应。

安装Remote-SSH插件：

配置远程连接：

主要是添加如下选项：

  ForwardAgent yes
  ForwardX11 yes
  ForwardX11Trusted yes

安装并启动VcXRV

启动时选择一个Display Number，并需要在后续界面中勾选Disable access control。
启动vscode并连接到服务器即可，应该可以看到DISPLAY变量已经被设置好了，如果没有，则需要设置为VcXrv中所指定的Display Number，例如localhost:10.0。