一种基于网页框选和运行态溯源的代码修改方法及系统与流程

本发明涉及网页开发，尤其涉及一种基于网页框选和运行态溯源的代码修改方法及系统。

背景技术：

1、在网页前端开发过程中，开发人员通常需要依据页面呈现效果对代码进行修改。常规工作方式为：先在浏览器中观察页面显示异常或待调整的视觉元素，然后手动切换至代码编辑器，借助浏览器开发者工具中的元素检查功能获取目标元素的选择器或dom路径信息，再通过文件名检索、全局文本搜索等手段，在项目代码中查找可能相关的组件、样式文件或脚本文件。

2、然而，在现代前端项目中，由于组件化架构的广泛采用、样式的继承与层叠、构建工具对源代码的转译和打包、数据驱动的动态渲染以及服务端渲染等因素，浏览器中最终呈现的目标元素与源代码位置之间往往不是简单的一一对应关系，而是涉及分散于多个源文件中的组件定义、模板逻辑、样式规则和事件处理函数。这导致人工定位相关源代码实体的过程耗时较长、严重依赖开发者的个人经验，且容易出现定位错误，进而引发误修改，增加调试成本。

3、另一方面，现有的一些可视化编辑方案，通常仅能在编辑器内部针对预设的配置文件或固定的页面模板进行同步编辑，编辑能力受限于特定框架和预先定义的结构。另一些工具虽然能够采集网页元素的dom路径、坐标和样式信息，但多用于自动化测试或用户行为分析场景，并不具备将已渲染网页中的运行态元素反向溯源至多源代码文件的能力，更无法基于开发人员以自然语言表述的修改意图，自动生成代码修改结果，并在安全环境下对修改结果进行验证和回退。

技术实现思路

1、本发明的目的在于提供一种基于网页框选和运行态溯源的代码修改方法及系统，可以根据开发者直接在浏览器页面上框选目标区域的直观操作，准确、高效地将运行态元素关联至多个相关源代码实体，并借助自然语言驱动的修改意图，完成代码的生成、验证和安全提交，以解决上述现有技术问题的至少之一。

2、第一方面，本发明提供了一种基于网页框选和运行态溯源的代码修改方法，所述方法具体包括：

3、响应于用户在浏览器页面框选目标显示区域，获取对应的目标dom节点；

4、基于目标dom节点，提取节点定位、样式、交互及构建映射关系，形成运行态关联信息；

5、基于运行态关联信息，确定关联源代码实体，并建立目标dom节点与关联源代码实体的溯源关系；

6、根据用户输入的修改请求，结合溯源关系和关联源代码实体的调用关系，确定待修改源代码实体；

7、将修改请求、待修改源代码实体及代码上下文发送至代码生成代理，生成代码补丁；

8、将代码补丁应用于隔离预览环境，重新渲染目标显示区域，得到补丁验证结果；

9、当补丁验证结果满足预设一致性条件时，将代码补丁提交至代码编辑器并定位待修改源代码实体，否则根据补丁验证结果调整代码补丁或回滚。

10、第二方面，本发明提供了一种基于网页框选和运行态溯源的代码修改系统，所述系统具体包括：

11、节点获取模块，用于响应于用户在浏览器页面框选目标显示区域，获取对应的目标dom节点；

12、信息关联模块，用于基于目标dom节点，提取节点定位、样式、交互及构建映射关系，形成运行态关联信息；

13、关系溯源模块，用于基于运行态关联信息，确定关联源代码实体，并建立目标dom节点与关联源代码实体的溯源关系；

14、修改请求模块，用于根据用户输入的修改请求，结合溯源关系和关联源代码实体的调用关系，确定待修改源代码实体；

15、补丁生成模块，用于将修改请求、待修改源代码实体及代码上下文发送至代码生成代理，生成代码补丁；

16、补丁验证模块，用于将代码补丁应用于隔离预览环境，重新渲染目标显示区域，得到补丁验证结果；

17、补丁调整模块，用于当补丁验证结果满足预设一致性条件时，将代码补丁提交至代码编辑器并定位待修改源代码实体，否则根据补丁验证结果调整代码补丁或回滚。

