前言

作為構(gòu)建大型復(fù)雜應(yīng)用系統(tǒng)的可靠工具，活字格低代碼開發(fā)平臺(tái)一直致力于為開發(fā)者提供更高效、更便捷的開發(fā)體驗(yàn)。近日，活字格低代碼開發(fā)平臺(tái) V10.0 Update1 即將正式發(fā)布！新版本帶來一系列重大更新和改進(jìn)，而其中一個(gè)最重要的新增功能就是可視化斷點(diǎn)調(diào)試。

什么是斷點(diǎn)調(diào)試（Debug）

相信經(jīng)常用 IDE 代碼開發(fā)的同學(xué)們都知道，當(dāng)我們在正式環(huán)境的系統(tǒng)中發(fā)現(xiàn) Bug，但是在日志中又找不到對應(yīng)的具體代碼位置時(shí)，我們通常需要通過斷點(diǎn)調(diào)試（Debug）來追蹤代碼的運(yùn)行流程，然后在對應(yīng)方法中打斷點(diǎn)，然后再一步一步查看對應(yīng)的代碼邏輯，最終找到出錯(cuò)的位置并解決。

活字格可視化斷點(diǎn)調(diào)試介紹

活字格可視化斷點(diǎn)調(diào)試可以允許開發(fā)者在活字格設(shè)計(jì)器中設(shè)置斷點(diǎn)，實(shí)現(xiàn)程序的單步調(diào)試，當(dāng)程序運(yùn)行到斷點(diǎn)的位置時(shí)，活字格設(shè)計(jì)器就會(huì)進(jìn)入斷點(diǎn)顯示模式，這個(gè)時(shí)候就可以展示出當(dāng)前的各項(xiàng)狀態(tài)信息、開發(fā)者可以輕松查看相關(guān)數(shù)據(jù)，分析程序運(yùn)行狀態(tài)，找到潛在問題。除此之外，對于已有的業(yè)務(wù)邏輯，開發(fā)者可借助斷點(diǎn)調(diào)試功能直觀的查看每一步操作對應(yīng)狀態(tài)的影響，從而更好地幫助開發(fā)者理解和優(yōu)化自己寫的程序。

活字格的斷點(diǎn)調(diào)試包含以下內(nèi)容：

• 設(shè)置斷點(diǎn)（Set breakpoint）。

• 刪除斷點(diǎn)（Remove breakpoint）。

• 啟動(dòng)調(diào)試器（Launch debugger）：啟動(dòng)一個(gè)附加的瀏覽器，并附加到服務(wù)器進(jìn)程。

• 停止調(diào)試（Stop debugging）：停止調(diào)試，關(guān)閉瀏覽器，從服務(wù)器分離的過程。

• 重新啟動(dòng)調(diào)試（Restart debugging）：停止調(diào)試，然后重新啟動(dòng)調(diào)試器。

• 繼續(xù)調(diào)試（Continue）：恢復(fù)命令執(zhí)行直到下一個(gè)斷點(diǎn)。

• 單步跳過（Step over）：跳過執(zhí)行下一個(gè)命令。

• 單步進(jìn)入（Step into）：讓進(jìn)程運(yùn)行到一個(gè)命令的內(nèi)部命令，并且如果該命令具有內(nèi)部命令（如服務(wù)器命令、共享命令等），則在內(nèi)部命令中的第一個(gè)命令處暫停。

• 單步跳出（Step out）：從一個(gè)命令的內(nèi)部命令中跳出，并在該命令的下一個(gè)位置暫停。

可視化斷點(diǎn)調(diào)試功能的加入，進(jìn)一步增強(qiáng)了活字格低代碼開發(fā)平臺(tái)的問題排查能力，與已有的全量日志功能形成互補(bǔ)，為開發(fā)者提供更全面、更高效的調(diào)試手段，提升大型復(fù)雜應(yīng)用交付質(zhì)量。

實(shí)戰(zhàn)體驗(yàn)

以上是關(guān)于活字格可視化斷點(diǎn)調(diào)試功能的介紹。下面，給大家介紹一個(gè)具體的實(shí)戰(zhàn)例子，幫您了解活字格中如何借助斷點(diǎn)調(diào)試快速排查問題。使用前需要配置以下環(huán)境：

環(huán)境準(zhǔn)備

• 活字格設(shè)計(jì)器

• 活字格服務(wù)器

假定想要通過活字格設(shè)計(jì)器在訂單詳情頁面中中修改一條訂單的信息（包括訂單信息和訂單明細(xì)信息兩張表），如下圖所示：

修改的邏輯如下圖所示：

在前四步中已經(jīng)寫好了添加、更新訂單和訂單明細(xì)表的邏輯，接下來需要追加一個(gè)“刪除多余訂單明細(xì)行”的邏輯，前四步中的新增和更新的邏輯我們可以通過是否有商品的 ID 來確定，但是刪除訂單的明細(xì)行則無法用商品的 ID 來確定，因此我們刪除的邏輯如下：先根據(jù)訂單主表 ID，取到數(shù)據(jù)庫既有的訂單子表 old 信息，然后循環(huán)這個(gè) old 表，每一行都去新提交的訂單子表中根據(jù) ID 查找，如果沒有找到這個(gè) ID 那就說明，最終用戶已經(jīng)在瀏覽器上刪除了這條數(shù)據(jù)，所以我們也需要?jiǎng)h除此條訂單子表信息。

這段邏輯中最困難的地方就是**循環(huán) old 表，每一行都去新提交的訂單子表中根據(jù) ID 查找，**這塊我們可以用活字格中自帶的數(shù)組插件來完成，如下圖所示：

但是我們無法確定這個(gè)插件給出來的需要?jiǎng)h除的 ID和判斷的數(shù)據(jù)對不對，這個(gè)時(shí)候我們就可以用斷點(diǎn)調(diào)試這個(gè)功能一邊看一邊改：

首先我們在對應(yīng)的查詢條件出打上小紅點(diǎn)，然后點(diǎn)擊調(diào)試，彈出一個(gè)新的瀏覽器之后我們點(diǎn)擊對應(yīng)的操作按鈕，然后這個(gè)時(shí)候再打開設(shè)計(jì)器，就可以開始調(diào)試了。調(diào)試頁面如下所示：

這個(gè)時(shí)候我們可以看到不同的變量數(shù)據(jù)：

然后我們進(jìn)行循環(huán)調(diào)試，會(huì)發(fā)現(xiàn)確實(shí)循環(huán)到第三次的試試needDeleteID這個(gè)數(shù)組是空：

到這一步之后，所以就很簡單了，如果needDeleteID這個(gè)數(shù)組是空，那么就刪除此條既有數(shù)據(jù)

因此完整的服務(wù)端命令的邏輯應(yīng)該是這樣：

這個(gè)時(shí)候我們保存之后再進(jìn)行調(diào)試：

會(huì)發(fā)現(xiàn) needDelteID 為 Null 的數(shù)據(jù)被刪除了，同時(shí)訂單主表中新增了一條數(shù)據(jù)，更新了一條數(shù)據(jù)。

總結(jié)

以上就是活字格 V10.0 Update1新增加的功能斷點(diǎn)調(diào)試的介紹，后續(xù)我們還會(huì)為大家持續(xù)更新服務(wù)端命令共享機(jī)制和快速選擇單元格功能，如果您想了解更多信息，歡迎點(diǎn)擊這里查看。

同時(shí)，葡萄城即將于 10 月 31 號發(fā)布活字格 V10.0 Update1 新版本發(fā)布會(huì)，歡迎大家預(yù)約直播觀看。