CN112306479A - 一种基于抽象语法的代码可视化分析方法及装置 - Google Patents
一种基于抽象语法的代码可视化分析方法及装置 Download PDFInfo
- Publication number
- CN112306479A CN112306479A CN202011077411.2A CN202011077411A CN112306479A CN 112306479 A CN112306479 A CN 112306479A CN 202011077411 A CN202011077411 A CN 202011077411A CN 112306479 A CN112306479 A CN 112306479A
- Authority
- CN
- China
- Prior art keywords
- code
- analysis
- tree
- data
- abstract syntax
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 238000004458 analytical method Methods 0.000 title claims abstract description 111
- 238000012800 visualization Methods 0.000 title claims abstract description 44
- 230000000007 visual effect Effects 0.000 claims abstract description 25
- 238000009877 rendering Methods 0.000 claims abstract description 16
- 230000010354 integration Effects 0.000 claims abstract description 10
- 238000000034 method Methods 0.000 claims abstract description 8
- 230000003068 static effect Effects 0.000 claims description 13
- 230000006870 function Effects 0.000 description 14
- 238000011161 development Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000007405 data analysis Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/425—Lexical analysis
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Stored Programmes (AREA)
- Debugging And Monitoring (AREA)
Abstract
本发明公开了一种基于抽象语法的代码可视化分析方法及装置，S100,源码解析运行器解析代码；S200，AST数据分析器获取源码解析运行器解析代码中信息，生成代码的工作流树，AST数据分析器根据工作流树，添加可视化渲染需要的数据，最终生成形状树；S300，可视化数据渲染器获取源码解析运行器解析代码中信息，以及生成的形状树，将其分别渲染成调用关系图和SVG树图；S400，文档整合输出器根据前端开发人员的调试需求，整合生成并渲染的代码可视化分析图表，并将其输出给开发人员。本发明能够在运行、调试代码的同时，解析并渲染出可视化分析图表，辅助代码开发人员可视化地追踪目标节点的运行情况。
Description
技术领域
本发明涉及计算机软件技术领域，特别是涉及一种基于抽象语法的代码可视化分析方法及装置。
背景技术
在当前的Web应用开发中，前后端分离已成为首选的架构模式，在这种模式下，前端项目的业务复杂度及代码模块化程度都在逐步提高。无论是基于开源项目进行二次开发，还是开发和维护已有的企业项目，面对体量庞大、调用关系复杂的项目代码，前端开发人员都不得不花费大量时间调试、阅读项目源码，以梳理代码的逻辑关系。这无疑会导致企业项目开发耗时长、维护困难，容易导致开发人员在修复问题时引入新的问题。
发明内容
本发明主要解决的技术问题是提供一种基于抽象语法的代码可视化分析方法及装置，能够在运行、调试代码的同时，解析并渲染出文件模块的引用关系图、工作流树、函数作用域链图、执行上下文栈等代码分析图表，以辅助代码开发人员可视化地追踪目标节点的运行情况。
为解决上述技术问题，本发明采用的一个技术方案是：提供一种基于抽象语法的代码可视化分析方法，包括以下步骤：
S100,将JavaScript代码上传至源码解析运行器进行静态代码分析与动态代码分析；
S200，数据分析器根据所述静态代码分析数据，进行遍历抽象语法树，生成JavaScript代码的工作流树，数据分析器根据所述工作流树，添加可视化渲染数据，生成形状树；
S300，可视化数据渲染器获取所述动态代码分析数据，以及所述形状树，分别渲染成调用关系图和可缩放矢量图形；
S400，文档整合输出器根据调试需求，整合生成并渲染代码可视化分析图表，并将其输出。
进一步，所述S100步骤中，所述源码解析运行器在解析代码过程前查找并记录代码中函数声明与变量声明及函数声明与变量声明所在文件路径，并为函数声明与变量声明中每个模块、函数、变量生成唯一的标识符并划分类别。
进一步，所述静态代码分析包括源码解析运行器对代码进行词法分析和语法分析，生成静态代码分析数据，所述静态代码分析数据为抽象语法树。
进一步，所述动态代码分析包括所述源码解析运行器根据开发人员设置的代码断点，记录代码运行至断点处时的执行上下文栈，以及所述上下文栈中的执行上下文对象，生成动态代码分析数据，动态代码分析数据为代码的执行上下文栈信息。
进一步，所述S200步骤中，所述遍历抽象语法树包括所述数据分析器将模块、函数、变量标识符作为第一节点，将第一节点间的调用关系和赋值、运算操作作为有向边，调用方向或操作方向与有向边的方向一致，依此解析出第一节点间的调用关系和操作关系。
进一步，所述S200步骤中，生成JavaScript代码的工作流树时，所述数据分析器根据所述第一节点间的调用关系和操作关系生成JavaScript代码的工作流树。
进一步，所述工作流树中含有若干第二节点，每个第二节点含有属性信息，所述属性信息中包含所述第一节点中节点类型、上下文和作用域。
进一步，所述S200步骤中，所述可视化渲染数据包括可视化类型、第二节点渲染位置和第二节点相关的边。
进一步，所述S300步骤中，渲染成调用关系图时，所述可视化数据渲染器获取所述动态代码分析数据，所述可视化数据渲染器根据所述动态代码分析数据中调用顺序存放执行上下文，每个执行上下文包含对应的变量对象、作用域链及上下文的值；所述可视化数据渲染器根据代码断点进行调试，渲染相应运行时刻的调用关系图。
一种基于抽象语法的代码可视化分析装置，包括：源码解析运行器、数据分析器、可视化数据渲染器、文档整合输出器；所述源码解析运行器提供代码解析，源码解析运行器解析出代码的抽象语法树并在运行时动态生成执行上下文栈；数据分析器进行遍历抽象语法树生成相应的工作流树和形状树；所述可视化数据渲染器根据形状树和执行上下文栈，分别渲染成调用关系图和SVG树图；所述文档整合输出器，整合并输出代码可视化分析图表。
本发明的有益效果是：本发明本发明通过对前端项目的源码进行解析、数据转换及可视化渲染，为前端开发人员分析与追踪代码提供了便捷的可视化方法，不仅有利于基于大型开源项目的二次开发，也为前端团队长期维护项目代码提供了高效可靠的辅助工具。
附图说明
图1是本发明一种基于抽象语法的代码可视化分析方法一较佳实施例的流程图；
图2是本发明一种基于抽象语法的代码可视化分析方法中JavaScript源码解析运行流程图；
图3是本发明一种基于抽象语法的代码可视化分析方法中AST数据分析流程图；
图4是本发明一种基于抽象语法的代码可视化分析方法中可视化数据渲染流程图；
图5一种基于抽象语法的代码可视化分析装置架构图。
具体实施方式
下面结合附图对本发明的较佳实施例进行详细阐述，以使本发明的优点和特征能更易于被本领域技术人员理解，从而对本发明的保护范围做出更为清楚明确的界定。
请参阅图1至图5，本发明实施例包括：
见图1，一种基于抽象语法的代码可视化分析方法，包括：S100,前端开发人员将JavaScript代码上传至源码解析运行器并解析代码，源码解析运行器解析代码，解析代码中含有AST抽象语法树和代码的执行上下文栈信息，源码解析运行器将其存储在数据库中；S200，AST数据分析器获取源码解析运行器解析代码中的AST抽象语法树，进行遍历AST，生成JavaScript代码的工作流树，AST数据分析器根据工作流树，添加可视化渲染需要的数据，最终生成形状树；S300，可视化数据渲染器获取源码解析运行器解码代码中的执行上下文栈等信息，以及AST数据分析器生成的形状树，将其分别渲染成调用关系图和SVG树图；S400，文档整合输出器根据前端开发人员的调试需求，整合生成并渲染的代码可视化分析图表，并将其输出给开发人员。
见图2，S100中，源码解析运行器在解析代码过程前查找并记录函数声明与变量声明及其所在文件路径，并为每个模块、函数、变量生成唯一的ID并划分类别。
解析代码包括静态代码分析和动态代码分析；静态代码分析为前端开发人员上传源代码至源码解析运行器并运行代码，源码解析运行器对代码进行词法分析和语法分析，生成静态代码分析数据—AST抽象语法树；动态代码分析为源码解析运行器根据开发人员设置的代码断点，记录代码运行至断点处时的执行上下文栈，以及栈中的执行上下文对象，生成动态代码分析数据—代码的执行上下文栈信息。
见图3，S200中，AST数据分析器获取源码解析运行器生成的AST抽象语法树，遍历AST，将模块、函数、变量等标识符作为第一节点，将第一节点间的调用关系和赋值、运算等操作作为有向边，调用方向或操作方向与有向边的方向一致，依此解析出第一节点间的调用关系和操作关系；AST数据分析器根据解析出的第一节点间的调用关系和操作关系，生成相应的工作流树；工作流树种包含若干第二节点，每个第二节点均包含第一节点的节点类型nodeType、上下文context和作用域scope等属性信息；AST数据分析器获取并遍历工作流树，为第二节点添加可视化渲染数据，即可视化类型type、节点渲染位置position和节点相关的边edge(用来表示调用关系或操作类型)，从而生成形状树。
见图4，S300中，渲染成调用关系图包括可视化数据渲染器获取源码解析运行器解析代码时生成动态代码分析数据，可视化数据渲染器根据动态代码分析数据中调用顺序存放EC执行上下文，每个EC执行上下文包含对应的变量对象、作用域链及上下文的值this；可视化数据渲染器可根据开发人员设置的代码断点调试给定的第二节点，渲染相应运行时刻的动态代码分析数据和当前执行节点的EC中的作用域链，即调用关系图。
其中，EC执行上下文分为全局上下文、函数上下文和eval上下文；ESC执行上下文栈用于存储在代码执行期间创建的所有执行上下文，具有LIFO(后进先出)的特性。运行代码时，会创建全局执行上下文并将其压入栈底；每当发生函数调用，会创建相应的函数执行上下文并将其压入调用栈，函数调用结束，则将调用栈顶部的执行上下文销毁，并将上下文控制权移交给新的调用栈顶部的执行上下文；关系调用图的结构为图数据结构，例如Graph:{nodes,links,map}；SVG为可缩放的矢量图形是一种开放标准的矢量图形语言。
见图5，基于与前述实施例中一种基于抽象语法的代码可视化分析方法同样的发明构思，本说明书实施例还提供一种基于抽象语法的代码可视化分析装置，包括：JavaScript源码解析运行器、AST数据分析器、可视化数据渲染器、文档整合输出器；所述JavaScript源码解析运行器进行对开发人员提供代码解析，JavaScript源码解析运行器解析出代码的AST抽象语法树并在运行时动态生成ECS执行上下文栈；AST数据分析器根据AST抽象语法树遍历AST并生成相应的工作流树和形状树。所述可视化数据渲染器可视化数据渲染器将根据形状树和ECS执行上下文栈，将其分别渲染成调用关系图和SVG树图；所述文档整合输出器根据开发人员的操作和需求，整合并输出代码可视化分析图表。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种基于抽象语法的代码可视化分析方法，其特征在于，包括以下步骤：
S100,将JavaScript代码上传至源码解析运行器进行静态代码分析与动态代码分析；
S200，数据分析器根据所述静态代码分析数据，进行遍历抽象语法树，生成JavaScript代码的工作流树，数据分析器根据所述工作流树，添加可视化渲染数据，生成形状树；
S300，可视化数据渲染器获取所述动态代码分析数据，以及所述形状树，分别渲染成调用关系图和可缩放矢量图形；
S400，文档整合输出器根据调试需求，整合生成并渲染代码可视化分析图表，并将其输出。
2.根据权利要求1所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述S100步骤中，所述源码解析运行器在解析代码过程前查找并记录代码中函数声明与变量声明及函数声明与变量声明所在文件路径，并为函数声明与变量声明中每个模块、函数、变量生成唯一的标识符并划分类别。
3.根据权利要求1所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述静态代码分析包括源码解析运行器对代码进行词法分析和语法分析，生成静态代码分析数据，所述静态代码分析数据为抽象语法树。
4.根据权利要求1所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述动态代码分析包括所述源码解析运行器根据开发人员设置的代码断点，记录代码运行至断点处时的执行上下文栈，以及所述上下文栈中的执行上下文对象，生成动态代码分析数据，动态代码分析数据为代码的执行上下文栈信息。
5.根据权利要求1所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述S200步骤中，所述遍历抽象语法树包括所述数据分析器将模块、函数、变量标识符作为第一节点，将第一节点间的调用关系和赋值、运算操作作为有向边，调用方向或操作方向与有向边的方向一致，依此解析出第一节点间的调用关系和操作关系。
6.根据权利要求5所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述S200步骤中，生成JavaScript代码的工作流树时，所述数据分析器根据所述第一节点间的调用关系和操作关系生成JavaScript代码的工作流树。
7.根据权利要求6所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述工作流树中含有若干第二节点，每个第二节点含有属性信息，所述属性信息中包含所述第一节点中节点类型、上下文和作用域。
8.根据权利要求7所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述S200步骤中，所述可视化渲染数据包括可视化类型、第二节点渲染位置和第二节点相关的边。
9.根据权利要求1所述的一种基于抽象语法的代码可视化分析方法，其特征在于：所述S300步骤中，渲染成调用关系图时，所述可视化数据渲染器获取所述动态代码分析数据，所述可视化数据渲染器根据所述动态代码分析数据中调用顺序存放执行上下文，每个执行上下文包含对应的变量对象、作用域链及上下文的值；所述可视化数据渲染器根据代码断点进行调试，渲染相应运行时刻的调用关系图。
10.一种基于抽象语法的代码可视化分析装置，其特征在于，包括：源码解析运行器、数据分析器、可视化数据渲染器、文档整合输出器；所述源码解析运行器提供代码解析，源码解析运行器解析出代码的抽象语法树并在运行时动态生成执行上下文栈；数据分析器进行遍历抽象语法树生成相应的工作流树和形状树；所述可视化数据渲染器根据形状树和执行上下文栈，分别渲染成调用关系图和SVG树图；所述文档整合输出器，整合并输出代码可视化分析图表。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011077411.2A CN112306479A (zh) | 2020-10-10 | 2020-10-10 | 一种基于抽象语法的代码可视化分析方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011077411.2A CN112306479A (zh) | 2020-10-10 | 2020-10-10 | 一种基于抽象语法的代码可视化分析方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112306479A true CN112306479A (zh) | 2021-02-02 |
Family
ID=74489611
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011077411.2A Withdrawn CN112306479A (zh) | 2020-10-10 | 2020-10-10 | 一种基于抽象语法的代码可视化分析方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112306479A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113688189A (zh) * | 2021-07-16 | 2021-11-23 | 济南浪潮数据技术有限公司 | JavaScript内存可视化分析与管理方法、系统、设备和存储介质 |
| CN114706571A (zh) * | 2022-06-02 | 2022-07-05 | 杭州比智科技有限公司 | 一种基于dsl的声明式可视化图表开发方法及系统 |
| CN116880826A (zh) * | 2023-09-07 | 2023-10-13 | 厦门畅享信息技术有限公司 | 一种基于函数标记的代码模板及可视化代码生成方法 |
| CN117743658A (zh) * | 2024-02-20 | 2024-03-22 | 成都融见软件科技有限公司 | 一种约束信息的集中可视化方法、电子设备及存储介质 |
-
2020
- 2020-10-10 CN CN202011077411.2A patent/CN112306479A/zh not_active Withdrawn
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113688189A (zh) * | 2021-07-16 | 2021-11-23 | 济南浪潮数据技术有限公司 | JavaScript内存可视化分析与管理方法、系统、设备和存储介质 |
| CN114706571A (zh) * | 2022-06-02 | 2022-07-05 | 杭州比智科技有限公司 | 一种基于dsl的声明式可视化图表开发方法及系统 |
| CN116880826A (zh) * | 2023-09-07 | 2023-10-13 | 厦门畅享信息技术有限公司 | 一种基于函数标记的代码模板及可视化代码生成方法 |
| CN116880826B (zh) * | 2023-09-07 | 2023-12-08 | 厦门畅享信息技术有限公司 | 一种可视化代码生成方法 |
| CN117743658A (zh) * | 2024-02-20 | 2024-03-22 | 成都融见软件科技有限公司 | 一种约束信息的集中可视化方法、电子设备及存储介质 |
| CN117743658B (zh) * | 2024-02-20 | 2024-04-19 | 成都融见软件科技有限公司 | 一种约束信息的集中可视化方法、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112306479A (zh) | 一种基于抽象语法的代码可视化分析方法及装置 | |
| Chen et al. | Ciao: A graphical navigator for software and document repositories | |
| CN110673854A (zh) | Sas语言编译方法、装置、设备及可读存储介质 | |
| Garzón et al. | Umple: A framework for model driven development of object-oriented systems | |
| CN115543290B (zh) | 可视化编程方法及系统 | |
| CN115639980A (zh) | 一种低代码平台可拖拽的前端逻辑编排方法及装置 | |
| Hey | INDIRECT: Intent-driven requirements-to-code traceability | |
| CN112463628B (zh) | 一种基于模型基框架的自主无人系统软件自适应演化方法 | |
| US20150020051A1 (en) | Method and apparatus for automated conversion of software applications | |
| US9612829B2 (en) | System and method for pattern based services extraction | |
| CN109359055B (zh) | 一种数据测试的方法和设备 | |
| Kalinov et al. | Using AËМ specification for automatic test suite generation for mpC parallel programming language compiler | |
| Sun et al. | A XML/XSL approach to visualize and animate TCOZ | |
| CN112270176B (zh) | 深度学习框架中模式转换的方法、装置和计算机存储介质 | |
| d'Inverno et al. | A formal framework for specifying design methods | |
| Azadmanesh et al. | Concept-driven generation of intuitive explanations of program execution for a visual tutor | |
| Forte | Tools fair: Out of the lab, onto the shelf | |
| Cserép et al. | Integration of Incremental Build Systems Into Software Comprehension Tools. | |
| Henry | A technique for hiding proprietary details while providing sufficient information for researchers; or, do you recognize this well-known algorithm? | |
| Dajsuren et al. | Modernizing legacy software using a System Grokking technology | |
| Lecarme et al. | Computer‐aided production of language implementation systems: A review and classification | |
| Cox et al. | Advanced programming aids in PROGRAPH | |
| KR100250486B1 (ko) | 소프트웨어 프로세스 그래픽 모형으로부터 소프트웨어 프로세스 정의 언어로의 변환 방법 | |
| De Lucia | Identifying reusable functions in code using specification driven techniques | |
| JPH0752387B2 (ja) | ソフトウエア開発支援装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20210202 |
|
| WW01 | Invention patent application withdrawn after publication |