前端页面调试方法、装置、计算机设备和存储介质制造方法及图纸

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

【技术实现步骤摘要】
前端页面调试方法、装置、计算机设备和存储介质
本公开涉及计算机
，尤其涉及一种前端页面调试方法、装置、计算机设备和计算机可读存储介质。
技术介绍
在开发前端页面的过程中，开发人员需要对前端页面进行调试以检测该前端页面是否满足目标开发需求。目前开发人员只能通过人为观看的方式检测该前端页面的更新变化是否满足目标开发需求，但是，开发人员并不知道是由于什么原因引起该前端页面的更新变化，使得开发人员无法得知导致前端页面更新的原因，无法方便地为前端页面的调试提供有效依据。
技术实现思路
本公开提供一种前端页面调试方法、装置、计算机设备和计算机可读存储介质，能够解决相关技术中开发人员无法得知导致前端页面更新的原因，从而无法方便地为前端页面的调试提供有效依据的技术问题。本公开第一方面实施例提出了一种前端页面调试方法，包括：在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。根据本公开实施例的前端页面调试方法，在监测到前端页面当前需要进行渲染时，监控引起前端页面进行更新渲染的变量，并根据引起前端页面进行更新渲染的变量，分析前端页面中变量的依赖关系，并将前端页面中变量的依赖关系提供给开发人员，以使开发人员根据该变量的依赖关系对该前端页面进行调试，即通过监控前端页面更新或变量改变的依赖关系，并将该变量的依赖关系提供给开发人员，使得开发人员通过该依赖关系即可了解到究竟是由于什么原因引起的页面更新或变量的改变，使得监控数据可视化展示，为前端页面的调试提供了有效依据，从而方便了开发人员的调试。根据本公开的一个实施例，所述监控引起所述前端页面进行更新渲染的变量，包括：获取用于渲染所述前端页面的渲染代码；获取预设的监控代码，并将所述监控代码插入至所述渲染代码中；在执行所述渲染代码以渲染所述前端页面时，通过所述监控代码监控引起所述前端页面进行更新渲染的变量。根据本公开的一个实施例，所述获取用于渲染所述前端页面的渲染代码，包括：从渐进式框架Vue.js库中获取所述用于渲染前端页面的渲染代码。根据本公开的一个实施例，所述根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系，包括：通过所述监控代码根据所述引起前端页面进行更新渲染的变量，确定所述变量改变时引起的其他发生改变的变量；确定所述变量和所述其他发生改变的变量之间的依赖关系。根据本公开的一个实施例，所述将所述前端页面中变量的依赖关系提供给开发人员，包括：输出所述前端页面中变量的依赖关系；将所述输出的前端页面中变量的依赖关系呈现在指定的显示区域内以供开发人员查看。本公开第二方面实施例提出了一种前端页面调试装置，包括：监控模块，用于在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；分析模块，用于根据所述引起所述前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；提供模块，用于将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。根据本公开实施例的前端页面调试装置，可通过监控模块在监测到前端页面当前需要进行渲染时，监控引起前端页面进行更新渲染的变量，分析模块根据引起前端页面进行更新渲染的变量，分析前端页面中变量的依赖关系，提供模块将前端页面中变量的依赖关系提供给开发人员，以使开发人员根据该变量的依赖关系对该前端页面进行调试，即通过监控前端页面更新或变量改变的依赖关系，并将该变量的依赖关系提供给开发人员，使得开发人员通过该依赖关系即可了解到究竟是由于什么原因引起的页面更新或变量的改变，使得监控数据可视化展示，为前端页面的调试提供了有效依据，从而方便了开发人员的调试。根据本公开的一个实施例，所述监控模块具体用于：获取用于渲染所述前端页面的渲染代码；获取预设的监控代码，并将所述监控代码插入至所述渲染代码中；在执行所述渲染代码以渲染所述前端页面时，通过所述监控代码监控引起所述前端页面进行更新渲染的变量。根据本公开的一个实施例，所述监控模块具体用于：从渐进式框架Vue.js库中获取所述用于渲染前端页面的渲染代码。根据本公开的一个实施例，所述分析模块具体用于：通过所述监控代码根据所述引起前端页面进行更新渲染的变量，确定所述变量改变时引起的其他发生改变的变量；确定所述变量和所述其他发生改变的变量之间的依赖关系。根据本公开的一个实施例，所述提供模块具体用于：输出所述前端页面中变量的依赖关系；将所述输出的前端页面中变量的依赖关系呈现在指定的显示区域内以供开发人员查看。本公开第三方面实施例提出了一种计算机设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现本公开第一方面实施例所述的前端页面调试方法。本公开第四方面实施例提出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本公开第一方面实施例所述的前端页面调试方法。本公开附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。附图说明本公开上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：图1是根据本公开一个实施例的前端页面调试方法的流程图；图2是根据本公开一个实施例的前端页面调试装置的结构示意图；图3是根据本公开一个实施例的计算机设备的结构示意图。具体实施方式下面详细描述本公开的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本公开，而不能理解为对本公开的限制。下面参考附图描述本公开实施例的前端页面调试方法、装置、计算机设备和计算机可读存储介质。图1是根据本公开一个实施例的前端页面调试方法的流程图。需要说明的是，本公开实施例的前端页面调试方法可应用于本公开实施例的前端页面调试装置，该前端页面调试装置可以被配置于计算机设备上。作为一种示例，该前端页面调试装置可以浏览器的插件的形式或者独立的应用的形式呈现。如图1所示，该前端页面调试方法可以包括：步骤101，在监测到前端页面当前需要进行渲染时，监控引起前端页面进行更新渲染的变量。举例而言，以本公开实施例的前端页面调试方法应用于前端页面调试装置，该前端页面调试装置以浏览器的插件的形式呈现为例，在用户打开浏览器时，本公开实施例的浏览器的插件可监测所述前端页面是否被打开，若是，则进一步监测该前端页面当前是否需要进行渲染，若是，则可监控引起该前端页面进行更新渲染的变量。在本公开的实施例中，可预先定义一个监控代本文档来自技高网...

