Debugging method and device, electronic equipment and storage medium

By parsing page component data to generate interface documentation and simulation data, the problem of the front end waiting for the back end to define interface documentation is solved, and the real-time performance and efficiency of front end debugging are improved.

CN121560722APending Publication Date: 2026-02-24SHENZHEN TAIHAI NETWORK TECH SERVICE CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202511503235.7
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-10-20
Publication Date
2026-02-24

AI Technical Summary

Technical Problem

When front-end developers encounter complex form page structures or frequent changes in business requirements, they are unable to accurately write mock data, which requires waiting for the back-end to complete the interface documentation definition, resulting in blocked debugging processes and low debugging efficiency.

Method used

By parsing page component data, the system automatically extracts form component attribute information and validation rule information, generates target interface documentation and simulation data, and uses a data response simulation service to simulate the creation of data response interfaces, enabling the front-end to debug without waiting for the back-end to define interface documentation.

Benefits of technology

Ensuring that API documentation generation is synchronized with application page changes in real time improves front-end debugging efficiency and reduces API documentation maintenance costs and the risk of debugging process disruptions.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121560722A_ABST
    Figure CN121560722A_ABST
Patent Text Reader

Abstract

The embodiment of the invention provides a debugging method and device, electronic equipment and a storage medium, and belongs to the technical field of Internet. The method comprises the steps of obtaining page component data corresponding to a target application page, wherein the target application page comprises a plurality of form components; analyzing the page component data to obtain form component attribute information and form verification rule information corresponding to each form component; generating a target interface document according to the form component attribute information and the form verification rule information, and simulating and generating corresponding target interface simulation data according to the form component attribute information and the form verification rule information; calling a data response simulation service to create a corresponding data response simulation interface based on the target interface document; and calling a data response simulation service to debug the target application page based on the data response simulation interface and the target interface simulation data. According to the embodiment of the invention, the front-end debugging efficiency can be improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a debugging method and apparatus, electronic device and storage medium. Background Technology

[0002] The project development process often adopts a front-end and back-end separation development approach. The front-end is responsible for reproducing the visual effects of the application page and implementing data interaction functions based on the UI design draft and component library, while the back-end is responsible for writing specific functional logic and implementing corresponding functional interfaces.

[0003] The front-end can only enter the debugging phase after writing mock data (i.e., mock data) based on the interface documentation defined by the back-end. In the development process of business systems with complex form page structures, a large number of fields, or frequent changes in business requirements, the front-end cannot accurately write mock data based on the interface documentation generated by the back-end, and the interface documentation defined by the back-end cannot accurately reflect the business requirements of the front-end. The front-end and back-end need to communicate frequently to maintain a unified and accurate interface documentation.

[0004] Therefore, in related technologies, the front-end needs to wait for the back-end to complete the interface documentation definition before it can be debugged, which blocks the front-end development process and makes the front-end debugging efficiency relatively low. Summary of the Invention

[0005] The main objective of this application is to provide a debugging method, apparatus, electronic device, and storage medium that enables the front-end to perform debugging without waiting for the back-end to complete the interface documentation definition, thereby improving the debugging efficiency of the front-end.

[0006] To achieve the above objectives, a first aspect of this application provides a debugging method, the method comprising: Obtain page component data corresponding to the target application page, wherein the target application page includes multiple form components; The page component data is parsed to obtain the form component attribute information and form validation rule information corresponding to each form component; The target interface document is generated based on the form component attribute information and the form validation rule information, and the corresponding target interface simulation data is generated based on the form component attribute information and the form validation rule information. The data response simulation service is invoked to create a corresponding data response simulation interface based on the target interface document; The data response simulation service is invoked to debug the target application page based on the data response simulation interface and the target interface simulation data.

[0007] To achieve the above objectives, a second aspect of this application provides a debugging apparatus, the apparatus comprising: The acquisition unit is used to acquire page component data corresponding to the target application page, wherein the target application page includes multiple form components; The parsing unit is used to parse the page component data to obtain the form component attribute information and form validation rule information corresponding to each form component; The generation unit is used to generate a target interface document based on the form component attribute information and the form validation rule information, and to simulate and generate corresponding target interface simulation data based on the form component attribute information and the form validation rule information. The first invocation unit is used to invoke the data response simulation service to create a corresponding data response simulation interface based on the target interface document; The second calling unit is used to call the data response simulation service to debug the target application page based on the data response simulation interface and the target interface simulation data.

[0008] To achieve the above objectives, a third aspect of the present application provides an electronic device, the electronic device including a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method described in the first aspect.

[0009] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0010] The debugging method, apparatus, electronic device, and storage medium proposed in this application involve the client parsing page component data, automatically extracting form component attribute information and validation rule information, and synchronously generating a target interface document that meets the client's business requirements and validation rule constraints, thereby improving the accuracy of the generated target interface document. Then, target interface simulation data that semantically matches the page component data is generated. Furthermore, a data response simulation service is used to simulate and create a data response simulation interface consistent with the interface document definition. Finally, the target application page on the client is debugged. This ensures real-time synchronization between interface document generation and changes to the target application page, solving the problem in related technologies where the front-end needs to wait for the back-end to complete the interface document definition before debugging can begin, thus hindering the front-end debugging process and improving front-end debugging efficiency. Attached Figure Description

[0011] Figure 1 This is a flowchart of the debugging method provided in the embodiments of this application; Figure 2 This is a schematic diagram of a process for generating form metadata provided in an embodiment of this application; Figure 3 A flowchart illustrating the process of generating target interface documentation provided in this application embodiment; Figure 4 A schematic diagram illustrating the generation of target interface simulation data provided in an embodiment of this application; Figure 5 A schematic diagram of the debugging system provided in the embodiments of this application; Figure 6 A schematic diagram of the local workflow of the debugging method provided in the embodiments of this application; Figure 7 This is a schematic diagram of the debugging device provided in the embodiments of this application; Figure 8 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0012] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0013] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0014] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0015] The project development process often adopts a front-end and back-end separation development approach. The front-end is responsible for reproducing the visual effects of the application page and implementing data interaction functions based on the UI design draft and component library, while the back-end is responsible for writing specific functional logic and implementing corresponding functional interfaces.

