CN116302040A - 页面问题排查方法、系统、设备及存储介质 - Google Patents

Abstract

本发明提供了一种页面问题排查方法、系统、设备及存储介质，所述方法包括步骤：获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据；对所述功能埋点数据进行排序；依据排序后的所述功能埋点数据和预设画布，生成动画；以及在预设设备上展示所述动画，以供开发人员进行问题排查；本发明利于问题排查人员对用户页面问题的快速定位，从而利于提高问题排查效率，降低问题排查人员即开发人员的时间成本。

Description

页面问题排查方法、系统、设备及存储介质

技术领域

本发明涉及计算机技术领域，具体地说，涉及一种页面问题排查方法、系统、设备及存储介质。

背景技术

在日常开发活动中，对于用户在使用软件中所遇到的问题，开发人员需要快速地定位并解决问题。而目前针对用户所遇到问题的定位方式，大多依赖查看用户的访问记录和用户访问相应页面时产生的业务埋点数据。但是页面中的业务埋点一般仅记录用户是否点击了某个按钮，并不能获取到用户在该页面的其他行为情景。

对于开发人员定位问题来说，业务埋点并不能完全满足对页面问题排查的需求。而且仅通过一个个业务埋点并不能完全在问题排查中，详细的复现用户所浏览页面时所产生的用户行为情景，导致开发人员由于不能复现用户页面行为而无法快速定位用户页面异常出处，问题排查效率低下，时间消耗成本较大。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本发明的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

针对现有技术中的问题，本发明的目的在于提供一种页面问题排查方法、系统、设备及存储介质，克服了现有技术的困难，利于提高页面问题的排查效率。

为实现上述目的，本发明提供了一种页面问题排查方法，所述方法包括以下步骤：

S110，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据；

S120，对所述功能埋点数据进行排序；

S130，依据排序后的所述功能埋点数据和预设画布，生成动画；以及S140，在预设设备上展示所述动画，以供开发人员进行问题排查。

可选地，每一所述功能埋点数据中包含有对应的埋点时间信息；步骤S120包括：

依据所述埋点时间信息，对所述功能埋点数据进行排序。

可选地，在所述步骤S120和步骤S130之间，所述方法还包括步骤：

获取预设绘制关系映射表；所述预设绘制关系映射表中存储有所述功能埋点数据的埋点类型和绘制图案之间的映射关系；不同的埋点类型对应的绘制图案的形状和绘制颜色均不相同；

根据所述预设绘制关系映射表，构建预设画布。

可选地，步骤S130包括：

根据各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间；

依据所述埋点时间区间，对所述功能埋点数据进行分组；

依据所述预设画布，将位于同一埋点时间区间内的所述功能埋点数据制作于同一帧显示画面中；以及

基于所有帧显示画面，制作形成动画。

可选地，所述根据各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间，包括：

获取处理所述待排查问题的开发人员对应的排查任务数量和第一时限信息；

根据所述排查任务数量和所述第一时限信息，确定所述待排查问题对应的排查时限信息；

根据所述待排查问题对应的排查时限信息，确定待绘制动画对应的播放时长；以及

根据所述播放时长和各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间。

可选地，所述依据所述埋点时间区间，对所述功能埋点数据进行分组，包括：

获取各所述待排查问题对应的业务主题；

根据各所述待排查问题和对应的所述业务主题，对各所述功能埋点数据进行第一次分组，得到业务分组信息；

依据所述埋点时间区间和所述业务分组信息，对所述功能埋点数据进行第二次分组。

可选地，所述动画的展示界面包括视图展示区域和功能控制区域；所述视图展示区域用于展示根据所述功能埋点数据生成的显示画面；所述功能控制区域用于提供预设触控按钮，并获取开发人员选择所述预设触控按钮后生成的操作指令。

可选地，所述预设触控按钮包括第一触控按钮、第二触控按钮以及第三触控按钮；所述第一触控按钮用于将所述动画的显示画面由当前显示画面切换至上一显示画面；所述第二触控按钮用于控制所述动画在播放状态和暂停状态之间进行切换；所述第三触控按钮用于将所述动画的显示画面由当前显示画面切换至下一显示画面；所述方法还包括步骤：