【技术保护点】
1.一种前端页面调试方法，其特征在于，包括以下步骤：/n在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；/n根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；/n将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。/n

【技术特征摘要】
1.一种前端页面调试方法，其特征在于，包括以下步骤：
在监测到前端页面当前需要进行渲染时，监控引起所述前端页面进行更新渲染的变量；
根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系；
将所述前端页面中变量的依赖关系提供给开发人员，其中，所述变量的依赖关系用于所述开发人员对所述前端页面进行调试。


2.根据权利要求1所述的前端页面调试方法，其特征在于，所述监控引起所述前端页面进行更新渲染的变量，包括：
获取用于渲染所述前端页面的渲染代码；
获取预设的监控代码，并将所述监控代码插入至所述渲染代码中；
在执行所述渲染代码以渲染所述前端页面时，通过所述监控代码监控引起所述前端页面进行更新渲染的变量。


3.根据权利要求2所述的前端页面调试方法，其特征在于，所述获取用于渲染所述前端页面的渲染代码，包括：
从渐进式框架Vue.js库中获取所述用于渲染前端页面的渲染代码。


4.根据权利要求2或3所述的前端页面调试方法，其特征在于，所述根据所述引起前端页面进行更新渲染的变量，分析所述前端页面中变量的依赖关系，包括：
通过所述监控代码根据所述引起前端页面进行更新渲染的变量，确定所述变量改变时引起的其他发生改变的变量；
确定所述变量和所述其他发生改变的变量之间的依赖关系。


5.根据权利要求1所述的前端页面调试方法，其特征在于，所述将所述前端页面中变量的依赖关系提供给开发人员，包括：
输出所述前端页面中变量的依赖关系；
将所述输出的前端页面中变量...

【专利技术属性】
技术研发人员：徐星宇，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：北京;11