碼農(nóng)需要開(kāi)花大量時(shí)間調(diào)試和維護(hù)項(xiàng)目代碼。代碼調(diào)試是每個(gè)碼農(nóng)的最基礎(chǔ)技能之一。大多數(shù)人都喜歡IDE給你帶來(lái)的便利的可視化調(diào)試體驗(yàn)，少數(shù)人則喜歡GDB式命令行的高效調(diào)試，那么有沒(méi)有什么方法能把兩者結(jié)合起來(lái)呢？

在本文中，蟲蟲要給大家介紹一個(gè)這樣的工具gdbgui，是gdb的一個(gè)Web可視化擴(kuò)展，可以讓我們通過(guò)Web在線可視化的調(diào)試。

概述

GDB是GNU項(xiàng)目推出的強(qiáng)大開(kāi)發(fā)調(diào)試?yán)鳎С挚缙脚_(tái)操，跨語(yǔ)言的軟件調(diào)試。GDB和GCC、Emacs構(gòu)成了GUN編程的宇宙最強(qiáng)組合。目前GDB可用于調(diào)試諸如C，C++，Golang，Rust等編譯語(yǔ)言，和Mac，windows，linux和BSD等幾乎所有的操作系統(tǒng)。GDB可以幫助我們：

發(fā)生錯(cuò)誤時(shí)捕獲程序變量和上下文的概況；

如果由于崩潰或異常終止而引起core dump，可以找到什么表達(dá)式引起的；

在程序運(yùn)行時(shí)暫停問(wèn)題的程序部分；

在調(diào)試時(shí)測(cè)試和嘗試程序用來(lái)縮小或修復(fù)問(wèn)題。

GDB常用的功能可總結(jié)如下：

盡管GDB很強(qiáng)大也很高效，但是需要在命令行下使用，對(duì)不熟悉命令行的人有些事不是很方便。

gdbgui是另一個(gè)基于gdb構(gòu)建的調(diào)試工具。主要區(qū)別在于gdbgui向開(kāi)發(fā)人員提供Web展示前端，因此可以在瀏覽器中實(shí)現(xiàn)斷點(diǎn)添加，堆棧查看跟蹤以及更改上下文和參數(shù)值等操作。

gdbgui體系結(jié)構(gòu)

ddbgui庫(kù)利用了WebSockets的優(yōu)勢(shì)。每當(dāng)前端調(diào)試工具啟動(dòng)時(shí)，都會(huì)建立WebSocket連接，用于瀏覽器與后端之間的通信通道。在每個(gè)已建立的WebSocket之后，后端都會(huì)啟動(dòng)一個(gè)新的托管gdb子進(jìn)程以解析輸出，同時(shí)生成一個(gè)單獨(dú)的子進(jìn)程以不斷檢查其他子進(jìn)程的輸出。最后，它使用相同的WebSocket將輸出傳輸?shù)娇蛻舳恕?/p>

安裝

gdbgui的運(yùn)行依賴于Python 3，所以首先得有一個(gè)Python 3環(huán)境，然后可以用pipx安裝 。

首先，安裝pipx

python3 -m pip install --user pipx

在用戶路徑添加新的路徑

python3 -m userpath Append ~/.local/bin

最后，安裝gdbgui

pipx install gdbgui

使用gdbgui進(jìn)行調(diào)試

使用gdbgui調(diào)試一個(gè)簡(jiǎn)單的C++程序，熟悉其功能。進(jìn)入到源代碼目錄：

cd examples/c

make

運(yùn)行這些命令后，調(diào)試器會(huì)在瀏覽器中彈出打開(kāi)。

這樣會(huì)在本地瀏覽器打開(kāi)，也可以通過(guò)執(zhí)行g(shù)dbgui啟動(dòng)一個(gè)gdbgui實(shí)例，默認(rèn)是監(jiān)聽(tīng)127.0.0.1的本地5000端口。可以通過(guò)--port指定監(jiān)聽(tīng)端口，通過(guò)-r指定監(jiān)聽(tīng)0.0.0.0 這樣就可以遠(yuǎn)程用IP:port訪問(wèn)了（注意安全）。

gdbgui調(diào)試界面詳解

gdbgui的web界面有很多部件，包括頂部Load Binary條，右上角的調(diào)試控制器工具條、設(shè)置按鈕和信息菜單；

頁(yè)面中間是調(diào)試內(nèi)容頁(yè)分左中右三塊，分別為文件樹，代碼區(qū)和右邊的調(diào)試信息窗口。

頁(yè)面的底部是信息輸出和最下面的DGB命令工具。

頂部工具欄

執(zhí)行文件加載：gdbgui的web界面有很多選項(xiàng)。在頁(yè)面頂部，看到一個(gè)名為L(zhǎng)oad Binary的部分，可用于加載程序二進(jìn)制文件（具有g(shù)dbgui運(yùn)行所在的相對(duì)路徑），可以給它傳遞參數(shù)。請(qǐng)注意，這兒僅接受可執(zhí)行文件。