[0016] After the backend defines the API documentation, the frontend must write mock data based on this documentation before entering the debugging phase. In business system development processes with complex form structures, a large number of fields, or frequently changing business requirements, the frontend cannot accurately write mock data based on the backend-generated API documentation, and the backend-defined API documentation cannot accurately reflect the frontend's business needs. This necessitates frequent communication between the frontend and backend to maintain consistent and accurate API documentation. Therefore, in related technologies, the frontend must wait for the backend to complete the API documentation definition before debugging, leading to blocked frontend development and low debugging efficiency.

[0017] Furthermore, when the interactive pages designed for the front end change, the API documentation and mock data cannot be updated in a timely manner, hindering the front end debugging process and resulting in low debugging efficiency. When the functional APIs written by the back end change, the front end needs to wait for the back end to complete the modification of the API documentation before it can continue the debugging process. Therefore, the front end and back end need to communicate repeatedly about API details, resulting in a relatively inefficient development process.

[0018] Based on this, embodiments of this application provide a debugging method and apparatus, an electronic device, and a storage medium, aiming to improve the efficiency of front-end development.

[0019] The debugging methods, apparatus, electronic devices, and storage media provided in this application are specifically described through the following embodiments. First, the debugging methods in the embodiments of this application are described.

[0020] The debugging method provided in this application relates to the field of Internet technology. The debugging method provided in this application can be applied to a terminal, a server, or software running on either a terminal or a server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the debugging method, but is not limited to the above forms.

[0021] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0022] Figure 1 This is an optional flowchart of the debugging method provided in the embodiments of this application. Figure 1 The method may include, but is not limited to, steps S101 to S105.

[0023] Step S101: Obtain the page component data corresponding to the target application page; Step S102: Parse the page component data to obtain the form component attribute information and form validation rule information corresponding to each form component; Step S103: Generate the target interface document based on the form component attribute information and form validation rule information, and simulate the corresponding target interface simulation data based on the form component attribute information and form validation rule information. Step S104: Call the data response simulation service to create a corresponding data response simulation interface based on the target interface document; Step S105: Call the data response simulation service to debug the target application page based on the data response simulation interface and the target interface simulation data.

[0024] Steps S101 to S105, as illustrated in this embodiment, involve the client parsing page component data, automatically extracting form component attribute information and validation rule information, and synchronously generating a target interface document that meets the client's business requirements and validation rule constraints, thereby improving the accuracy of the generated target interface document. Then, target interface simulation data that semantically matches the page component data is generated. Furthermore, a data response simulation service is used to simulate and create a data response simulation interface consistent with the interface document definition. Finally, the target application page on the client is debugged. This ensures real-time synchronization between interface document generation and changes to the target application page, solving the problem in related technologies where the front-end needs to wait for the back-end to complete the interface document definition before debugging can begin, thus hindering the front-end debugging process and improving front-end debugging efficiency.

[0025] In step S101 of some embodiments, the debugging method provided in this application is applied to a client, where the client is a hardware entity used to interact with the user, capable of running on the user's local device (such as a PC or terminal), and responsible for requesting services from the server. Specifically, page component data of the target application page can be obtained first, where the target application page can be an application page, a front-end page used to interact with the user, and can include business function pages developed based on the Vue.js framework and Element UI component library, such as a registration page or an order submission page. The target application page includes page components, which include multiple form components (i.e., form items), and the form components can specifically be elements such as input boxes, text boxes, or date pickers. The page component data represents the source code files or structured data that constitute the target application page, such as .vue format files. Taking .vue format files as an example, for example, the UserForm.vue file contains page view templates. <template>and logic script <script>两个部分,其中<template>用于定义页面结构,可以包含<el-form>、<el-input>以及<el-select>等表单项的页面结构,每个表单项包含对应的prop属性,例如prop="userName",<script>用于定义表单项的验证规则对象formRules,以规定每个表单字段的约束条件,例如userName: {required: true,message:'姓名必填'}。

[0026] 在一些实施例的步骤S102中,对页面组件数据进行解析以得到每一表单组件对应的表单组件属性信息以及表单验证规则信息,其中解析操作可以通过DOM解析引擎实现。例如,可以分别对Vue文件的模板和脚本进行解析。通过解析得到每一表单组件的表单组件属性信息以及表单验证规则信息,其中表单组件属性信息是指目标应用页面中的表单组件在实现数据采集功能时所承载的字段定义、数据类型和结构关系的元数据集合,例如输入框组件的prop属性值为"userName",而表单验证规则信息则是指通过对表单组件的输入值进行合法性校验的约束条件集合,表单验证规则信息从业务逻辑层面规定了保证数据有效性的条件,例如通过formRules对象规定userName字段需满足必填、最小长度2和最大长度10的规则。

[0027] 在一些实施例中,对页面组件数据进行解析得到每一表单组件对应的表单组件属性信息以及表单验证规则信息,包括如下步骤:对页面组件数据进行解析,得到对应的抽象语法树,并从抽象语法树中提取得到页面组件结构信息和组件逻辑定义信息;对页面组件结构信息和组件逻辑定义信息进行解析,得到每一表单组件对应的表单组件属性信息以及表单验证规则信息。

[0028] 在本实施例中,可以通过抽象语法树(Abstract Syntax Tree,AST)分析页面组件数据,其中抽象语法树是前端应用页面的源代码对应的抽象语法结构的树表示,树的每个节点表示源代码中的一个结构。可以对页面组件数据进行解析,得到对应的抽象语法树,例如,对于Vue文件,可以从编译结果中获取template的抽象语法树,可以通过其他解析器(例如parser)来解析得到script的抽象语法树。