当所述动画处于暂停状态，且接收到关于所述第一触控按钮的操作指令，则绘制上一显示画面并展示；

当所述动画处于暂停状态，且接收到关于所述第三触控按钮的操作指令，则绘制下一显示画面并展示。

可选地，步骤S130包括：

获取所述待排查问题对应的报错信息；

获取所述报错信息对应的主因分类；

当所述主因分类匹配预设关键字时，获取所述功能埋点数据中与所述主因分类对应的属性值提示信息；

依据排序后的所述功能埋点数据和预设画布，生成动画，并将所述属性值提示信息展示于所述动画的视图展示区域。

可选地，步骤S130包括：

获取所述客户端设备对应的设备类型，以及所述前端页面对应的展示尺寸比例；

依据排序后的所述功能埋点数据、预设画布以及所述展示尺寸比例，生成动画；

步骤S140包括：

依据所述客户端设备对应的设备类型，确定预设设备；其中，所述预设设备的设备类型与所述客户端设备的设备类型相同。

可选地，所述功能埋点数据的埋点类型为曝光埋点、点击埋点、滚动埋点或输入埋点。

本发明还提供了一种页面问题排查系统，用于实现上述页面问题排查方法，所述系统包括：

埋点数据获取模块，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据；

埋点数据处理模块，对所述功能埋点数据进行排序；

动画生成模块，依据排序后的所述功能埋点数据和预设画布，生成动画；以及

动画展示模块，在预设设备上展示所述动画，以供开发人员进行问题排查。

本发明还提供了一种页面问题排查设备，包括：

处理器；

存储器，其中存储有所述处理器的可执行程序；

其中，所述处理器配置为经由执行所述可执行程序来执行上述任意一项页面问题排查方法的步骤。

本发明还提供了一种计算机可读存储介质，用于存储程序，所述程序被处理器执行时实现上述任意一项页面问题排查方法的步骤。

本发明与现有技术相比，具有以下优点及突出性效果：

本发明提供的页面问题排查方法、系统、设备及存储介质利用自动化埋点的方式在页面注入功能埋点，比如不仅可以记录用户是否点击了某个对象，还可以进一步记录用户操作该对象的行为情景，这样能够提供给开发人员更多的参考信息，以便于其快速排查问题；

另一方面，本发明利用功能埋点数据生成动画展示给开发人员，实现数据可视化的效果对用户行为进行复现，利于提高开发人员排查页面问题的效率，节省时间成本。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。

图1为本发明一实施例公开的一种页面问题排查方法的示意图；

图2为本发明另一实施例公开的一种页面问题排查方法的示意图；

图3为本发明另一实施例公开的一种页面问题排查方法的示意图；

图4为本发明一实施例公开的生成的动画的展示界面示意图；

图5为本发明另一实施例公开的一种页面问题排查方法的示意图；

图6为本发明另一实施例公开的一种页面问题排查方法中步骤S133的示意图；

图7为本发明另一实施例公开的一种页面问题排查方法的示意图；

图8为本发明另一实施例公开的一种页面问题排查方法的示意图；

图9为本发明一实施例公开的一种页面问题排查系统的结构示意图；

图10为本发明一实施例公开的一种页面问题排查设备的结构示意图；

图11为本发明一实施例公开的一种计算机可读存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的实施方式。相反，提供这些实施方式使得本发明将全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的结构，因而将省略对它们的重复描述。

目前相关技术对于常规的排查用户页面问题，问题排查人员遇到埋点不足场景时通常会采取猜测联想并结合代码分析，做大量尝试的方式去复现用户的操作行为。由于埋点的缺失，将会导致问题排查人员不能准确的定位问题，从而造成大量的时间成本浪费。

为解决上述问题，本发明以下实施例提供了页面问题排查方法。

