CN111124721A - 网页处理方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供了一种网页处理方法、装置及电子设备，其中方法包括：响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段：将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。本发明实施例通过对网页错误区域的标记操作，获取对应的网页界面坐标范围，进而确定代码片段，从而实现了在上报网页错误的同时，提供了对应的网页代码片段，省去了人工分析和查找网页代码片段的环节，提高了网页错误处理效率。

Description

网页处理方法、装置及电子设备

技术领域

本申请涉及一种网页处理方法、装置及电子设备，属于计算机技术领域。

背景技术

网页平台在提供网页服务的过程中，会出现一些网页运行错误。在现有技术中，提供了用户反馈渠道。常见的反馈方式为：用户对出现问题的网页进行截图，也可以进一步对截图进行编辑，标记出现错误的具体位置，并将截图的图片发送至网页平台。网页平台的工作人员再对截图的图片进行人工查看和分析，找出网页对应的代码，去分析代码错误，并进行修复。

在上述的处理过程中，人工查找网页代码的过程比较慢，效率非常低，不利于快速发现和解决网页代码中存在的问题。

发明内容

本发明实施例提供一种网页处理方法、装置及电子设备，以提高网页错误处理效率。

为了实现上述目的，本发明实施例提供了一种网页处理方法，包括：

响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

本发明实施例还提供了一种网页处理装置，包括：

网页界面坐标范围获取模块，用于响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

网页代码片段获取模块，用于根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

错误上报处理模块，用于将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

本发明实施例还提供了网页处理方法，包括：

接收来自多个客户端的针对同一网页的网页错误上报消息；

根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因；

如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警。

本发明实施例还提供了一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

本发明实施例还提供了一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

接收来自多个客户端的针对同一网页的网页错误上报消息；

根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因；

如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警。

本发明实施例的网页处理方法、装置及电子设备，通过对网页错误区域的标记操作，获取对应的网页界面坐标范围，进而确定代码片段，从而实现了在上报网页错误的同时，提供了对应的网页代码片段，省去了人工分析和查找网页代码片段的环节，提高了网页错误处理效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

图1为本发明实施例的网页处理方法的流程示意图；

图2为本发明实施例的网页处理方法的应用场景示意图之一；

图3为本发明实施例的网页处理方法的应用场景示意图之二；

图4为本发明实施例的网页处理方法的应用场景示意图之三；

图5为本发明实施例的网页处理方法的应用场景示意图之四；

图6为本发明实施例的网页处理方法的应用场景示意图之五；

图7为本发明实施例的网页处理装置的结构示意图；

图8为本发明实施例的电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员

本发明实施例利用了网页页面中的网页元素与网页代码片段之间的对应关系，在进行网页错误上报处理的过程中，通过识别用户标记的网页错误区域对应的坐标范围，来确定出对应的网页代码片段，从而可以实现将网页错误的截图与对应错误区域的代码一同进行上报。

下面通过一些具体实施例来进一步说明本发明的技术方案。

实施例一

如图1所示，其为本发明实施例的网页处理方法的流程示意图，该方法包括如下步骤：

S101：响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围。

具体地，可以响应于点击网页页面上设置的错误上报按键的操作，生成对网页页面整体的第二网页截图，响应于对第二网页截图中网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域在第二网页截图中的相对坐标范围作为网页界面坐标范围。

对于任何一个网页来说，其各个网页元素(例如文字、图片、动画、控件等)都有自身对应的网页界面坐标或者网页界面坐标范围，这些网页元素的坐标是相对于整个网页而言的相对坐标，无论网页铺满整个屏幕还是缩小为局部窗口，各个网页元素相对于整个网页的相对坐标位置是不变的，因此，只要能够确定这个相对坐标或者相对坐标范围，就能确定具体的网页元素，进而找到网页元素对应的网页代码片段。因此，在本发明实施例中，网页界面坐标或者网页界面坐标范围是指相对于整个网页的相对坐标或者相对坐标范围。