[0029] 然后可以从抽象语法树中提取页面组件结构信息和组件逻辑定义信息,其中页面组件结构信息表征从页面视图模板对应的抽象语法树中提取的目标应用页面的页面组件之间的组件层级关系、嵌套关系、组件类型以及绑定属性的结构化描述,例如解析template的<el-form><el-input prop="userName">< / el-form>时,可以生成包含el-form与el-input的嵌套关系以及prop属性的树形结构,组件逻辑定义信息具体可以包括返回的响应式对象以及业务逻辑方法等页面组件行为定义。

[0030] 进一步地,可以对页面组件结构信息和组件逻辑定义信息进行解析,得到每一表单组件对应的表单组件属性信息以及表单验证规则信息。其中,表单组件属性信息是指从页面组件结构信息中用于定义表单字段的元数据,可以包括字段路径标识(如el-input的prop属性值"userName")、数据类型声明(如el-input默认为string类型,el-input-number为number类型)以及组件间嵌套关系形成的结构约束等,表单验证规则信息是指从组件逻辑定义信息中提取的业务约束条件集合,具体可以包括在script部分的rules对象中定义的验证配置项,例如{userName: [{required:true,message:'必填项'},{min:2,max:5,message:'长度限制'}]}。可以为模板中的prop属性与脚本中的formRules对象建立匹配关系,从而确保每个表单组件都能获取到对应的完整验证规则描述。

[0031] 本申请实施例实现了从前端页面组件源代码、到结构化语义信息、再到接口元数据的深度解析,保证了表单组件属性信息与验证规则信息在语义和结构上的完整性与一致性,为后续生成准确的接口文档以及高度仿真的Mock数据提供数据基础。

[0032] 在一些实施例中,页面组件结构信息中包含多个页面组件节点,对页面组件结构信息和组件逻辑定义信息进行解析,得到每一表单组件对应的表单组件属性信息以及表单验证规则信息,包括如下步骤:依次对多个页面组件节点进行遍历,当页面组件节点为表单组件节点时,获取表单组件节点对应的表单组件的表单组件属性信息;根据表单字段路径信息在组件逻辑定义信息中查找得到与表单组件匹配的表单验证规则信息。

[0033] 在本实施例中,页面组件结构信息中包含多个页面组件节点,其中,页面组件结构信息为视图模板对应的抽象语法树中的多个树节点,每个页面组件节点可以对应不同的节点类型,例如容器节点、表单节点和文本节点等。每个页面组件节点可以对应一个具体的UI组件实例,具体包含UI组件对应的类型标识、属性集合和位置信息。示例性地,对于模板中包含的<el-form><el-input prop="userName"><el-select prop="gender">< / el-form>,可以解析得到包含三个页面组件节点的结构信息,包括容器节点el-form,容器节点包含两个子节点el-input和el-select。

[0034] 然后可以依次对多个页面组件节点进行遍历,当识别出页面组件节点为表单组件节点时,可以获取表单组件节点对应的表单组件的表单组件属性信息,具体可以通过深度优先遍历算法访问页面组件结构信息中的每个页面组件节点,表单组件节点表征具有数据输入功能的UI组件节点,例如Element UI的el-input、el-select等节点,表单组件属性信息用于表征表单组件的属性信息,具体可以包括表单字段路径信息(如prop属性)和表单字段类型等元数据。

[0035] 然后可以根据表单字段路径信息在组件逻辑定义信息中查找得到与表单组件匹配的表单验证规则信息。示例性地,可以根据表单字段路径信息"userName"在formRules对象中匹配到对应的验证规则数组[{required:true,message:'用户名必填'},{min:2,max:10,message:'长度2-10字符'}],从而建立表单组件节点与具体业务验证规则之间的对应关系,有利于提高后续生成的接口文档的语义准确性。

[0036] 本申请实施例自动关联表单组件与对应的验证规则,解决了相关技术中页面组件与验证逻辑分散配置导致的维护困难问题(例如接口文档维护困难),从而提高了提取的表单元数据的准确性和完整性。通过遍历每个页面组件节点,能够保证在复杂嵌套的表单场景下所有表单组件都能被正确识别并关联对应的验证规则。

[0037] 在一些实施例的步骤S103中,根据表单组件属性信息以及表单验证规则信息生成目标接口文档,并模拟生成对应的目标接口仿真数据,其中目标接口文档为机器可读格式和规范(例如不同版本的OpenAPI规范)的结构化文档,可以包括接口名称、请求方法、请求统一资源定位(Uniform Resource Locator,URL)符、请求头以及请求体等信息,然后可以根据表单组件属性信息和表单验证规则信息来定义接口请求体结构与参数。以OpenAPI规范的接口文档为例进行说明,可以将userName的字符串类型映射为OpenAPI文档中的string类型关键字,又例如,将userName的长度规则映射为OpenAPI文档中的minLength与maxLength关键字。

[0038] 目标接口仿真数据是基于同一页面组件数据生成的表单元数据得到的模拟响应数据,即Mock数据,Mock数据是模拟数据,可以用于在软件开发中解除前后端依赖、加速开发测试过程,常见于前端开发和接口测试场景。它通过模拟数据替代真实后端接口返回的响应数据,使得前端在后端未实现接口功能时独立工作。示例性地,针对userName字段生成符合长度要求的值,如"张三",从而确保接口文档与仿真数据在业务语义和规则上的一致性。

[0039] 在一些实施例中,根据表单组件属性信息以及表单验证规则信息生成目标接口文档,包括如下步骤:根据表单组件属性信息以及表单验证规则信息生成表单元数据,并从表单元数据中提取表单字段类型信息和表单必填字段信息;将表单验证规则信息转换为接口约束字段信息;根据表单字段类型信息、表单必填字段信息以及接口约束字段信息生成目标接口文档。

