[發(fā)明專利]代碼練習(xí)軟件中代碼的運(yùn)行和圖形化的解析方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201410812693.4
• 申請(qǐng)日: 2015-08-04
• 公開（公告）號(hào): CN104503793A
• 公開（公告）日: 2015-07-29
• 發(fā)明（設(shè)計(jì)）人: 王沖
• 申請(qǐng)（專利權(quán)）人: 風(fēng)騰科技（北京）有限公司
• 主分類號(hào): G06F9/445
• 分類號(hào): G06F9/445;G09B19/00
• 代理公司: 暫無信息
• 代理人: 暫無信息

技術(shù)領(lǐng)域

本發(fā)明涉及電腦編程學(xué)習(xí)方法，尤其是涉及在電腦編程過程中，通過將代碼的運(yùn)行和圖形化的解析整合在一起，讓用戶看到代碼運(yùn)行過程中的每一個(gè)步驟以及相關(guān)變量的變化過程，使用戶更好的理解編程的原理和過程。。

背景技術(shù)

當(dāng)前電腦編程學(xué)習(xí)中，通過傳統(tǒng)的代碼練習(xí)軟件學(xué)習(xí)電腦編程方法。上述代碼練習(xí)軟件只能在本地的編程環(huán)境，例如VS，eclipse上使用，僅僅一些稍微新穎的產(chǎn)品可以做到在網(wǎng)頁(yè)上進(jìn)行編程。該狀況造成用戶學(xué)習(xí)代碼的成本非常高，用戶在使用高級(jí)語(yǔ)言進(jìn)行編程后，還需要計(jì)算機(jī)將代碼轉(zhuǎn)變?yōu)闄C(jī)器語(yǔ)言才能運(yùn)行。這個(gè)過程是“黑盒“操作，用戶并不能感知其中的原理和步驟，影響用戶學(xué)習(xí)的效果。

發(fā)明內(nèi)容

本發(fā)明的目的是將代碼練習(xí)軟件中代碼的運(yùn)行和圖形化的解析整合在一起，讓用戶看到代碼運(yùn)行過程中的每一個(gè)步驟，以及相關(guān)變量的變化過程。讓用戶學(xué)生更好的理解編程的原理和過程。

為了實(shí)現(xiàn)本發(fā)明的目的，提出以下技術(shù)方案：

一種代碼練習(xí)軟件中代碼的運(yùn)行和圖形化的解析方法，所述方法使用編譯器、程序行為信息生成器和瀏覽器，包括步驟：

1）首先用戶提交的代碼經(jīng)過編譯器進(jìn)行編譯，確認(rèn)無誤后返回；

2）上述編譯過程中生成兩份結(jié)果：一個(gè)是二進(jìn)制代碼的機(jī)器語(yǔ)言，一份是記錄有代碼中變量的作用域、數(shù)字顯示格式信息；

3）開始模擬在代碼運(yùn)行中的每一個(gè)步驟，提出每一個(gè)步驟的狀態(tài)信息；

4）將所述狀態(tài)信息封裝成引擎，將包括程序執(zhí)行行為的jsvascript文件提供給前端程序；

5）前端收到Jsvascriptjs文件，然后將信息分解，為展示做好準(zhǔn)備；

6）最后經(jīng)過瀏覽器的渲染，顯示出圖形化的結(jié)果。

在步驟1，所述編譯過程包括基于clang的代碼編譯過程，包括具體步驟：

1.1)提交代碼：訪問者通過前端編輯器自動(dòng)提交C代碼給圖形化代碼運(yùn)行調(diào)試器；

1.2)Clang詞法分析和語(yǔ)法分析：調(diào)用Clang編譯器，對(duì)提交的代碼做詞法和羽凡分析，生成抽象語(yǔ)法樹給代碼生成器，生成變量輸出格式和變量活躍區(qū)間信息到文件中；

1.3)代碼生成器：從Clang讀入抽象語(yǔ)法樹，得到匯編代碼，進(jìn)而生成目標(biāo)文件。匯編代碼中包含變量名與寄存器對(duì)應(yīng)關(guān)系，?匯編指令與代碼行號(hào)對(duì)應(yīng)關(guān)系等符合DWARF標(biāo)準(zhǔn)的調(diào)試信息；

1.4)鏈接器：讀入代碼生成器生成的目標(biāo)文件，再和已有的動(dòng)態(tài)鏈接庫(kù)鏈接生成最后的可執(zhí)行文件。該可執(zhí)行文件包含了調(diào)試信息和定制的方便追蹤代碼執(zhí)行過程的庫(kù)函數(shù)。

在步驟3，還包括：

3.1）將包括程序符號(hào)表信息的可執(zhí)行文件加載入LLDB進(jìn)程中；

3.2）將斷點(diǎn)設(shè)置在main函數(shù)位置，確保trace信息從main函數(shù)的第一行語(yǔ)句開始收集；

3.3）使用單步執(zhí)行命令，在每次單步執(zhí)行后進(jìn)行程序運(yùn)行狀態(tài)的收集；

3.4）收集當(dāng)前程序運(yùn)行的狀態(tài)信息，所述狀態(tài)信息包括所有在作用域內(nèi)的變量的值、調(diào)用棧的運(yùn)行情況，堆中對(duì)象的情況、全局變量的情況和當(dāng)前函數(shù)內(nèi)局部變量的情況；

3.5）將步驟3.4收集的狀態(tài)信息，采用結(jié)構(gòu)化的方式，利用Python中的dict字典結(jié)構(gòu)存儲(chǔ)；如果程序尚未執(zhí)行結(jié)束，重復(fù)單步執(zhí)行的步驟；

3.6）利用json-dump庫(kù)，將上述字典結(jié)構(gòu)存儲(chǔ)的程序狀態(tài)信息，以json形式保存到文本文件中；

3.7）將Json-dump生成的json結(jié)構(gòu)數(shù)據(jù)，經(jīng)過JS渲染代碼生成器，生成已經(jīng)包含程序運(yùn)行狀態(tài)記錄的Javascript程序代碼。

在步驟6，進(jìn)一步包括：

6.1）程序運(yùn)行狀態(tài)記錄信息裝載：將生成的Javascript文件裝載到渲染期內(nèi)，以數(shù)組的方式保存到渲染器內(nèi)部；

6.2）單步程序運(yùn)行狀態(tài)提取：根據(jù)當(dāng)前程序運(yùn)行的單步計(jì)數(shù)，從數(shù)組中提取對(duì)應(yīng)的狀態(tài)，并交給渲染器渲染；

6.3程序狀態(tài)渲染：根據(jù)提取的數(shù)組內(nèi)容，分別對(duì)棧幀、堆空間、全局變量、指針引用關(guān)系進(jìn)行渲染。得到最終的顯示效果。

本發(fā)明將用戶學(xué)習(xí)代碼的成本降低，使用戶在使用高級(jí)語(yǔ)言進(jìn)行編程的同時(shí)可以感知其中的原理和步驟，提高用戶學(xué)習(xí)的效果。

附圖說明

圖1反映了本發(fā)明代碼的運(yùn)行和圖形化的解析步驟整體框圖；

圖2是后臺(tái)程序行為分析階段的基于clang的代碼編譯過程；

圖3是后臺(tái)程序行為分析階段的程序提取過程；