VScode远程调试 - 利用RemoteX11+Xming显示GUI

参考文章：

https://blog.csdn.net/Dteam_f/article/details/109806294

（1）问题说明

利用VScode在本地（localhost）进行远程（remote）调试时候，调试程序显示的图像或者视频不能在本地进行显示，比如说，假如你的代码里面有如下片段：

cv::namedWindow("visual", 0);
// process(org_img, vis_result);
cv::imshow("visual", vis_result);

那么利用VScode的terminal运行编译好的程序，或者是进行debug时候，一定会报如下错误：

Gtk-WARNING **: 11:35:55.340: cannot open display

这下好了，你心里嘀咕，算了吧，把这段代码注释掉，或者如果显示结果对debug很重要，你会有保存在remote，然后再传回本地查看的冲动。不管怎么样，都要一个个去找相关代码段修改，麻烦不？保存后再回传查看？麻烦不？如果你就是想看实时效果那怎么办？比如你在一个Nvidia的Xavier上部署一个深度学习模型，想看看它跑视频的实时性和准确率，怎么办？你既懒得到处改代码，又懒得离线查看。什么，你说你用VNC远程连接到NVIDIA板子去查看，那你不用看这篇文章了，这时候你得在远程安装VSCode这样的IDE，忍受VNC鼠标的拖拽感。什么，你说你直接买一个专用显示屏和鼠标键盘，那你也不用看这篇文章了。VScode本来就是远程调试嵌入式的一个大杀器，结果现在因为不能显示你的结果，你就要放弃用VScode？不不不，这篇文章教你怎么给VScode插上一双翅膀！

（2）准备工作

（2.1）下载Xming

（1）我们直接去sourceforge上面下载windows安装包：
Xming

（2）然后傻瓜式安装，路径选择你想要安装的路径就行了
安装完毕后在开始菜单栏里面点击
（3）记住Display number，这里是0，后面全无脑点击下一步直到完成

（4）完成后，打开你刚才安装Xming的路径，找到如下图所示的一个文件，用文本编辑器打开

（5）然后在第二行添加你的远程电脑的ip地址，这里是以自己的嵌入板子的ip地址为例

（2.2）安装RemoteX11和RemoteX11 SSH

这里我假定你已经安装了Remote SSH，然后我们需要安装上述两个插件。第一个RemoteX11是在远程服务器安装的（对应到我这就是嵌入板），第二个RemoteX11 SSH是在本地安装的（对应到我这里就是win10笔记本电脑），安装过程很简单，就是直接打开

什么，你说你安装RemoteX11时候一直显示installing？不要急，这时候你只需要离线安装就行了，RemoteX11离线包在这里下载：

https://marketplace.visualstudio.com/_apis/public/gallery/publishers/spadin/vsextensions/remote-x11/1.5.0/vspackage

下载后得到了.vsix后缀的安装包
然后直接把安装包传到remote端，执行如下命令就OK了

code --install-extension {your installer folder path}/spadin.remote-x11-1.5.0.vsix

（3）进行配置显示GUI

当你完成上述准备过程后，接下来就需要进行相关的配置工作

（3.1) 配置VScode的SSH

找到VScode最左下角的SSH

点击后弹出的列表选择如下

    ForwardX11 yes
    ForwardX11Trusted yes
    ForwardAgent yes

这样SSH配置就完毕了

（3.2）配置远程机的环境变量

这里你需要找两个信息：
第一个信息为你打开的Xming的端口信息，如下图：

这里你就记下 这个字符串

0.0

第二个信息为你localhost的ip地址（对应我这里就是我个人笔记本电脑以太网端口ip地址），如下图

这时你就记下你的本机ip地址：

192.168.137.1

然后你就把上述两个信息如下串起来就行了

192.168.137.1:0.0

然后你需要修改你远程电脑的环境变量，在里面加入
DISPLAY这个环境变量，并且赋上如上串起来的那个信息。
你如果要永久地使用这个环境变量，就如下操作：
sudo vim ~/.bashrc
在里面加入如下的代码

export DISPLAY="192.168.137.1:0.0" //变成你自己的localhost ip+ xming server的端口号

然后再执行
source ~/.bashrc

OK, That’s all you need in order to show GUI in localhost when using VSCode to debug remotely!!

(4) 测试效果

最快速的测试方法为，远程连接上remote机器，然后直接执行如下命令：

xclock

如果弹出来如下的钟表的GUI，恭喜你配置成功