[0040] 在本实施例中,表单元数据是对表单组件属性信息和表单验证规则信息进行结构化整合后形成的统一输出格式(例如JSON格式)的数据结构,表单元数据的一个示例如下:json {"userName":{"type":"string","rules": [{"required":true},{"min":2},{"max":10}]},"age":{"type":"number","rules":[{"required":true},{"min":18}, {"max":100}]}}。

[0041] 在一些实施例中,请参照图2,图2是本申请实施例提供的生成表单元数据的一个流程示意图。如图2所示,具体地,DOM解析引擎可以包括编译程序、脚本解析器、规则提取器、遍历器、节点处理程序以及元数据构建程序。首先通过编译程序(Compiler)解析页面组件数据(例如Vue组件文件)生成抽象语法树(抽象语法树包含模板(template)和逻辑脚本(script)两部分)。然后可以通过脚本解析器(ScriptParser)提取逻辑脚本,然后通过规则提取器(RuleExtractor)提取表单验证规则信息,例如提取formRules对象,规则提取器将获取的表单验证规则信息返回给脚本解析器,脚本解析器将接收的表单验证规则信息发送至元数据构建程序(Metabuilder元数据构建器)进行存储。进一步地,通过遍历器(Traverser)对模板对应的抽象语法树进行深度优先遍历。接下来,进入对抽象语法树的节点进行处理的循环中,具体地, 节点处理程序(NodeProcessor)分析处理当前遍历到的抽象语法树的节点,并判断当前节点是否为表单元素,若当前节点不是表单元素,则不处理,若当前节点为表单元素,则获取表单元素的字段路径(prop属性),然后规则提取器根据字段路径在Metabuilder中查找对应的表单验证规则,并接收Metabuilder返回的表单验证规则。进一步地,在MetaBuilder注册字段元数据,即将字段元数据(例如字段路径userName、字段类型string以及表单验证规则{required:true,min:2,max:10})记录到MetaBuilder中。MetaBuilder根据接收的字段元数据构建嵌套结构,处理字段间的层级关系,并将处理结果返回给遍历器。可以理解的是,上述循环过程中,每次循环可以构建一个表单元数据。

[0042] 进一步地,遍历器可以继续获取抽象语法树的子节点列表,然后对列表中的子节点进行遍历,并获取每一子节点的节点数据,并调用节点处理程序递归处理子节点。待完成对抽象语法树中所有节点的遍历之后,MetaBuilder输出完整的表单元数据给前端Compiler。

[0043] 然后可以从表单元数据中提取表单字段类型信息以及表单必填字段信息,其中表单字段类型信息用于定义各个表单字段的数据类型,可以包括字符串、数字、日期以及枚举等类型,表单必填字段信息用于表征表单字段必须提供有效值的约束条件。具体地,表单必填字段信息可以通过解析表单验证规则信息中的required:true验证规则配置项得到,对应于OpenAPI规范中的required数组定义。示例性地,当表单元数据中包含userName字段的组件属性{type:"string"}和验证规则{required:true,min:2,max:10}时,可以从中提取出表单字段类型信息"string"和表单必填字段信息"userName"。如此,可以得到生成目标接口文档所需的字段类型信息以及约束条件。

[0044] 然后可以将表单元数据中的表单验证规则信息转换为目标接口文档中的接口约束字段信息,其中,接口约束字段信息可以包括符合OpenAPI等接口描述规范的标准化约束表述。具体地,可以根据预设的映射规则将各类表单验证规则转换为对应的schema关键字。示例性地,可以将表单验证规则信息中的min:2和max:10转换为符合接口描述规范的关键字minimum和maximum,又例如,可以将表单验证规则消息中的pattern正则表达式转换为符合接口描述规范的pattern关键字,再例如,可以将表单验证规则消息中的message转换为符合接口描述规范的description描述文本。如此,可以实现从业务验证规则到接口文档约束的语义转换。

[0045] 进一步地,可以根据表单字段类型信息、表单必填字段信息以及接口约束字段信息生成目标接口文档,具体地,通过前述步骤将表单验证规则信息转换为目标接口文档中对应的接口约束字段信息,还可以将表单字段类型信息映射至符合接口描述规范的字段类型关键字,并将表单必填字段信息映射至符合接口描述规范的必填字段关键字。示例性地,可以将"userName"中的表单字段类型"type":"string"映射为符合OpenAPI接口文档规范的"type":"string",将表单字段类型age中的"number"映射为符合OpenAPI接口文档规范的"integer"。假设userName和age的表单验证规则信息中均包含"required": true的必填字段标识,可以将userName和age汇总至OpenAPI 规范的接口文档中Schema的"required":["userName","age"]数组中。上述步骤可以通过接口文档生成引擎自动化实现,将表单元数据映射至符合接口文档规范的接口文档数据,以进一步根据映射后的接口文档数据生成对应的目标接口文档。

[0046] 本申请实施例通过表单字段类型信息定义目标接口文档的接口参数的基础类型,通过表单必填字段定义目标接口文档的接口请求中必须包含的请求参数集合,并通过表单验证规则信息映射得到目标接口文档的接口约束字段信息,以补充接口参数的具体业务规则约束。如此,本申请实施例提供了从前端页面组件的表单元数据到标准化接口文档数据的自动转换流程,为前后端协作提供了准确且实时更新的接口文档,提高了接口文档在数据类型、必填属性和业务约束的准确性,从而降低接口文档的维护成本。