調(diào)試控制器：

在頁(yè)面的右側(cè)，是gdbgui的控制器部分，控制器將允許開(kāi)發(fā)人員控制調(diào)試的一些流程：比如從頭開(kāi)始重新啟動(dòng)程序，跳到下一個(gè)斷點(diǎn)，步進(jìn)（循環(huán)單步模式），退出函數(shù)或退出到一個(gè)功能調(diào)用。所有控件也支持鍵盤快捷鍵。

系統(tǒng)設(shè)置

可以通過(guò)單擊頁(yè)面右上方的齒輪圖標(biāo)來(lái)瀏覽調(diào)試器的設(shè)置部分。設(shè)置項(xiàng)的信息都很明確，不過(guò)需要懂英文。

"Add breakpoint to main after loading executable"，加載可執(zhí)行文件后給main函數(shù)添加斷點(diǎn)。

"Maximum number of source file lines to display"：源文件顯示最大行數(shù)，設(shè)置數(shù)字。

"Pretty print dynamic variables (requires restart"，美化動(dòng)態(tài)變量顯示

"Refresh all components when a command is sent from the console"，向終端發(fā)送命令時(shí)刷新組件，可以在每個(gè)命令之后刷新所有視覺(jué)視圖（例如輸入n下一行執(zhí)行內(nèi)容）。

"Print all sent commands in console, including those sent automatically by gdbgui"，在控制臺(tái)中打印所有命令的這個(gè)復(fù)選項(xiàng)，選中后選就可以在信息輸出框顯示運(yùn)行的所有命令，還會(huì)顯示gdbgui調(diào)試時(shí)候在后臺(tái)運(yùn)行的所有命令。在大多數(shù)情況下，最好取消選中此選項(xiàng)，因?yàn)樗鼤?huì)使終端控制臺(tái)輸出比較雜亂不好讀取。

"Add syntax highlighting to source files"，對(duì)源文件語(yǔ)法高亮。

還可以設(shè)置調(diào)試器的主題（比如碼農(nóng)們喜歡的深色模式monokai）。

調(diào)試內(nèi)容頁(yè)

加載可執(zhí)行文件時(shí)，會(huì)在頁(yè)面中間看到帶有已應(yīng)用斷點(diǎn)的源代碼。此外，還有一個(gè)下拉部分，其中顯示了用于編譯可執(zhí)行文件的所有源文件的列表。

一般無(wú)需通過(guò)下拉菜單中指定源文件，但是對(duì)于一些語(yǔ)言比如Rust和Golang需要從文件樹指定mail函數(shù)所在文件。

在最右側(cè)面板是最重要調(diào)試信息面板。

調(diào)用堆棧和局部變量：顯示了在某個(gè)斷點(diǎn)上的位置（文件和指令地址，這是指向斷點(diǎn)的代碼中的指針）。還可以探索與被攻擊的斷點(diǎn)有關(guān)的局部變量。通過(guò)單擊此處的語(yǔ)言環(huán)境，都可以看到詳細(xì)的樹狀視圖，該視圖可以以可視格式顯示變量之間的復(fù)雜關(guān)系。

下面接著是一個(gè)表達(dá)式部分，可以在程序的整個(gè)程序生命周期中持續(xù)觀察某個(gè)值。對(duì)于預(yù)期在程序的不同序列中發(fā)生變化的變量，這將很有用。

查看變量Tree

調(diào)試器的一個(gè)很酷的功能是它將內(nèi)存地址轉(zhuǎn)換成超鏈接，因此可以單擊這些內(nèi)存變量。然后可以在下面的內(nèi)存框中查看它所指的字符。

調(diào)試器還有一個(gè)獨(dú)特的變量可視功能是可以根據(jù)時(shí)間監(jiān)視圖表上某些變量的值。

如果單擊表達(dá)式部分中的圖表圖標(biāo)，就可以顯示帶有X和Y線的圖形。如果表達(dá)式的值在調(diào)試器的運(yùn)行時(shí)中發(fā)生變化，則可以在圖形上直觀地看到此變化。

接著下邊則是斷點(diǎn)信息框，信號(hào)框和寄存器信息框

我們可以可以很清晰的查看設(shè)置的斷點(diǎn)位置、斷點(diǎn)對(duì)應(yīng)的代碼信息，寄存器信息也顯示很詳細(xì)。

信息輸出框和gdb命令欄

頁(yè)面底部是信息輸出框和gdb命令輸出部分。支持在此處輸出gdb的命令行指令，熟悉gdb命令的同學(xué)也可以大顯身手。

結(jié)論

本文蟲蟲給大家介紹了一個(gè)GDB的web插件gdbgui，通過(guò)該插件可以實(shí)現(xiàn)通過(guò)Web瀏覽器進(jìn)行程序調(diào)試。同時(shí)支持遠(yuǎn)程進(jìn)行調(diào)試，調(diào)試界面優(yōu)美，功能強(qiáng)大，就算是有好用的IDE，該工具也值得大家去嘗試一下。