码农需要开花大量时间调试和维护项目代码。代码调试是每个码农的最基础技能之一。大多数人都喜欢IDE给你带来的便利的可视化调试体验，少数人则喜欢GDB式命令行的高效调试，那么有没有什么方法能把两者结合起来呢？
在本文中，虫虫要给大家介绍一个这样的工具gdbgui，是gdb的一个Web可视化扩展，可以让我们通过Web在线可视化的调试。
概述
GDB是GNU项目推出的强大开发调试利器，支持跨平台操，跨语言的软件调试。GDB和GCC、Emacs构成了GUN编程的宇宙最强组合。目前GDB可用于调试诸如C，C++，Golang，Rust等编译语言，和Mac，windows，linux和BSD等几乎所有的操作系统。GDB可以帮助我们：
发生错误时捕获程序变量和上下文的概况；
如果由于崩溃或异常终止而引起core dump，可以找到什么表达式引起的；
在程序运行时暂停问题的程序部分；
在调试时测试和尝试程序用来缩小或修复问题。
GDB常用的功能可总结如下：
尽管GDB很强大也很高效，但是需要在命令行下使用，对不熟悉命令行的人有些事不是很方便。
gdbgui是另一个基于gdb构建的调试工具。主要区别在于gdbgui向开发人员提供Web展示前端，因此可以在浏览器中实现断点添加，堆栈查看跟踪以及更改上下文和参数值等操作。
gdbgui体系结构
ddbgui库利用了WebSockets的优势。每当前端调试工具启动时，都会建立WebSocket连接，用于浏览器与后端之间的通信通道。在每个已建立的WebSocket之后，后端都会启动一个新的托管gdb子进程以解析输出，同时生成一个单独的子进程以不断检查其他子进程的输出。最后，它使用相同的WebSocket将输出传输到客户端。
安装
gdbgui的运行依赖于Python 3，所以首先得有一个Python 3环境，然后可以用pipx安装 。
首先，安装pipx
python3 -m pip install --user pipx
在用户路径添加新的路径
python3 -m userpath Append ~/.local/bin
最后，安装gdbgui
pipx install gdbgui
使用gdbgui进行调试
使用gdbgui调试一个简单的C++程序，熟悉其功能。进入到源代码目录：
cd examples/c
make
运行这些命令后，调试器会在浏览器中弹出打开。
这样会在本地浏览器打开，也可以通过执行gdbgui启动一个gdbgui实例，默认是监听127.0.0.1的本地5000端口。可以通过--port指定监听端口，通过-r指定监听0.0.0.0 这样就可以远程用IP:port访问了（注意安全）。
gdbgui调试界面详解
gdbgui的web界面有很多部件，包括顶部Load Binary条，右上角的调试控制器工具条、设置按钮和信息菜单；
页面中间是调试内容页分左中右三块，分别为文件树，代码区和右边的调试信息窗口。
页面的底部是信息输出和最下面的DGB命令工具。
顶部工具栏
执行文件加载：gdbgui的web界面有很多选项。在页面顶部，看到一个名为Load Binary的部分，可用于加载程序二进制文件（具有gdbgui运行所在的相对路径），可以给它传递参数。请注意，这儿仅接受可执行文件。
调试控制器：
在页面的右侧，是gdbgui的控制器部分，控制器将允许开发人员控制调试的一些流程：比如从头开始重新启动程序，跳到下一个断点，步进（循环单步模式），退出函数或退出到一个功能调用。所有控件也支持键盘快捷键。
系统设置
可以通过单击页面右上方的齿轮图标来浏览调试器的设置部分。设置项的信息都很明确，不过需要懂英文。
"Add breakpoint to main after loading executable"，加载可执行文件后给main函数添加断点。
"Maximum number of source file lines to display"：源文件显示最大行数，设置数字。
"Pretty print dynamic variables (requires restart"，美化动态变量显示
"Refresh all components when a command is sent from the console"，向终端发送命令时刷新组件，可以在每个命令之后刷新所有视觉视图（例如输入n下一行执行内容）。
"Print all sent commands in console, including those sent automatically by gdbgui"，在控制台中打印所有命令的这个复选项，选中后选就可以在信息输出框显示运行的所有命令，还会显示gdbgui调试时候在后台运行的所有命令。在大多数情况下，最好取消选中此选项，因为它会使终端控制台输出比较杂乱不好读取。
"Add syntax highlighting to source files"，对源文件语法高亮。
还可以设置调试器的主题（比如码农们喜欢的深色模式monokai）。
调试内容页
加载可执行文件时，会在页面中间看到带有已应用断点的源代码。此外，还有一个下拉部分，其中显示了用于编译可执行文件的所有源文件的列表。
一般无需通过下拉菜单中指定源文件，但是对于一些语言比如Rust和Golang需要从文件树指定mail函数所在文件。
在最右侧面板是最重要调试信息面板。
调用堆栈和局部变量：显示了在某个断点上的位置（文件和指令地址，这是指向断点的代码中的指针）。还可以探索与被攻击的断点有关的局部变量。通过单击此处的语言环境，都可以看到详细的树状视图，该视图可以以可视格式显示变量之间的复杂关系。
下面接着是一个表达式部分，可以在程序的整个程序生命周期中持续观察某个值。对于预期在程序的不同序列中发生变化的变量，这将很有用。
查看变量Tree
调试器的一个很酷的功能是它将内存地址转换成超链接，因此可以单击这些内存变量。然后可以在下面的内存框中查看它所指的字符。
调试器还有一个独特的变量可视功能是可以根据时间监视图表上某些变量的值。
如果单击表达式部分中的图表图标，就可以显示带有X和Y线的图形。如果表达式的值在调试器的运行时中发生变化，则可以在图形上直观地看到此变化。
接着下边则是断点信息框，信号框和寄存器信息框
我们可以可以很清晰的查看设置的断点位置、断点对应的代码信息，寄存器信息也显示很详细。
信息输出框和gdb命令栏
页面底部是信息输出框和gdb命令输出部分。支持在此处输出gdb的命令行指令，熟悉gdb命令的同学也可以大显身手。
结论
本文虫虫给大家介绍了一个GDB的web插件gdbgui，通过该插件可以实现通过Web浏览器进行程序调试。同时支持远程进行调试，调试界面优美，功能强大，就算是有好用的IDE，该工具也值得大家去尝试一下。
