页面代码的开发调试方法和装置与流程

本发明涉及计算机，尤其涉及一种页面代码的开发调试方法和装置。

背景技术：

1、在一些基于saas(software as a service，软件交付模型)开发的平台中，由多个独立组件搭建业务页面或基于平台能力扩展业务能力，常见场景如低代码可视化平台、数据中台小程序等平台。以往多是基于saas平台提供的软件开发工具包或软件工程脚手架进行本地开发，但在开发过程中测试场景比较单一，有些情况测试范围无法覆盖全，而在saas平台真正使用时，与其他组件结合使用可能会出现意想不到的问题，错误日志又不全面，此时修复问题链条就会比较长，需要本地预测问题点打包上传或进行日志埋点进行排查，导致时间成本增加。综上，现有的页面代码调试方式定位问题较难，且调试链条较长，导致调试时间成本增加。

技术实现思路

1、有鉴于此，本发明实施例提供一种页面代码的开发调试方法和装置，能够实现本地代码修改后实时呈现到页面代码开发平台的目的，因为本地代码直接联动页面代码开发平台saas呈现效果，则省去了重复打包和上传的过程，直接进行代码修复和调试即可，并且错误信息也会索引本地代码的具体位置，定位问题简单、准确，很大程度提升代码开发调试的效率，节省了代码开发调试的时间成本。

2、为实现上述目的，根据本发明实施例的一个方面，提供了一种页面代码的开发调试方法，包括：响应于接收到软件工程脚手架在对页面代码编译完成后发来的开发调试通知，获取所述页面代码的存储路径，所述页面代码包括不少于一个待测组件对应的组件代码；获取待测组件标识，并根据所述页面代码的存储路径和所述待测组件标识加载待测组件对应的组件代码；根据所述待测组件对应的组件代码进行页面渲染展示，并根据页面渲染展示结果进行页面代码的开发调试。

3、可选地，所述软件工程脚手架是基于webpack搭建的；所述软件工程脚手架在检测到基于webpack插件编写页面代码或者监听到页面代码状态发生变更并触发所述webpack插件中的指定功能函数时，判定页面代码发生变更，并对变更后的页面代码进行编译。

4、可选地，所述开发调试通知包括所述页面代码的编译状态，所述编译状态是通过所述webpack插件获取的，所述编译状态包括初始编译状态和热更新状态。

5、可选地，在所述编译状态为初始编译状态的情况下，通过所述软件工程脚手架获取所述页面代码的存储路径，并根据所述存储路径对待测组件进行路径配置。

6、可选地，所述方法还包括：响应于在页面代码开发平台的代码编辑器中执行启动调试指令，构建软件工程脚手架，并开启所述页面代码开发平台与所述软件工程脚手架之间的通信服务。

7、可选地，响应于在页面代码开发平台的代码编辑器中执行启动调试指令，构建软件工程脚手架，包括：响应于在页面代码开发平台的代码编辑器中执行启动调试指令，提示用户输入校验密钥；根据用户输入的校验密钥进行用户身份校验，并在校验通过后，构建软件工程脚手架。

8、可选地，根据所述待测组件对应的组件代码进行页面渲染展示，包括：从页面代码开发平台获取所述无需进行调试的组件对应的组件代码；根据所述待测组件对应的组件代码和所述无需进行调试的组件对应的组件代码，进行页面渲染展示。

9、根据本发明实施例的另一方面，提供了一种页面代码的开发调试装置，包括：存储路径获取模块，用于响应于接收到软件工程脚手架在对页面代码编译完成后发来的开发调试通知，获取所述页面代码的存储路径，所述页面代码包括不少于一个待测组件对应的组件代码；组件代码加载模块，用于获取待测组件标识，并根据所述页面代码的存储路径和所述待测组件标识加载待测组件对应的组件代码；页面渲染展示模块，用于根据所述待测组件对应的组件代码进行页面渲染展示，并根据页面渲染展示结果进行页面代码的开发调试。

10、根据本发明实施例的又一方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的页面代码的开发调试方法。

11、根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的页面代码的开发调试方法。

12、上述发明中的一个实施例具有如下优点或有益效果：通过响应于接收到软件工程脚手架在对页面代码编译完成后发来的开发调试通知，获取页面代码的存储路径，页面代码包括不少于一个待测组件对应的组件代码；获取待测组件标识，并根据页面代码的存储路径和待测组件标识加载待测组件对应的组件代码；根据待测组件对应的组件代码进行页面渲染展示，并根据页面渲染展示结果进行页面代码的开发调试的技术方案，实现了本地代码修改后实时呈现到页面代码开发平台的目的，因为本地代码直接联动页面代码开发平台saas呈现效果，则省去了重复打包和上传的过程，直接进行代码修复和调试即可，并且错误信息也会索引本地代码的具体位置，定位问题简单、准确，很大程度提升代码开发调试的效率，节省了代码开发调试的时间成本。

13、上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

技术特征：

1.一种页面代码的开发调试方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述软件工程脚手架是基于webpack搭建的；

3.根据权利要求2所述的方法，其特征在于，所述开发调试通知包括所述页面代码的编译状态，所述编译状态是通过所述webpack插件获取的，所述编译状态包括初始编译状态和热更新状态。

4.根据权利要求3所述的方法，其特征在于，在所述编译状态为初始编译状态的情况下，通过所述软件工程脚手架获取所述页面代码的存储路径，并根据所述存储路径对待测组件进行路径配置。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

6.根据权利要求5所述的方法，其特征在于，响应于在页面代码开发平台的代码编辑器中执行启动调试指令，构建软件工程脚手架，包括：

7.根据权利要求1所述的方法，其特征在于，根据所述待测组件对应的组件代码进行页面渲染展示，包括：

8.一种页面代码的开发调试装置，其特征在于，包括：

9.一种电子设备，其特征在于，包括：

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。

技术总结本发明公开了一种页面代码的开发调试方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：响应于接收到软件工程脚手架在对页面代码编译完成后发来的开发调试通知，获取页面代码的存储路径，页面代码包括不少于一个待测组件对应的组件代码；获取待测组件标识，并根据页面代码的存储路径和待测组件标识加载待测组件对应的组件代码；根据待测组件对应的组件代码进行页面渲染展示，并根据页面渲染展示结果进行页面代码的开发调试。该实施方式定位问题简单、准确，很大程度提升代码开发调试的效率，节省了代码开发调试的时间成本。技术研发人员：于振京受保护的技术使用者：京东城市（北京）数字科技有限公司技术研发日：技术公布日：2024/10/10