如图1所示，本发明一实施例公开了一种页面问题排查方法，该方法包括以下步骤：

S110，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据。具体而言，本实施例中，上述功能埋点数据包括但不限于曝光埋点、点击埋点、滚动埋点以及输入埋点。曝光埋点可以记录模块是否正常加载，展示在用户视野里；以及模块在用户视野里出现的次数。

点击埋点可以记录用户在该页面的点击行为，并且记录用户点击的顺序。滚动埋点可以记录用户在点击这个按钮前滑动了页面多少，是点了其他按钮之后又干了什么事，页面有什么变化，点完该按钮后有没有退出页面又重新进入整个流程的记录。输入埋点可以记录用户在页面中输入的文字以及输入文字的过程。

目前相关技术通常仅仅基于业务埋点排查相关问题，而通过业务埋点仅能获知记录用户是否点击了某个按钮。埋点数据不足将会导致页面问题排查效率较低以及可能定位不准确的问题。本发明实施例能够基于众多埋点数据复现用户行为，利于快速定位页面问题。

S120，对上述功能埋点数据进行排序。具体而言，本实施例中，每一上述功能埋点数据中包含有对应的埋点时间信息。该步骤可以依据上述埋点时间信息，对上述功能埋点数据进行排序。

可选地，在一些实施例中，步骤S120在对功能埋点数据排序之前，还可以包括步骤：对各类埋点数据进行格式化处理，比如进行数据信息转换。具体来说，比如记录滑动的埋点记录的信息是时间戳格式，那我还原的时候需要将这个时间戳转换为2023-3-16的格式；就是根据特殊规则转换为平台需要的数据格式。这样也利于开发人员对问题的快速定位，提高页面问题排查效率。

S130，依据排序后的上述功能埋点数据和预设画布，生成动画。具体而言，上述预设画布可以为canvas画布。依据排序后的功能埋点数据确定画布中的各显示画面，从而生成动画，以实现对用户行为流的复现，便于开发人员在排查问题时查看用户行为。

以及S140，在预设设备上展示上述动画，以供开发人员进行问题排查。具体而言，上述预设设备是供开发人员查看的，该动画在播放过程中，开发人员可以对动画进行控制，比如暂停播放、拖动播放进度等等。并且开发人员端播放动画的预设设备可以和用户端使用的设备是同一型号设备，这也便于开发人员对问题的快速定位，提高页面问题排查效率。

可选地，如图2所示，在一些实施例中，在上述图1对应实施例的基础上，步骤S130包括：

S131，获取上述客户端设备对应的设备类型，以及上述前端页面对应的展示尺寸比例。上述预设设备的设备类型与上述客户端设备的设备类型相同。

S132，依据排序后的上述功能埋点数据、预设画布以及上述展示尺寸比例，生成动画。也即，生成的动画的展示尺寸比例和前端页面对应的展示尺寸比例相同。

步骤S140替换为步骤S141：依据上述客户端设备对应的设备类型，确定预设设备，在预设设备上展示上述动画，以供开发人员进行问题排查。

其中，上述预设设备的设备类型与上述客户端设备的设备类型相同。也即，用于开发人员查看动画的预设设备的设备类型与发生报错时用户使用的客户端设备的设备类型相同，比如都是同一屏幕尺寸的安卓手机。或者，两者的设备型号是相同的。

该实施例进一步利于开发人员对问题的快速定位，提高了开发人员的页面问题排查效率。

在本申请的另一实施例中，公开了另一种页面问题排查方法。如图3所示，该方法在上述图1对应实施例的基础上，步骤S120和步骤S130之间，还包括：

S121，获取预设绘制关系映射表。上述预设绘制关系映射表中存储有上述功能埋点数据的埋点类型和绘制图案之间的映射关系。不同的埋点类型对应的绘制图案的形状和绘制颜色均不相同。

以及S122，根据上述预设绘制关系映射表，构建预设画布。