[0047] 在一些实施例中,请参照图3,图3为本申请实施例提供的生成目标接口文档的一个流程示意图。由接口文档生成引擎自动化生成目标接口文档,将结构化的表单元数据转换为符合OpenAPI规范的接口文档,可以理解的是,上述OpenAPI生成方案可被任意等价的接口描述规范替代,本申请实施例以面向后端开发者的可机读契约作为首要表现形式,上述举例不构成对本申请实施例的限制。具体地,接口文档生成引擎可以接收来自前端的DOM解析引擎的输出表单元数据,表单元数据中包含表单字段的完整定义;然后对表单元数据进行接口文档规范形式的转换,具体地,可以先进行表单字段类型映射,例如将表单元数据里的字段类型type映射成OpenAPI接口文档规范中的JSON-Schema类型;然后可以收集必填字段列表,即收集required列表,具体为将rules.required为true的字段收集到required数组中;进一步地,可以转换接口约束字段,具体为将表单验证规则信息转换为OpenAPI接口文档规范中对应的接口约束字段,例如按字段将rules转成Schema关键字,将min转换成minimum关键字,将max转换成maximum关键字,将pattern转换成description关键字等;最后可以对枚举值进行处理,当字段类型type为enum枚举类型时,取values数组的value字段作为enum列表。对上述步骤的处理结果进行整合生成Schema,得到最终的OpenAPI规范接口文档(JSON / YAML格式),其中包含完整的接口路径、请求方法、参数定义和响应结构。

[0048] 在一些实施例中,根据表单组件属性信息以及表单验证规则信息模拟生成对应的目标接口仿真数据,包括如下步骤:遍历表单元数据中所包含的表单字段,并根据每一表单字段对应的表单字段类型信息在预设的数据库中查找满足表单字段对应的表单验证规则信息的字段仿真值;根据表单元数据的字段结构信息对字段仿真值进行整合,得到目标接口仿真数据。

[0049] 在本实施例中,可以遍历表单元数据中所包含的表单字段,并根据每一表单字段对应的表单字段类型信息在预设的数据库中查找满足表单字段对应的表单验证规则信息的字段仿真值,其中,预设的数据库中包含各类语义化仿真数据,字段仿真值则是根据表单字段类型和表单验证规则在数据库中检索得到的符合业务语义的模拟数据实例。例如,当遍历到字段类型为"string"且验证规则为{required:true,min:2,max:10}的userName字段时,可以在预设数据库的姓名数据区中检索长度在2到10个字符范围内的具体姓名值(如"张三"),并将检索到的具体值作为该字段的字段仿真值,以确保生成的仿真数据同时满足字段类型要求和业务规则约束。

[0050] 然后可以根据表单元数据的字段结构信息对字段仿真值进行整合,得到目标接口仿真数据,其中表单元数据的字段结构信息是指表单元数据中定义的表单字段之间的层级关系和组织结构,目标接口仿真数据则是按照字段结构信息组装得到的符合接口规范的、完整的仿真响应对象。示例性地,当表单元数据包含{user:{name:"string",age:"number"}}的嵌套结构时,可以将检索得到的字段仿真值"张三"以及"25"按照原始的字段结构组装得到{user:{name:"张三",age:25}}的目标接口仿真数据,以保持与接口文档定义完全一致的数据结构。

[0051] 如此,本申请实施例能够实现从结构化的表单元数据到接口仿真数据的自动化转换,结合字段类型和业务规则约束生成接口仿真数据,既保证了模拟数据的类型准确性、格式合规性和业务语义合理性,又通过字段结构对生成的模拟数据进行整合,以保证接口仿真数据与目标接口定义之间的语义匹配性,从而为前端调试提供了准确可靠的模拟数据,降低了手动编写和维护Mock数据的成本。

[0052] 请参照图4,图4为本申请实施例提供的生成目标接口仿真数据的示意图,具体地,客户端接收来自DOM解析引擎输出的结构化的表单元数据,表单元数据中包含表单字段的完整定义、类型信息和验证规则等信息,然后可以遍历元数据对象的每个字段,识别其数据类型,包括字符串类型string(如姓名、地址、描述信息)、数字类型number(如年龄、价格、数量)、日期类型date(如出生日期、创建时间)以及枚举类型enum(如性别、状态、分类),然后可以根据不同类型分发到相应的数据处理通道。在数据处理通道中,首先进行语义解析,针对不同类型采用对应的数据生成策略:(1)字符串类型处理,应用格式规则:根据字段语义生成符合业务场景的字符串,例如对于字符串userName生成"张三";(2)数字类型处理,根据业务规则生成范围内的数值;(3)日期类型处理,生成符合格式要求的日期数据;(4)枚举类型处理,从预定义选项中随机选择。需要说明的是,除以上类型外还支持类型扩展,最后组装成符合规则目标仿真接口数据。

[0053] 在一些实施例的步骤S104中,可以调用数据响应模拟服务基于目标接口文档创建对应的数据响应模拟接口,其中数据响应模拟服务(Mock服务)是一个运行于本地开发环境的独立进程,用于模拟后端应用程序编程接口(Application Programme Interface,API)的行为,数据响应模拟服务通过解析目标接口文档中的路径和参数定义,动态创建数据响应模拟接口。例如可以根据目标接口文档生成POST / api / submit的HTTP端点,该接口能够接收前端请求并准备返回仿真数据。

[0054] 在一些实施例的步骤S105中,调用数据响应模拟服务基于数据响应模拟接口和目标接口仿真数据对目标应用页面进行调试。其中调试过程通过前端页面发起真实HTTP请求至数据响应模拟接口,根据上述举例,用户在浏览器中提交表单触发对POST / api / submit接口的调用,数据响应模拟服务则拦截请求并返回目标接口仿真数据如{"userName":"张三"}。此外,数据响应模拟服务可以配置模拟网络延迟或错误请求状态,以测试前端页面的数据渲染和交互能力,从而验证页面功能是否符合预期。如此,前端不需要等待后端定义好接口文档才能进行后续的调试流程,提高了前端的调试效率。