如图2至图4所示，其为本发明实施例的网页处理方法的应用场景示意图之一至之三，图2至图4描述了用户在整个网页截屏上标记错误区域的处理过程。如图中上部红色按键所示，可以在网页界面上设置一个错误上报按键，通过点击该错误上报按键，会自动对当前整个网页进行截图，生成第二网页截图(如图3中的标记前的网页截屏)，然后，用户可以在该网页截图的基础上，对错误区域进行标记(如图5中的椭圆虚线部分)，如图中带有“X”标记的空白区域即为错误区域(该区域内的网页动画没有被加载)，标记后的截图作为第一网页截图(如图5中的标记后的网页截屏)。由于页面上的各个元素在网页界面上都有各自的坐标或者坐标范围，所以根据所生成的第一网页截图，可以获取用户标记的区域相对于整个网页截图的相对坐标，作为错误区域的网页界面坐标范围。

需要说明的是，网页界面上设置的错误上报按键可以采用多种形式，可以是图标按键的形式，也可以是用文字表示的超链接形式，同时也可以设置在网页的任何便于操作的位置，以便于用户操作进入网页错误区域的界面。

同理，也可以采取不同方式对错误区域进行标记。

以上介绍了对网页错误区域的标记操作的方式之一，除此之外，本发明实施例还可以采用另一种方式来标记网页错误区域，具体地，还可以响应于点击网页页面上设置的错误上报按键后的截图操作，获取截图操作所覆盖的网页界面坐标范围作为网页错误区域标记所覆盖的网页界面坐标范围，将截图操作覆盖的网页区域作为网页错误区域，生成带有网页错误区域标记的第一网页截图。

如图5所示，其为本发明实施例的网页处理方法的应用场景示意图之四，其描绘了用户利用直接对错误区域进行截屏的方式来标记网页错误区域。作为另一种方式，与上一种方式不同的是，可以在用户点击错误上报按键后，直接进入手动截图界面，用户可以对具体错误区域进行截图标记(如图5所示的用户截图操作对应的方形虚线区域)，形成错误标记区域，然后获取用户的截图操作所形成的坐标区域相对整个网页的坐标范围，也就是错误区域的网页界面坐标范围，之后再对整个网页进行截图(由计算机自动进行截屏)，并结合手动截图标记的区域，形成带有网页错误区域标记的第一网页截图。

以上介绍了对网页错误区域的标记操作，并获取网页错误区域标记所覆盖的网页界面坐标范围的方式，下面将详细说明如何通过网页界面坐标范围获取与之对应的网页代码片段。

S102：根据网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段。

具体地，在网页脚本文件中，可以确定与网页界面坐标范围对应的DOM节点，并获取与DOM节点对应的网页代码片段。

如图6所示，其为本发明实施例的网页处理方法的应用场景示意图之五，在网页界面中，界面上的每个元素都有对应的DOM节点，在网页脚本文件中，会以DOM树的形式来组织网页内容。每个DOM节点对应于一个网页界面坐标范围，并记录在DOM节点的属性中，如图中所示，根据用户标记的错误区域范围，可以确定对应的DOM节点，DOM节点确定后，可以获取与该DOM节点对应的网页代码片段。

由此，本发明实施例的网页错误区域对应的代码片段就被确定了，即可执行如下上报处理步骤。

S103：将带有网页错误区域标记的第一网页截图和网页代码片段进行组合后，执行错误上报处理。

具体地，在获取网页错误区域对应的网页代码片段后，可以将代码片段进行截图处理，并与第一网页截图进行组合后(例如，可以对代码片段的截图和第一网页截图进行打包处理等)，执行错误上报处理。此外，也可以将网页代码片段以文本形式与第一网页截图进行组合，然后进行错误上报处理。

本发明实施例通过对网页错误区域的标记操作，获取对应的网页界面坐标范围，进而确定网页代码片段，从而实现了在上报网页错误的同时，提供了对应的网页代码片段，省去了人工分析和查找网页代码片段的环节，提高了网页错误处理效率。

实施例二

如图7所示，其为本发明实施例的网页处理装置的结构示意图，该装置包括：网页界面坐标范围获取模块20，网页代码片段获取模块21，错误上报处理模块22。

网页界面坐标范围获取模块20，用于响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围。

具体地，可以响应于点击网页页面上设置的错误上报按键的操作，生成对网页页面整体的第二网页截图，响应于对第二网页截图中网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域在第二网页截图中的相对坐标范围作为网页界面坐标范围。