示例性地，在预设绘制关系映射表中，可以将功能埋点数据中的曝光埋点数据采用黄色矩形展示，将功能埋点数据中的点击埋点采用白色圆角矩形展示，将功能埋点数据中的输入埋点采用蓝色椭圆形展示。具体展示方式不以此为限。

该实施例可以便于开发人员排查问题过程中，针对不同类型的埋点快速区分，对复现的用户行为进行快速掌握，从而利于开发人员对问题的快速定位，利于提高页面问题排查效率。

可选地，如图4所示，在一些实施例中，在上述图1对应实施例的基础上，上述动画的展示界面41包括视图展示区域42和功能控制区域43。上述视图展示区域42用于展示根据上述功能埋点数据生成的显示画面。上述功能控制区域43用于提供预设触控按钮，并获取开发人员选择上述预设触控按钮后生成的操作指令。

上述预设触控按钮包括第一触控按钮44、第二触控按钮45以及第三触控按钮46。上述第一触控按钮44用于将上述动画的显示画面由当前显示画面切换至上一显示画面。上述第二触控按钮45用于控制上述动画在播放状态和暂停状态之间进行切换。上述第三触控按钮46用于将上述动画的显示画面由当前显示画面切换至下一显示画面。

示例性地，图4示出了动画的一展示界面41。在图4示出的视图展示区域42中，曝光埋点数据采用矩形框展示，点击埋点数据采用圆角矩形展示，并且在其矩形框内用黑色圆点突出标记，起到突出显示的效果，告知使用者此为点击埋点，便于提高问题定位效率和排查效率。滚动埋点数据采用圆角矩形展示。输入埋点数据采用椭圆状图形展示。

在其他实施例中，在生成的动画中，本领域技术人员还可以对不同的埋点类型数据根据需要分别填充不同的颜色，本发明对此不作限制。

该实施例提供的页面问题排查方法在上述图1对应实施例的基础上，还包括步骤：

S150，当上述动画处于暂停状态，且接收到关于上述第一触控按钮的操作指令，则绘制上一显示画面并展示。当上述动画处于暂停状态，且接收到关于上述第三触控按钮的操作指令，则绘制下一显示画面并展示。这样有利于避免将全部动画存储于开发人员用于排查问题时使用的预设设备中，导致对预设设备的页面性能产生不利影响，进而导致排查问题的效率被影响，利于保证页面问题的排查效率。

具体来说，功能控制区域43中设置的三个预设触控按钮比如分别为上一步(即对应第一触控按钮44)、播放/暂停(即对应第二触控按钮45)、下一步(即对应第三触控按钮46)。页面复现功能提供两种页面复现的情形，第一种通过自动播放的形式绘制页面行为，第二种则通过步进的方式调整绘制页面行为。

开发人员在排查页面问题时，第一次对功能控制区域43的操作只能是点击自动播放或选择步进的下一步，其后每一次的页面行为复现绘制都需要去判断当前状态，只有是暂停状态时才可以点击上一步或下一步。当使用者排查到问题或了解完用户行为后选择结束绘制即可。

本实施例中，上一步对应的按钮和下一步对应的按钮的操作被限制。上一步按钮的操作条件为下一个绘制埋点不是第一个埋点且该页面场景没有正在自动绘制即处于暂停状态。下一步按钮的操作条件为当前已绘制的埋点不是最后一个埋点且该页面场景没有正在自动绘制即处于暂停状态。排查人员可根据自己的需要选择适合自己的用户行为绘制方式。

在本申请的另一实施例中，公开了另一种页面问题排查方法。如图5所示，该方法在上述图3对应实施例的基础上，步骤S130包括：

S133，根据各上述功能埋点数据对应的埋点时间信息，确定用于对各上述功能埋点数据进行时间分组的埋点时间区间。

S134，依据上述埋点时间区间，对上述功能埋点数据进行分组。

S135，依据上述预设画布，将位于同一埋点时间区间内的功能埋点数据制作于同一帧显示画面中。

以及S136，基于所有帧显示画面，制作形成动画。