[0055] 在一些实施例中,数据响应模拟服务包括路由创建组件以及网络延时模拟组件,调用数据响应模拟服务基于目标接口文档创建对应的数据响应模拟接口,包括如下步骤:调用路由创建组件基于目标接口文档创建对应的数据响应模拟接口;对应地,调用数据响应模拟服务基于数据响应模拟接口和目标接口仿真数据对目标应用页面进行调试,包括如下步骤:接收在目标应用页面中的触发操作,向数据响应模拟服务发送数据请求指令;调用网络延时模拟组件模拟数据响应延时;经过数据响应延时之后,接收路由创建组件返回的数据请求参数对应的接口仿真数据。

[0056] 在本实施例中,路由创建组件是数据响应模拟服务中负责将接口文档转换为可访问API端点的功能模块,数据响应模拟接口则是能够接收HTTP请求并返回仿真数据的API端点。例如,当目标接口文档中定义了一个POST / api / user接口时,路由创建组件能够从接口文档中解析该接口的请求路径、请求方法和请求参数等信息,并在Mock服务运行的环境中注册相应的路由处理器,形成可调用的数据响应模拟接口。

[0057] 当接收到用户在目标应用页面中的触发操作时,客户端可以向数据响应模拟服务发送数据请求指令,其中数据请求指令,数据请求指令是前端应用根据用户操作构造的符合RESTful规范的HTTP请求,可以包括数据请求参数,数据请求参数具体可以包括请求URL、查询字符串或请求体中的具体参数值等信息,触发操作可以为用户在应用页面上的具体交互行为,例如点击提交按钮或输入表单数据。示例性地,当用户点击目标应用页面中的表单数据提交按钮时,客户端可以构建表单数据的POST请求,并将该数据请求指令发送至数据响应模拟服务对应的数据响应模拟接口。

[0058] 数据响应模拟服务还包括网络延时模拟组件,其中网络延时模拟组件是数据响应模拟服务中用于控制请求响应时间的功能模块,数据响应延时表示模拟网络环境中请求与响应之间的时间间隔,例如,网络延时模拟组件可配置为在接收到数据请求指令后等待200-500毫秒的随机时间再返回响应数据,从而模拟真实网络环境中的传输延迟。

[0059] 进一步地,网络延时模拟组件模拟网络延时,经过数据响应延时之后,客户端可以由接收路由创建组件返回的数据请求参数对应的接口仿真数据,具体地,路由创建组件可以在数据响应延时结束之后,根据接收到的数据请求参数从目标接口仿真数据中检索匹配对应的响应内容,并将检索到的接口仿真数据返回给客户端。示例性地,当数据请求指令中包含查询参数userID=123时,路由创建组件可以在目标接口仿真数据中查找与该参数匹配的用户信息,并返回相应的仿真接口数据。

[0060] 示例性地,Mock服务包括Mock数据加载器、中间件以及动态路由创建组件,其中Mock数据加载器用于指定Mock文件系统路径读取Mock数据,中间件用于读取服务配置,比如模拟网络延迟,动态路由创建组件基于装载的Mock数据动态创建http请求接口,如基于get或post获取全量数据或单个key字段。Mock服务还用于实现如下功能:热更新机制:检测Mock文件的内容变化;延迟控制:劫持服务响应,确保延迟生效;接口错误模拟:劫持服务响应,概率性返回接口异常;动态路由:根据Mock数据模拟不同场景下的接口调用。

[0061] 本申请实施例通过准确的接口文档提高了接口模拟的准确性和一致性,通过模拟网络延时提高了测试环境的真实性,使前端能够在后端开发未就绪的情况下验证应用页面功能、交互逻辑和异常处理机制,提高了前端调试效率。

[0062] 在一些实施例中,本申请提供的调试方法,还包括如下步骤:当检测到目标应用页面的页面组件数据发生信息变更时,获取信息变更后的更新页面组件数据;根据更新页面组件数据生成更新接口文档,并根据更新页面组件数据模拟生成更新接口仿真数据;调用数据响应模拟服务基于更新接口文档创建对应的数据响应模拟更新接口;调用数据响应模拟服务基于数据响应模拟更新接口和更新接口仿真数据对目标应用页面进行调试。

[0063] 在本实施例中,具体地,当检测到目标应用页面的页面组件数据发生信息变更时,获取信息变更后的更新页面组件数据,具体地,可以通过文件系统检测机制实时捕获页面组件数据的变更,信息变更可以包括表单结构的修改、验证规则的调整或表单字段的更新,更新页面组件数据为变更后重新获取的页面组件源代码。

[0064] 然后可以根据更新页面组件数据生成更新接口文档,并根据更新页面组件数据模拟生成更新接口仿真数据,更新接口文档可以基于更新页面组件数据重新解析生成的符合OpenAPI规范的接口定义文件,更新接口仿真数据则是根据更新页面组件数据对应的表单更新元数据,自动生成的更新接口仿真数据。示例性地,当页面组件数据中新增手机号码字段及相应验证规则时,可以重新解析生成包含该字段接口定义的更新接口文档,并同步生成包含符合手机号格式的更新接口仿真数据。

[0065] 然后可以调用数据响应模拟服务基于更新接口文档创建对应的数据响应模拟更新接口,示例性地,当更新接口文档中接口路径从 / api / user变更为 / api / v2 / user时,数据响应模拟服务可以注销旧接口,并基于更新的接口路径创建数据响应模拟更新接口。

[0066] 进一步地,可以调用数据响应模拟服务基于数据响应模拟更新接口和更新接口仿真数据对目标应用页面进行调试,例如,当用户在前端页面提交包含新增字段的表单时,数据请求指令被路由至数据响应模拟更新接口,数据响应模拟更新接口返回包含新字段仿真数据的响应数据。

[0067] 本申请实施例提供了闭环更新机制,建立了实时响应前端应用页面变化的智能调试系统,在前端应用页面发生变更时,能够及时对接口文档进行更新,解决了相关技术中因后端定义的接口文档与前端的应用页面更新不同步导致前端调试进程阻塞的技术问题,提高了前后端的协作调试效率。