对于任何一个网页来说，其各个网页元素(例如文字、图片、动画、控件等)都有自身对应的网页界面坐标或者网页界面坐标范围，这些网页元素的坐标是相对于整个网页而言的相对坐标，无论网页铺满整个屏幕还是缩小为局部窗口，各个网页元素相对于整个网页的相对坐标位置是不变的，因此，只要能够确定这个相对坐标或者相对坐标范围，就能确定具体的网页元素，进而找到网页元素对应的网页代码片段。因此，在本发明实施例中，网页界面坐标或者网页界面坐标范围是指相对于整个网页的相对坐标或者相对坐标范围。

还可以响应于点击网页页面上设置的错误上报按键后的截图操作，获取截图操作所覆盖的网页界面坐标范围作为网页错误区域标记所覆盖的网页界面坐标范围，将截图操作覆盖的网页区域作为网页错误区域，生成带有网页错误区域标记的第一网页截图。

网页代码片段获取模块21，用于根据网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段。

具体地，在网页脚本文件中，可以确定与网页界面坐标范围对应的DOM节点，并获取与DOM节点对应的网页代码片段。

在网页界面中，界面上的每个元素都有对应的DOM节点，在网页脚本文件中，会以DOM树的形式来组织网页内容。每个DOM节点对应于一个网页界面坐标范围，并记录在DOM节点的属性中，如图中所示，根据用户标记的错误区域范围，可以确定对应的DOM节点，DOM节点确定后，可以获取与该DOM节点对应的网页代码片段。

错误上报处理模块22，用于将带有网页错误区域标记的第一网页截图和网页代码片段进行组合后，执行错误上报处理。

具体地，获取网页错误区域对应的代码后可以将代码片段进行截图处理，并与第一网页截图进行组合后，例如，可以对代码片段的截图和第一网页截图进行打包处理等，然后，对其执行错误上报处理。

上述对于上述处理过程具体说明、技术原理详细说明以及技术效果详细分析在前面实施例中进行了详细描述，在此不再赘述。

本发明实施例的网页处理装置通过对网页错误区域的标记操作，获取对应的网页界面坐标范围，进而确定代码片段，从而实现了在上报网页错误的同时，提供了对应的网页代码片段，省去了人工分析和查找网页代码片段的环节，提高了网页错误处理效率。

实施例三

本实施例涉及一种网页处理方法，该方法在网页服务器或者网站平台一侧执行，主要是针对客户端上报的网页错误进行后续处理，具体地，该方法包括：

S201：接收来自多个客户端的针对同一网页的网页错误上报消息。如前面实施例所介绍的，用户可能会在浏览网页的过程中，触发客户端执行错误上报处理，在错误上报处理中，客户端会向网页服务器或者网站平台发送包含错误网页截图(即前述实施例中的第一网页截图)和对应的网页代码片段的网页错误上报消息。

S202：根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因。具体的错误原因可以实现进行设定，例如：图片加载错误、对话框没有被激活、动画加载错误等。

S203：对网页错误原因进行综合判断，如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警，否则，可以忽略该网页错误上报消息。在实际的网页运行中，一些错误可能只是偶发现象，针对这种错误可以忽略即可，但是，多个客户端针对同一个网页上报了很多个网页错误原因相同的网页错误上报消息，则说明该网页确实存在严重问题，因此，需要向网站运维平台进行报警。

实施例四

前面实施例描述了本发明实施例的流程处理及装置结构，上述的方法和装置的功能可借助一种电子设备实现完成，如图6所示，其为本发明实施例的电子设备的结构示意图，具体包括：存储器110和处理器120。

存储器110，用于存储程序。

除上述程序之外，存储器110还可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。

存储器110可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

处理器120，耦合至存储器110，用于执行存储器110中的程序，以用于执行如下处理：

响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

根据网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

将带有网页错误区域标记的第一网页截图和网页代码片段进行组合后，执行错误上报处理。

其中，响应于对网页错误区域的标记操作，生成带有网页错误区域标记的网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围可以包括：

响应于点击网页页面上设置的错误上报按键的操作，生成对网页页面整体的第二网页截图；