具体而言，比如将用户操作行为流以5秒为分组间隔，也即将行为流中的第0-5秒操作制作于一帧显示画面中，将行为流中的第6-10秒操作制作于一帧显示画面中，以此类推。这样可以使得开发人员端展示的每一帧显示画面包含有丰富的信息，供开发人员参考，从而便于快速排查问题，提高问题排查效率。

在本申请的另一实施例中，公开了另一种页面问题排查方法。如图6所示，该方法在上述图5对应实施例的基础上，步骤S133包括：

S1331，获取处理上述待排查问题的开发人员对应的排查任务数量和第一时限信息。

S1332，根据上述排查任务数量和上述第一时限信息，确定上述待排查问题对应的排查时限信息。

S1333，根据上述待排查问题对应的排查时限信息，确定待绘制动画对应的播放时长。以及

S1334，根据上述播放时长和各上述功能埋点数据对应的埋点时间信息，确定用于对各上述功能埋点数据进行时间分组的埋点时间区间。其中，埋点时间区间的下限即为所有埋点时间信息的最小值，埋点时间区间的上限即为所有埋点时间信息的最大值，每一埋点时间区间内功能埋点数据的数量相等。

具体而言，上述排查时限信息可以为第一时限信息除以上述排查任务数量得到的商。比如当开发人员待完成的有3个排查任务数量，而第一时限信息为15分钟，那么每一待排查问题对应的排查时限信息即为5分钟。

比如对于一待排查问题，开发人员需要在5分钟内排查问题，那么动画展示时长就不能超过5分钟。此种情况下上述排查时限信息即为5分钟。这样有利于保证开发人员对于每个排查任务数量的时间的合理分配，便于快速排查所有问题，提高问题排查效率。

在本申请的另一实施例中，公开了另一种页面问题排查方法。如图7所示，该方法在上述图5对应实施例的基础上，步骤S134包括：

S1341，获取各上述待排查问题对应的业务主题。

S1342，根据各上述待排查问题和对应的上述业务主题，对各上述功能埋点数据进行第一次分组，得到业务分组信息。

S1343，依据上述埋点时间区间和上述业务分组信息，对上述功能埋点数据进行二次分组。

比如业务主题可以包括酒店预订业务和火车票预订业务等。如果上述得到的某一个埋点时间区间内的功能埋点数据同时包含了酒店预订业务和火车票预订业务对应的埋点，那么就将该埋点时间区间内的埋点数据进行拆分，将不同业务的埋点数据拆分至不同的埋点时间区间内；这样也便于针对每一个业务主题，能够单独完整地展示其动画，使得开发人员专注于解决该一个问题，利于开发人员对问题的快速定位，利于提高页面问题排查效率。

在本申请的另一实施例中，公开了另一种页面问题排查方法。如图8所示，该方法在上述图4对应实施例的基础上，步骤S130包括：

S137，获取上述待排查问题对应的报错信息。

S138，获取上述报错信息对应的主因分类。

S1391，当上述主因分类匹配预设关键字时，获取上述功能埋点数据中与上述主因分类对应的属性值提示信息。

S1392，依据排序后的上述功能埋点数据和预设画布，生成动画，并将上述属性值提示信息展示于动画的视图展示区域。以遍在后续播放动画时供开发人员查看，提高问题排查效率。

具体而言，当待排查问题的报错信息提示问题是由于某一个图片内存过大，造成的内存溢出。那么就说明该问题很大可能是由于该图片的内存引起的，上述主因分类即为内存，当上述主因分类匹配预设关键字时，就说明该问题需要将相关信息显示出来，供开发人员参考。

上述属性值提示信息即为图片的大小，将图片大小展示于上述视图展示区域后，不需要开发人员再次动手去查找相关信息，从而便于开发人员快速排查问题，提高问题排查效率。

本发明提供的上述实施例通过对页面加入自动化埋点，利用自动化埋点的方式为开发页面注入一些记录用户访问页面的行为流埋点，并且将自动化的用户行为埋点转化为一段可视化的用户页面行为动画，利于问题排查人员对用户页面问题的快速定位，从而利于提高问题排查效率，降低问题排查人员即开发人员的时间成本。