[0068] 请参照图5,图5为本申请实施例提供的调试系统的示意图。具体地,调试系统包括前端开发环境501、处理层502、输出层503以及支撑系统504,其中,前端开发环境501中包含智能解析引擎,处理层502中包含元数据图谱库、接口文档生成器、接口仿真数据生成器以及数据响应模拟服务,输出层503中包括智能调试环境、后端服务以及目标接口文档展示界面,支撑系统504中包括网络模拟器、版本控制器、语义规则库以及变更检测器,变更检测器用于实时检测页面组件数据变更,触发更新流程,语义规则库用于存储字段语义规则,支持智能数据生成,网络模拟器用于模拟不同网络环境(延迟、异常等),版本控制器用于管理不同版本的OpenAPI文档和Mock数据。具体地,当变更检测器检测到文件系统事件时,前端开发环境501调用智能解析引擎基于视觉特征进行组件解析,并对页面组件数据进行语义解析,智能推断表单字段,然后生成表单元数据,并将生成的表单元数据发送至元数据图谱库中进行存储。然后处理层502调用接口文档生成器根据表单元数据生成目标接口文档和桩代码,并调用接口仿真数据生成器基于语义规则库中的数据生成模板以及元数据图谱库中的表单元数据生成目标接口仿真数据。最后,接口文档生成器将生成的桩代码和目标接口文档分别发送至后端服务以及目标接口文档展示界面,以便后端开发人员查看目标接口文档和根据目标接口文档进行开发。并调用数据响应模拟服务基于网络模拟器模拟生成的网络延时或者网络异常以及目标接口仿真数据模拟接口响应,并将响应数据返回给前端,完成前端调试。

[0069] 请参照图6,图6为本申请实施例提供的调试方法的本地工作流程示意图,具体地,本地服务启动后,当前端开发者在代码编辑器上编辑和保存指定路径的页面组件数据时,可以触发三个流程。第一个流程为,目标应用(例如浏览器)自动刷新页面,页面内容变更为编辑后的页面内容;第二个流程为,页面组件数据变更检测器(图5中的变更检测器)触发文件更新事件,通知接口文档生成引擎和接口仿真数据(Mock数据)生成引擎开始工作,这两个引擎分别会通知页面组件数据解析引擎(DOM解析引擎)对当前指定路径的页面组件数据进行解析得到抽象语法树,抽象语法树包括template和script两部分,从而生成新的表单元数据,然后接口文档生成引擎基于表单元数据的规则和约束生成真实的目标接口文档(OpenApi文档),同时接口仿真数据生成引擎基于表单元 数据生成仿真的Mock数据并保存在目标接口仿真数据库(Mock文件系统)中。与此同时,数据响应模拟服务(Mock服务)可以检测目标接口仿真数据库中接口仿真数据(Mock文件内容)的变化,当检测到变化时,重新装载接口仿真数据;第三个流程为,当客户端(例如浏览器)重新发起http请求时,数据响应模拟服务返回一份新的接口仿真数据,新的接口仿真数据将完全匹配当前更新的应用页面所需的数据,数据响应模拟服务还可以根据配置中心来模拟真实场景中接口的网络延迟和接口错误的情况。

[0070] 请参阅图7,本申请实施例还提供一种调试装置700,可以实现上述调试方法,该装置包括:获取单元701,用于获取目标应用页面对应的页面组件数据,目标应用页面包括多个表单组件;解析单元702,用于对页面组件数据进行解析得到每一表单组件对应的表单组件属性信息以及表单验证规则信息;生成单元703,用于根据表单组件属性信息以及表单验证规则信息生成目标接口文档,并根据表单组件属性信息以及表单验证规则信息模拟生成对应的目标接口仿真数据;第一调用单元704,用于调用数据响应模拟服务基于目标接口文档创建对应的数据响应模拟接口;第二调用单元705,用于调用数据响应模拟服务基于数据响应模拟接口和目标接口仿真数据对目标应用页面进行调试。

[0071] 该调试装置的具体实施方式与上述调试方法的具体实施例基本相同,在此不再赘述。

[0072] 本申请实施例还提供了一种电子设备,电子设备包括存储器和处理器,存储器存储有计算机程序,处理器执行计算机程序时实现上述调试方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

[0073] 请参阅图8,图8示意了另一实施例的电子设备的硬件结构,电子设备包括:处理器801,可以采用通用的中央处理器(Central Processing Unit,CPU)、微处理器、应用专用集成电路(Application Specific Integrated Circuit,ASIC)、或者一个或多个集成电路等方式实现,用于执行相关程序,以实现本申请实施例所提供的技术方案;存储器802,可以采用只读存储器(ReadOnly Memory,ROM)、静态存储设备、动态存储设备或者随机存取存储器(Random Access Memory,RAM)等形式实现。存储器802可以存储操作系统和其他应用程序,在通过软件或者固件来实现本说明书实施例所提供的技术方案时,相关的程序代码保存在存储器802中,并由处理器801来调用执行本申请实施例的调试方法;输入 / 输出接口803,用于实现信息输入及输出;通信接口804,用于实现本设备与其他设备的通信交互,可以通过有线方式(例如USB、网线等)实现通信,也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信;总线805,在设备的各个组件(例如处理器801、存储器802、输入 / 输出接口803和通信接口804)之间传输信息;其中处理器801、存储器802、输入 / 输出接口803和通信接口804通过总线805实现彼此之间在设备内部的通信连接。

[0074] 本申请实施例还提供了一种计算机可读存储介质,该计算机可读存储介质存储有计算机程序,该计算机程序被处理器执行时实现上述调试方法。

[0075] 存储器作为一种非暂态计算机可读存储介质,可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外,存储器可以包括高速随机存取存储器,还可以包括非暂态存储器,例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中,存储器可选包括相对于处理器远程设置的存储器,这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