18、第三方面，本发明提供了一种计算机设备，包括：存储器和处理器及存储在存储器上的计算机程序，当所述计算机程序在处理器上被执行时，实现如上述方法中任一项所述的基于网页框选和运行态溯源的代码修改方法。

19、第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时，实现如上述方法中任一项所述的基于网页框选和运行态溯源的代码修改方法。

20、与现有技术相比，本发明具有以下技术效果的至少之一：

21、1、可以根据开发者直接在浏览器页面上框选目标区域的直观操作，准确、高效地将运行态元素关联至多个相关源代码实体，并借助自然语言驱动的修改意图，完成代码的生成、验证和安全提交。

22、2、将浏览器运行态页面的框选操作、多维度运行态溯源、自然语言驱动的代码生成以及安全验证与回滚有机融合，实现了从前端视觉问题发现到源代码精准修改的全流程自动化，提升了复杂网页应用场景下的开发效率和代码维护可靠性。

23、3、通过提取目标dom节点的定位、样式、交互及构建映射关系，形成运行态关联信息，并基于此在源代码索引中匹配组件定义、样式定义和事件处理函数等多类源代码实体，建立结构化的溯源关系。该方法能够穿透组件嵌套、样式继承和构建转换等复杂层次，将浏览器中的运行态元素准确关联到分散在多个源文件中的代码实体，显著提升定位准确性，从根本上解决了人工检索容易出错的问题。

24、4、支持用户在浏览器页面直接框选目标显示区域作为修改入口，并通过解析自然语言修改请求，结合溯源关系和源代码实体的调用关系，自动确定待修改的源代码实体。开发者无需预先了解完整的代码结构和文件划分，即可将直观的视觉修改意图转化为对具体代码位置的精确修改目标，大幅降低操作门槛，缩短从发现问题到确定修改位置的时间。

25、5、通过将修改请求、待修改源代码实体及其代码上下文发送至代码生成代理，可自动生成代码补丁，将开发者的自然语言意图直接转换为符合上下文的代码修改。该方式省去了手动编写和调整代码的步骤，减少了因疏忽导致的语法或逻辑错误，提高了代码修改效率与质量。

26、6、在将代码补丁正式提交至源代码文件之前，先在隔离预览环境中应用补丁并重新渲染目标显示区域，基于构建状态、页面状态和内容比对结果进行验证。仅在满足预设一致性条件时才提交至代码编辑器，否则可依据验证结果调整补丁或执行回滚。这种机制确保对源代码的每一次修改都经过实际运行效果的检验，有效避免将破坏性修改引入项目代码库，保障了开发环境和代码资产的安全性。

1.一种基于网页框选和运行态溯源的代码修改方法，其特征在于，所述方法具体包括：

2.根据权利要求1所述的方法，其特征在于，所述响应于用户在浏览器页面框选目标显示区域，获取对应的目标dom节点，具体包括：

3.根据权利要求1所述的方法，其特征在于，所述基于目标dom节点，提取节点定位、样式、交互及构建映射关系，形成运行态关联信息，具体包括：

4.根据权利要求3所述的方法，其特征在于，所述基于运行态关联信息，确定关联源代码实体，具体包括：

5.根据权利要求4所述的方法，其特征在于，所述建立目标dom节点与关联源代码实体的溯源关系，具体包括：

6.根据权利要求1所述的方法，其特征在于，所述根据用户输入的修改请求，结合溯源关系和关联源代码实体的调用关系，确定待修改源代码实体，具体包括：

7.根据权利要求1所述的方法，其特征在于，所述将修改请求、待修改源代码实体及代码上下文发送至代码生成代理，生成代码补丁，具体包括：

8.根据权利要求1所述的方法，其特征在于，所述将代码补丁应用于隔离预览环境，重新渲染目标显示区域，得到补丁验证结果，具体包括：

9.根据权利要求8所述的方法，其特征在于，所述当补丁验证结果满足预设一致性条件时，将代码补丁提交至代码编辑器并定位待修改源代码实体，否则根据补丁验证结果调整代码补丁或回滚，具体包括：

10.一种基于网页框选和运行态溯源的代码修改系统，其特征在于，所述系统具体包括：