需要说明的是，本申请中公开的上述所有实施例可以进行自由组合，组合后得到的技术方案也在本申请的保护范围之内。

如图9所示，本发明一实施例还公开了一种页面问题排查系统9，该系统包括：

埋点数据获取模块91，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据。

埋点数据处理模块92，对上述功能埋点数据进行排序。

动画生成模块93，依据排序后的上述功能埋点数据和预设画布，生成动画。以及

动画展示模块94，在预设设备上展示上述动画，以供开发人员进行问题排查。

可以理解的是，本发明的页面问题排查系统还包括其他支持页面问题排查系统运行的现有功能模块。图9显示的页面问题排查系统仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

本实施例中的页面问题排查系统用于实现上述的页面问题排查的方法，因此对于页面问题排查系统的具体实施步骤可以参照上述对页面问题排查的方法的描述，此处不再赘述。

本发明一实施例还公开了一种页面问题排查设备，包括处理器和存储器，其中存储器存储有所述处理器的可执行程序；处理器配置为经由执行可执行程序来执行上述页面问题排查方法中的步骤。图10是本发明公开的页面问题排查设备的结构示意图。下面参照图10来描述根据本发明的这种实施方式的电子设备600。图10显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图10所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同平台组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，存储单元存储有程序代码，程序代码可以被处理单元610执行，使得处理单元610执行本说明书上述页面问题排查方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，处理单元610可以执行如图1中所示的步骤。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。

本发明还公开了一种计算机可读存储介质，用于存储程序，所述程序被执行时实现上述页面问题排查方法中的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行本说明书上述页面问题排查方法中描述的根据本发明各种示例性实施方式的步骤。

如上所示，该实施例的计算机可读存储介质的程序在执行时，利用自动化埋点的方式在页面注入功能埋点，比如不仅可以记录用户是否点击了某个对象，还可以进一步记录用户操作该对象的行为情景，这样能够提供给开发人员更多的参考信息，以便于其快速排查问题；

另一方面，本发明利用功能埋点数据生成动画展示给开发人员，实现数据可视化的效果对用户行为进行复现，利于提高开发人员排查页面问题的效率，节省时间成本。

图11是本发明的计算机可读存储介质的结构示意图。参考图11所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

本发明实施例提供的页面问题排查方法、系统、设备及存储介质利用自动化埋点的方式在页面注入功能埋点，比如不仅可以记录用户是否点击了某个对象，还可以进一步记录用户操作该对象的行为情景，这样能够提供给开发人员更多的参考信息，以便于其快速排查问题；

另一方面，本发明利用功能埋点数据生成动画展示给开发人员，实现数据可视化的效果对用户行为进行复现，利于提高开发人员排查页面问题的效率，节省时间成本。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (14)

1.一种页面问题排查方法，其特征在于，包括以下步骤：

S110，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据；

S120，对所述功能埋点数据进行排序；

S130，依据排序后的所述功能埋点数据和预设画布，生成动画；以及

S140，在预设设备上展示所述动画，以供开发人员进行问题排查。

2.如权利要求1所述的页面问题排查方法，其特征在于，每一所述功能埋点数据中包含有对应的埋点时间信息；步骤S120包括：

依据所述埋点时间信息，对所述功能埋点数据进行排序。

3.如权利要求2所述的页面问题排查方法，其特征在于，在所述步骤S120和步骤S130之间，所述方法还包括步骤：

获取预设绘制关系映射表；所述预设绘制关系映射表中存储有所述功能埋点数据的埋点类型和绘制图案之间的映射关系；不同的埋点类型对应的绘制图案的形状和绘制颜色均不相同；

根据所述预设绘制关系映射表，构建预设画布。

4.如权利要求3所述的页面问题排查方法，其特征在于，步骤S130包括：

根据各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间；

依据所述埋点时间区间，对所述功能埋点数据进行分组；