响应于对第二网页截图中网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域在第二网页截图中的相对坐标范围作为网页界面坐标范围。

其中，响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围可以包括：

响应于点击网页页面上设置的错误上报按键后的截图操作，获取截图操作所覆盖的网页界面坐标范围作为网页错误区域标记所覆盖的网页界面坐标范围；

将截图操作覆盖的网页区域作为网页错误区域，生成带有网页错误区域标记的第一网页截图。

其中，上述处理还可以包括：

网页界面坐标范围，在网页脚本文件中，确定与网页界面坐标范围对应的DOM节点，并获取与DOM节点对应的网页代码片段。

其中，上述处理还可以包括：

将代码片段进行截图处理，并与第一网页截图进行组合后，执行错误上报处理。

作为另外一种电子设备的实施例，该电子设备包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

接收来自多个客户端的针对同一网页的网页错误上报消息；

根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因；

如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警。

上述对于上述处理过程具体说明、技术原理详细说明以及技术效果详细分析在前面实施例中进行了详细描述，在此不再赘述。

进一步，如图所示，电子设备还可以包括：通信组件130、电源组件140、音频组件150、显示器160等其它组件。图中仅示意性给出部分组件，并不意味着电子设备只包括图中所示组件。

通信组件130被配置为便于电子设备和其他设备之间有线或无线方式的通信。电子设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件130经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件130还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

电源组件140，为电子设备的各种组件提供电力。电源组件140可以包括电源管理系统，一个或多个电源，及其他与为电子设备生成、管理和分配电力相关联的组件。

音频组件150被配置为输出和/或输入音频信号。例如，音频组件150包括一个麦克风(MIC)，当电子设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器110或经由通信组件130发送。在一些实施例中，音频组件150还包括一个扬声器，用于输出音频信号。

显示器160包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (9)

1.一种网页处理方法，包括：

响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

2.根据权利要求1所述的方法，其中，所述响应于对网页错误区域的标记操作，生成带有网页错误区域标记的网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围包括：

响应于点击网页页面上设置的错误上报按键的操作，生成对所述网页页面整体的第二网页截图；

响应于对第二网页截图中网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域在所述第二网页截图中的相对坐标范围作为网页界面坐标范围。

3.根据权利要求1所述的方法，其中，所述响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围包括：

响应于点击网页页面上设置的错误上报按键后的截图操作，获取所述截图操作所覆盖的网页界面坐标范围作为所述网页错误区域标记所覆盖的网页界面坐标范围；

将所述截图操作覆盖的网页区域作为所述网页错误区域，生成带有网页错误区域标记的第一网页截图。

4.根据权利要求1所述的方法，其中，根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段包括：

根据所述网页界面坐标范围，在网页脚本文件中，确定与所述网页界面坐标范围对应的DOM节点，并获取与所述DOM节点对应的网页代码片段。

5.根据权利要求1所述的方法，其中，所述将所述带有网页错误区域标记的第一网页截图和所述代码片段进行组合后，执行错误上报处理包括：

将所述代码片段进行截图处理，并与所述第一网页截图进行组合后，执行错误上报处理。

6.一种网页处理装置，包括：

网页界面坐标范围获取模块，用于响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

网页代码片段获取模块，用于根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

错误上报处理模块，用于将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

7.一种网页处理方法，包括：

接收来自多个客户端的针对同一网页的网页错误上报消息；

根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因；

如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警。

8.一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

响应于对网页错误区域的标记操作，生成带有网页错误区域标记的第一网页截图，并获取网页错误区域标记所覆盖的网页界面坐标范围；

根据所述网页界面坐标范围，获取与该网页界面坐标范围对应的网页代码片段；

将所述带有网页错误区域标记的第一网页截图和所述网页代码片段进行组合后，执行错误上报处理。

9.一种电子设备，包括：

存储器，用于存储程序；

处理器，耦合至所述存储器，用于执行所述程序，以用于如下处理：

接收来自多个客户端的针对同一网页的网页错误上报消息；

根据所述网页错误上报消息中包含的错误网页截图和对应的网页代码片段，确定网页错误原因；

如果针对同一网页，被确定为相同的网页错误原因的网页错误上报消息的数量大于预设阈值，则向网站运维平台发出网页错误报警。

Images