[0076] 本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案,并不构成对于本申请实施例提供的技术方案的限定,本领域技术人员可知,随着技术的演变和新应用场景的出现,本申请实施例提供的技术方案对于类似的技术问题,同样适用。

[0077] 本领域技术人员可以理解的是,图中示出的技术方案并不构成对本申请实施例的限定,可以包括比图示更多或更少的步骤,或者组合某些步骤,或者不同的步骤。

[0078] 以上所描述的装置实施例仅仅是示意性的,其中作为分离部件说明的单元可以是或者也可以不是物理上分开的,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

[0079] 本领域普通技术人员可以理解,上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块 / 单元可以被实施为软件、固件、硬件及其适当的组合。

[0080] 本申请的说明书及上述附图中的术语"第一”、"第二”、"第三”、"第四”等(如果存在)是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语"包括”和"具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

[0081] 应当理解,在本申请中,"至少一个(项)”是指一个或者多个,"多个”是指两个或两个以上。"和 / 或”,用于描述关联对象的关联关系,表示可以存在三种关系,例如,"A和 / 或B”可以表示:只存在A,只存在B以及同时存在A和B三种情况,其中A,B可以是单数或者复数。字符" / ”一般表示前后关联对象是一种"或”的关系。"以下至少一项(个)”或其类似表达,是指这些项中的任意组合,包括单项(个)或复数项(个)的任意组合。例如,a,b或c中的至少一项(个),可以表示:a,b,c,"a和b”,"a和c”,"b和c”,或"a和b和c”,其中a,b,c可以是单个,也可以是多个。

[0082] 在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,上述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。

[0083] 上述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

[0084] 另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。

[0085] 集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括多指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例的方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,简称ROM)、随机存取存储器(Random Access Memory,简称RAM)、磁碟或者光盘等各种可以存储程序的介质。

[0086] 以上参照附图说明了本申请实施例的优选实施例,并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进,均应在本申请实施例的权利范围之内。< / script> < / template>

Claims

1. A debugging method, characterized in that, Applied to a client, the method includes: Obtain page component data corresponding to the target application page, wherein the target application page includes multiple form components; The page component data is parsed to obtain the form component attribute information and form validation rule information corresponding to each form component; The target interface document is generated based on the form component attribute information and the form validation rule information, and the corresponding target interface simulation data is generated based on the form component attribute information and the form validation rule information. The data response simulation service is invoked to create a corresponding data response simulation interface based on the target interface document; The data response simulation service is invoked to debug the target application page based on the data response simulation interface and the target interface simulation data.

2. The method according to claim 1, characterized in that, The step of parsing the page component data to obtain the form component attribute information and form validation rule information corresponding to each form component includes: The page component data is parsed to obtain the corresponding abstract syntax tree, and the page component structure information and component logic definition information are extracted from the abstract syntax tree. The page component structure information and the component logic definition information are parsed to obtain the form component attribute information and form validation rule information corresponding to each form component.

3. The method according to claim 2, characterized in that, The page component structure information contains multiple page component nodes. Parsing the page component structure information and the component logic definition information yields the form component attribute information and form validation rule information corresponding to each form component, including: The plurality of page component nodes are traversed sequentially. When a page component node is a form component node, the form component attribute information of the form component corresponding to the form component node is obtained. The form component attribute information includes form field path information. Based on the form field path information, the form validation rule information matching the form component is found in the component logic definition information.

4. The method according to claim 1, characterized in that, The step of generating the target interface document based on the form component attribute information and the form validation rule information includes: Generate form metadata based on the form component attribute information and the form validation rule information, and extract form field type information and required form field information from the form metadata; Convert the form validation rule information into interface constraint field information; The target interface document is generated based on the form field type information, the form required field information, and the interface constraint field information.

5. The method according to claim 4, characterized in that, The step of simulating and generating corresponding target interface simulation data based on the form component attribute information and the form validation rule information includes: Iterate through the form fields contained in the form metadata, and search in the preset database for the field simulation value that satisfies the form validation rule information corresponding to each form field according to the form field type information corresponding to each form field; The simulated values ​​of the fields are integrated based on the field structure information of the form metadata to obtain the target interface simulation data.

6. The method according to claim 1, characterized in that, The data response simulation service includes a route creation component and a network latency simulation component. The process of calling the data response simulation service creates a corresponding data response simulation interface based on the target interface document, including: The route creation component is invoked to create a corresponding data response simulation interface based on the target interface document; The step of calling the data response simulation service to debug the target application page based on the data response simulation interface and the target interface simulation data includes: Receive a trigger operation in the target application page, and send a data request instruction to the data response simulation service, the data request instruction including data request parameters; The network latency simulation component is invoked to simulate data response latency; After the data response delay, the interface simulation data corresponding to the data request parameters returned by the route creation component is received.

7. The method according to claim 1, characterized in that, The method further includes: When a change in the data of a page component on the target application page is detected, the updated page component data after the change is obtained; An update interface document is generated based on the updated page component data, and simulation data for the update interface is generated based on the updated page component data. The data response simulation service is invoked to create a corresponding data response simulation update interface based on the update interface document. The data response simulation service is invoked to debug the target application page based on the data response simulation update interface and the simulation data of the update interface.

8. A debugging device, characterized in that, The device includes: The acquisition unit is used to acquire page component data corresponding to the target application page, wherein the target application page includes multiple form components; The parsing unit is used to parse the page component data to obtain the form component attribute information and form validation rule information corresponding to each form component; The generation unit is used to generate a target interface document based on the form component attribute information and the form validation rule information, and to simulate and generate corresponding target interface simulation data based on the form component attribute information and the form validation rule information. The first invocation unit is used to invoke the data response simulation service to create a corresponding data response simulation interface based on the target interface document; The second calling unit is used to call the data response simulation service to debug the target application page based on the data response simulation interface and the target interface simulation data.

9. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the debugging method according to any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the debugging method according to any one of claims 1 to 7.