依据所述预设画布，将位于同一埋点时间区间内的所述功能埋点数据制作于同一帧显示画面中；以及

基于所有帧显示画面，制作形成动画。

5.如权利要求4所述的页面问题排查方法，其特征在于，所述根据各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间，包括：

获取处理所述待排查问题的开发人员对应的排查任务数量和第一时限信息；

根据所述排查任务数量和所述第一时限信息，确定所述待排查问题对应的排查时限信息；

根据所述待排查问题对应的排查时限信息，确定待绘制动画对应的播放时长；以及

根据所述播放时长和各所述功能埋点数据对应的埋点时间信息，确定用于对各所述功能埋点数据进行时间分组的埋点时间区间。

6.如权利要求4所述的页面问题排查方法，其特征在于，所述依据所述埋点时间区间，对所述功能埋点数据进行分组，包括：

获取各所述待排查问题对应的业务主题；

根据各所述待排查问题和对应的所述业务主题，对各所述功能埋点数据进行第一次分组，得到业务分组信息；

依据所述埋点时间区间和所述业务分组信息，对所述功能埋点数据进行第二次分组。

7.如权利要求1所述的页面问题排查方法，其特征在于，所述动画的展示界面包括视图展示区域和功能控制区域；所述视图展示区域用于展示根据所述功能埋点数据生成的显示画面；所述功能控制区域用于提供预设触控按钮，并获取开发人员选择所述预设触控按钮后生成的操作指令。

8.如权利要求7所述的页面问题排查方法，其特征在于，所述预设触控按钮包括第一触控按钮、第二触控按钮以及第三触控按钮；所述第一触控按钮用于将所述动画的显示画面由当前显示画面切换至上一显示画面；所述第二触控按钮用于控制所述动画在播放状态和暂停状态之间进行切换；所述第三触控按钮用于将所述动画的显示画面由当前显示画面切换至下一显示画面；所述方法还包括步骤：

当所述动画处于暂停状态，且接收到关于所述第一触控按钮的操作指令，则绘制上一显示画面并展示；

当所述动画处于暂停状态，且接收到关于所述第三触控按钮的操作指令，则绘制下一显示画面并展示。

9.如权利要求7所述的页面问题排查方法，其特征在于，步骤S130包括：

获取所述待排查问题对应的报错信息；

获取所述报错信息对应的主因分类；

当所述主因分类匹配预设关键字时，获取所述功能埋点数据中与所述主因分类对应的属性值提示信息；

依据排序后的所述功能埋点数据和预设画布，生成动画，并将所述属性值提示信息展示于所述动画的视图展示区域。

10.如权利要求1所述的页面问题排查方法，其特征在于，步骤S130包括：

获取所述客户端设备对应的设备类型，以及所述前端页面对应的展示尺寸比例；

依据排序后的所述功能埋点数据、预设画布以及所述展示尺寸比例，生成动画；

步骤S140包括：

依据所述客户端设备对应的设备类型，确定预设设备；其中，所述预设设备的设备类型与所述客户端设备的设备类型相同。

11.如权利要求1所述的页面问题排查方法，其特征在于，所述功能埋点数据的埋点类型为曝光埋点、点击埋点、滚动埋点或输入埋点。

12.一种页面问题排查系统，用于实现如权利要求1所述的页面问题排查方法，其特征在于，所述系统包括：

埋点数据获取模块，获取客户端设备上传的前端页面中与待排查问题关联的功能埋点数据；

埋点数据处理模块，对所述功能埋点数据进行排序；

动画生成模块，依据排序后的所述功能埋点数据和预设画布，生成动画；以及

动画展示模块，在预设设备上展示所述动画，以供开发人员进行问题排查。

13.一种页面问题排查设备，其特征在于，包括：

处理器；

存储器，其中存储有所述处理器的可执行程序；

其中，所述处理器配置为经由执行所述可执行程序来执行权利要求1至11中任意一项所述页面问题排查方法的步骤。

14.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被处理器执行时实现权利要求1至11中任意一项所述页面问题排查方法的步骤。

Images