代码练习软件中代码的运行和图形化的解析方法
【专利摘要】本发明是一种代码练习软件中代码的运行和图形化的解析方法，所述方法包括步骤：1）用户提交的代码经过编译器进行编译，确认无误后返回；2）编译过程中生成两份结果：一个是二进制代码的机器语言，一份是记录有代码中变量的作用域、数字显示格式信息；3）开始模拟在代码运行中的每一个步骤，提出每一个步骤的状态信息；4）将所述状态信息封装成引擎，将包括程序执行行为的jsvascript文件提供给前端程序；5）前端收到Jsvascriptjs文件，然后将信息分解，为展示做好准备；6）最后经过浏览器的渲染，显示出图形化的结果。本发明将用户学习代码的成本降低，使用户在使用高级语言进行编程的同时可以感知其中的原理和步骤，提高用户学习的效果。
【专利说明】代码练习软件中代码的运行和图形化的解析方法
【技术领域】
[0001]本发明涉及电脑编程学习方法，尤其是涉及在电脑编程过程中，通过将代码的运行和图形化的解析整合在一起，让用户看到代码运行过程中的每一个步骤以及相关变量的变化过程，使用户更好的理解编程的原理和过程。。
【背景技术】
[0002]当前电脑编程学习中，通过传统的代码练习软件学习电脑编程方法。上述代码练习软件只能在本地的编程环境，例如VS，eclipse上使用，仅仅一些稍微新颖的产品可以做到在网页上进行编程。该状况造成用户学习代码的成本非常高，用户在使用高级语言进行编程后，还需要计算机将代码转变为机器语言才能运行。这个过程是“黑盒“操作，用户并不能感知其中的原理和步骤，影响用户学习的效果。
【发明内容】
[0003]本发明的目的是将代码练习软件中代码的运行和图形化的解析整合在一起，让用户看到代码运行过程中的每一个步骤，以及相关变量的变化过程。让用户学生更好的理解编程的原理和过程。
[0004]为了实现本发明的目的，提出以下技术方案:
一种代码练习软件中代码的运行和图形化的解析方法，所述方法使用编译器、程序行为信息生成器和浏览器，包括步骤:
O首先用户提交的代码经过编译器进行编译，确认无误后返回；
2)上述编译过程中生成两份结果:一个是二进制代码的机器语言，一份是记录有代码中变量的作用域、数字显示格式信息；
3)开始模拟在代码运行中的每一个步骤，提出每一个步骤的状态信息；
4)将所述状态信息封装成引擎，将包括程序执行行为的jsvascript文件提供给前端程序；
5)前端收到Jsvascriptjs文件，然后将信息分解，为展示做好准备；
6)最后经过浏览器的渲染，显示出图形化的结果。
[0005]在步骤I，所述编译过程包括基于clang的代码编译过程，包括具体步骤:
1.D提交代码:访问者通过前端编辑器自动提交C代码给图形化代码运行调试器；
1.2) Clang词法分析和语法分析:调用Clang编译器，对提交的代码做词法和羽凡分析，生成抽象语法树给代码生成器，生成变量输出格式和变量活跃区间信息到文件中；
1.3)代码生成器:从Clang读入抽象语法树，得到汇编代码，进而生成目标文件。汇编代码中包含变量名与寄存器对应关系，汇编指令与代码行号对应关系等符合DWARF标准的调试信息；
1.4)链接器:读入代码生成器生成的目标文件，再和已有的动态链接库链接生成最后的可执行文件。该可执行文件包含了调试信息和定制的方便追踪代码执行过程的库函数。
[0006]在步骤3，还包括:
3.1)将包括程序符号表信息的可执行文件加载入LLDB进程中；
3.2)将断点设置在main函数位置，确保trace信息从main函数的第一行语句开始收集;
3.3)使用单步执行命令，在每次单步执行后进行程序运行状态的收集；
3.4)收集当前程序运行的状态信息，所述状态信息包括所有在作用域内的变量的值、调用栈的运行情况，堆中对象的情况、全局变量的情况和当前函数内局部变量的情况；
3.5)将步骤3.4收集的状态信息，采用结构化的方式，利用Python中的diet字典结构存储；如果程序尚未执行结束，重复单步执行的步骤；
3.6)利用json-dump库，将上述字典结构存储的程序状态信息，以json形式保存到文本文件中；
3.7)将Json-dump生成的json结构数据，经过JS渲染代码生成器，生成已经包含程序运行状态记录的Javascript程序代码。
[0007]在步骤6，进一步包括:
6.1)程序运行状态记录信息装载:将生成的Javascript文件装载到渲染期内，以数组的方式保存到渲染器内部；
6.2)单步程序运行状态提取:根据当前程序运行的单步计数，从数组中提取对应的状态，并交给渲染器渲染；
6.3程序状态渲染:根据提取的数组内容，分别对栈帧、堆空间、全局变量、指针引用关系进行渲染。得到最终的显示效果。
[0008]本发明将用户学习代码的成本降低，使用户在使用高级语言进行编程的同时可以感知其中的原理和步骤，提高用户学习的效果。
【专利附图】
【附图说明】
[0009]图1反映了本发明代码的运行和图形化的解析步骤整体框图；
图2是后台程序行为分析阶段的基于clang的代码编译过程；
图3是后台程序行为分析阶段的程序提取过程；
图4反映前台浏览器渲染阶段的框图。
【具体实施方式】
[0010]为使本发明的目的、技术方案和优点更加清楚明白，以下结合附图和具体实施例，对本发明进一步详细说明。
[0011]1、程序运行
图1反映了本发明代码的运行和图形化的解析步骤整体框图，如图所示:
首先用户提交的代码经过图形化代码运行调试器的编译系统进行编译，确认无误后返回；
编译过程中生成两份结果:一个是二进制代码的机器语言，一份是记录有代码中变量的作用域、数字显示格式等信息；
系统开始模拟在代码运行中的每一个步骤，提出每一个步骤的状态信息； 这些信息封装成引擎，提供给前端程序；
前端收到js文件，然后将信息分解，为展示做好准备；
最后经过浏览器的渲染，显示出图形化的结果。
[0012]2、分解的架构原理
I)图2是后台程序行为分析阶段基于clang的代码编译过程，包括:
提交代码:访问者点击
按钮，前端编辑器自动提交C代码给图形化代码运行调试器；
Clang词法分析和语法分析:图形化代码运行调试器调用Clang编译器，对提交的代码做词法和羽凡分析，生成抽象语法树给代码生成器，生成变量输出格式和变量活跃区间信息到文件中；
代码生成器:从Clang读入抽象语法树，得到汇编代码，进而生成目标文件。汇编代码中包含变量名与寄存器对应关系，汇编指令与代码行号对应关系等符合DWARF标准的调试信息；
链接器:读入代码生成器生成的目标文件，再和图形化代码运行调试器中已有的动态链接库链接生成最后的可执行文件。该可执行文件包含了调试信息，以及图形化代码运行调试器定制的方便追踪代码执行过程的库函数。
[0013]2)图3是后台程序行为分析阶段的程序提取过程，包括:
基于LLDB-Python-Binging的Trace对象:将可执行文件加载入LLDB进程中，包括程序符号表信息；
设置断点:将断点设置在main函数位置，确保CTtutor的trace信息从main函数的第一行语句开始收集；
单步执行程序:使用单步执行命令，在每次单步执行后进行程序运行状态的收集；
记录程序运行状态信息:收集当前程序运行的状态信息，包括所有在作用域内的变量的值、调用栈的运行情况，堆中对象的情况、全局变量的情况、当前函数内局部变量的情况；
字典结构存入状态信息表:将上面收集的状态信息，采用结构化的方式，利用Python中的diet字典结构存储。如果程序尚未执行结束，重复单步执行的步骤；
Json-dump:利用json-dump库，将上述字典结构存储的程序状态信息，以json形式保存到文本文件中；
植染代码生成:Json-dump生成的json结构数据，经过JS植染代码生成器，生成已经包含程序运行状态记录的Javascript程序代码。
[0014]3)图4是前台浏览器渲染阶段，包括:
程序运行状态记录信息装载:将图形化代码运行调试器后台生成的Javascript文件装载到渲染期内，以数组的方式保存到渲染器内部；
单步程序运行状态提取:根据当前程序运行的单步计数，从数组中提取对应的状态，并交给渲染器渲染；
程序状态渲染:根据提取的数组内容，分别对栈帧、堆空间、全局变量、指针引用关系进行渲染。得到最终的显示效果。
[0015]以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步的详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种代码练习软件中代码的运行和图形化的解析方法，所述方法使用编译器、程序行为信息生成器和浏览器，其特征在于包括步骤: . 1)首先用户提交的代码经过编译器进行编译，确认无误后返回； . 2)上述编译过程中生成两份结果:一个是二进制代码的机器语言，一份是记录有代码中变量的作用域、数字显示格式信息； .3)开始模拟在代码运行中的每一个步骤，提出每一个步骤的状态信息； .4)将所述状态信息封装成引擎，将包括程序执行行为的jsvascript文件提供给前端程序； . 5)前端收到Jsvascriptjs文件，然后将信息分解，为展示做好准备； . 6)最后经过浏览器的渲染，显示出图形化的结果。
2.根据权利要求1所述的解析方法，其特征在于，在步骤1，所述编译过程包括基于clang的代码编译过程，包括具体步骤: .1.1)提交代码:访问者通过前端编辑器自动提交C代码给图形化代码运行调试器；. 1.2) Clang词法分析和语法分析:调用Clang编译器，对提交的代码做词法和羽凡分析，生成抽象语法树给代码生成器，生成变量输出格式和变量活跃区间信息到文件中；.1.3)代码生成器:从Clang读入抽象语法树，得到汇编代码，进而生成目标文件； 汇编代码中包含变量名与寄存器对应关系，汇编指令与代码行号对应关系等符合DWARF标准的调试信息； . 1.4)链接器:读入代码生成器生成的目标文件，再和已有的动态链接库链接生成最后的可执行文件； 该可执行文件包含了调试信息和定制的方便追踪代码执行过程的库函数。
3.根据权利要求1所述的解析方法，其特征在于，在步骤3，包括:. 3.1)将包括程序符号表信息的可执行文件加载入LLDB进程中；.3.2)将断点设置在main函数位置，确保trace信息从main函数的第一行语句开始收集; . 3.3)使用单步执行命令，在每次单步执行后进行程序运行状态的收集； .3.4)收集当前程序运行的状态信息，所述状态信息包括所有在作用域内的变量的值、调用栈的运行情况，堆中对象的情况、全局变量的情况和当前函数内局部变量的情况；. 3.5)将步骤3.4收集的状态信息，采用结构化的方式，利用Python中的diet字典结构存储；如果程序尚未执行结束，重复单步执行的步骤； . 3.6)利用json-dump库，将上述字典结构存储的程序状态信息，以json形式保存到文本文件中； .3.7)将Json-dump生成的json结构数据，经过JS渲染代码生成器，生成已经包含程序运行状态记录的Javascript程序代码。
4.根据权利要求1-3其中之一所述的解析方法，其特征在于，在步骤6，进一步包括:.6.1)程序运行状态记录信息装载:将生成的Javascript文件装载到渲染期内，以数组的方式保存到渲染器内部； . 6.2)单步程序运行状态提取:根据当前程序运行的单步计数，从数组中提取对应的状态，并交给渲染器渲染；. 6.3程序状态渲染:根据提取的数组内容，分别对栈帧、堆空间、全局变量、指针引用关系进行渲染；得到最终的显示效果。
【文档编号】G06F9/445GK104503793SQ201410812693
【公开日】2015年4月8日 申请日期:2014年12月24日 优先权日:2014年12月24日
【发明者】王冲 申请人:风腾科技（北京）有限公司