[发明专利]前端页面调试方法、装置、计算机设备和存储介质

说明书

本公开公开了一种前端页面调试方法、装置、计算机设备和存储介质。其中方法包括：在监测到前端页面当前需要进行渲染时，监控引起前端页面进行更新渲染的变量；根据引起前端页面进行更新渲染的变量，分析前端页面中变量的依赖关系；将前端页面中变量的依赖关系提供给开发人员，其中，变量的依赖关系用于开发人员对前端页面进行调试。该方法可以使得监控数据可视化展示，为前端页面的调试提供了有效依据，从而方便了开发人员的调试。

技术领域

本公开涉及计算机技术领域，尤其涉及一种前端页面调试方法、装置、计算机设备和计算机可读存储介质。

背景技术

在开发前端页面的过程中，开发人员需要对前端页面进行调试以检测该前端页面是否满足目标开发需求。目前开发人员只能通过人为观看的方式检测该前端页面的更新变化是否满足目标开发需求，但是，开发人员并不知道是由于什么原因引起该前端页面的更新变化，使得开发人员无法得知导致前端页面更新的原因，无法方便地为前端页面的调试提供有效依据。

发明内容

本公开提供一种前端页面调试方法、装置、计算机设备和计算机可读存储介质，能够解决相关技术中开发人员无法得知导致前端页面更新的原因，从而无法方便地为前端页面的调试提供有效依据的技术问题。

本公开第一方面实施例提出了一种前端页面调试方法，包括：在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。

根据本公开实施例的前端页面调试方法，在监测到前端页面当前需要进行渲染时，监控引起前端页面进行更新渲染的变量，并根据引起前端页面进行更新渲染的变量，分析前端页面中变量的依赖关系，并将前端页面中变量的依赖关系提供给开发人员，以使开发人员根据该变量的依赖关系对该前端页面进行调试，即通过监控前端页面更新或变量改变的依赖关系，并将该变量的依赖关系提供给开发人员，使得开发人员通过该依赖关系即可了解到究竟是由于什么原因引起的页面更新或变量的改变，使得监控数据可视化展示，为前端页面的调试提供了有效依据，从而方便了开发人员的调试。

根据本公开的一个实施例，所述监控引起所述前端页面进行更新渲染的变量，包括：获取用于渲染所述前端页面的渲染代码；获取预设的监控代码，并将所述监控代码插入至所述渲染代码中；在执行所述渲染代码以渲染所述前端页面时，通过所述监控代码监控引起所述前端页面进行更新渲染的变量。

根据本公开的一个实施例，所述获取用于渲染所述前端页面的渲染代码，包括：从渐进式框架Vue.js库中获取所述用于渲染前端页面的渲染代码。

根据本公开的一个实施例，所述根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系，包括：通过所述监控代码根据所述引起前端页面进行更新渲染的变量，确定所述变量改变时引起的其他发生改变的变量；确定所述变量和所述其他发生改变的变量之间的依赖关系。

根据本公开的一个实施例，所述将所述前端页面中变量的依赖关系提供给开发人员，包括：输出所述前端页面中变量的依赖关系；将所述输出的前端页面中变量的依赖关系呈现在指定的显示区域内以供开发人员查看。

本公开第二方面实施例提出了一种前端页面调试装置，包括：监控模块，用于在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；分析模块，用于根据所述引起所述前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；提供模块，用于将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。