网页诊断方法、设备及系统

技术领域

本申请涉及互联网技术领域，尤其涉及一种网页诊断方法、设备及系统。

背景技术

目前，随着浏览器的普及，web(World Wide Web，即全球广域网，也称为万维网)界面即网页的用户体验尤为重要，但是网页在使用过程中可能发生会无法预知的异常或者错误等情况。因此，用户如何反馈问题，工程师如何诊断网页的问题，是一个切实的业务痛点。

目前，用户可以反馈当前网页发生错误或者异常时的截图和报错信息，工程师基于用户反馈的截图和报错信息实现网页异常分析。

但是，上述方法只有错误或异常这一时刻的信息，可能无法较为准确的分析出网页的实际问题。

公开于该背景技术部分的信息仅仅旨在增加对本申请的总体背景的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域一般技术人员所公知的现有技术。

发明内容

本申请实施例提供了一种网页诊断方法、设备及系统，能够采集网页发生错误以及发生错误前一段时间内网页上的页面内容、错误信息、用户操作等信息，使得工程师能够基于更全面的信息对于网页中发生的错误进行快速的定位。

第一方面，本申请实施例提供了一种网页诊断方法，应用于第一设备，包括：获取目标网页的多个副本和发生错误时的错误信息；其中，所述多个副本包括所述目标网页发生错误前的第一副本和发生错误时的第二副本；所述多个副本用于记录所述目标网页的页面内容信息、操作信息；所述操作信息指示了用户对所述目标网页的操作，所述页面内容信息用于生成页面内容；将所述多个副本和所述错误信息发送至第二设备，以使所述第二设备基于所述多个副本生成图像序列，所述图像序列用于记录所述目标网页在至少一个第一时刻各自的页面内容、所述用户在至少一个第二时刻各自对所述目标网页的操作位置。

本方案中，采用循环录制网页在不同时刻的页面内容，用户操作，错误信息等数据，这样能够完整的记录网页在发生错误和发生错误前的相关信息，然后将这些数据重新渲染为网页，还原发生错误和错误前一段时间内网页不同时刻的页面内容，用户操作，错误信息，有利于工程师对复杂的错误进行定位。

在一种可能的实现方式中，所述方法还包括：获取设备硬件信息；其中，所述设备硬件信息至少指示了所述第一设备中处理所述目标网页的硬件的情况；获取浏览器信息；其中，所述浏览器信息包括处理所述目标网页的浏览器的插件和/或运行环境；将所述设备硬件信息和所述浏览器信息发送到所述第二设备，以使所述第二设备基于所述设备硬件信息构建所述第一设备的虚拟设备，在所述虚拟设备上基于所述浏览器信息和所述多个副本，生成图像序列。

本方案中，通过构建适配终端设备的虚拟设备，并在虚拟设备上还原的浏览器，能够较为准确的还原网页在发生错误和发生错误前的相关信息，有利于复杂问题的错误定位。

在一种可能的实现方式中，所述方法还包括：显示第一接口；其中，所述第一接口用于指示上传所述多个副本和所述错误信息至所述第二设备。

本方案中，通过用户操作实现数据上传。

在一种可能的实现方式中，所述多个副本包括所述目标网页的初始副本、以及所述目标网页相对所述初始副本的增量副本；

在一种可能的实现方式中，所述多个副本为脱敏后的副本。

本方案中，通过对数据脱敏，确保用户隐私。

在一种可能的实现方式中，所述多个副本还包括网络请求数据，所述网络请求数据包括至少一个请求记录，所述请求记录包括针对所述目标网页的网络请求和所述网络请求的返回值，以使所述第二设备显示所述请求记录。

本方案中，通过记录网络请求数据，从而便于后续对网络请求的分析。

第二方面，本申请实施例提供了一种网页诊断方法，应用于第二设备，包括：接收第一设备发送的目标网页的多个副本和发生错误时的错误信息；其中，所述多个副本包括所述目标网页发生错误前的至少一个副本和发生错误时的副本；所述多个副本用于记录所述目标网页的页面内容信息、操作信息；所述操作信息指示了用户对所述目标网页的操作，所述页面内容信息用于生成页面内容；基于所述多个副本生成图像序列，所述图像序列用于记录所述目标网页在至少一个第一时刻各自的页面内容、所述用户在至少一个第二时刻各自对所述目标网页的操作位置。

该方案的有益效果参见上文不再赘述。

在一种可能的实现方式中，所述方法还包括：接收所述第一设备发送的设备硬件信息；其中，所述设备硬件信息至少指示了所述第一设备中处理所述目标网页的硬件的情况；接收所述第一设备发送的浏览器信息；其中，所述浏览器信息包括处理所述目标网页的浏览器的插件和/或运行环境；所述基于所述多个副本，生成图像序列，包括：

基于所述设备硬件信息构建所述第一设备的虚拟设备，在所述虚拟设备上基于所述浏览器信息和所述多个副本，生成图像序列。

该方案的有益效果参见上文不再赘述。

在一种可能的实现方式中，所述方法还包括：提供第一接口；其中，所述第一接口用于指示所述第一设备上传所述多个副本和错误信息。

在一种可能的实现方式中，所述多个副本包括所述目标网页的初始副本、以及所述目标网页相对所述初始副本的增量副本。

在一种可能的实现方式中，所述多个副本为脱敏后的副本。

在一种可能的实现方式中，所述多个副本还包括网络请求数据，所述网络请求数据包括至少一个请求记录，所述请求记录包括针对所述目标网页的网络请求和所述网络请求的返回值。

在一种可能的实现方式中，所述方法还包括：基于所述多个副本，确定所述图像序列中的至少一帧对应的页面参考信息；其中，所述页面参考信息包括操作记录、请求记录和/或错误信息；所述请求记录包括针对所述目标网页的网络请求和所述网络请求的返回值，所述操作记录包括操作位置和/或操作类型；显示所述图像序列和所述所述图像序列中的至少一帧对应的页面参考信息。

本方案中，通过显示图像序列和图像序列中多帧的页面参考信息，从而便于后续的网页的错误定位。

第三方面，基于与本申请方法实施例相同的构思，本申请实施例还提供了一种网页诊断装置。网页诊断装置包括若干个模块，各个模块用于执行本申请实施例提供的网页诊断方法中的各个步骤，关于模块的划分在此不做限制。所属领域的技术人员可以清楚地了解到，实际应用中，可以根据需要而将本申请实施例提供的网页诊断方法中的各个步骤分配由不同的模块完成，即将装置的内部结构划分成不同的模块，以完成以上描述的全部或者部分功能。实施例中的各模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上模块集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述装置中模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

示例地，网页诊断装置用于执行本申请实施例第一方面提供的网页诊断方法，本申请实施例提供的网页诊断装置，包括：

第一获取模块，用于获取目标网页的多个副本和发生错误时的错误信息；其中，所述多个副本包括所述目标网页发生错误前的至少一个副本和发生错误时的副本；所述多个副本用于记录所述目标网页的页面内容信息、操作信息；所述操作信息指示了用户对所述目标网页的操作，所述页面内容信息用于生成页面内容；

上传模块，用于将所述多个副本和所述错误信息发送至第二设备，以使所述第二设备基于所述多个副本生成图像序列，所述图像序列用于记录所述目标网页在至少一个第一时刻各自的页面内容、所述用户在至少一个第二时刻各自对所述目标网页的操作位置。

在一种可能的实现方式中，所述装置还包括：

第二获取模块，用于获取设备硬件信息；其中，所述设备硬件信息至少指示了所述第一设备中处理所述目标网页的硬件的情况；

第三获取模块，用于获取浏览器信息；其中，所述浏览器信息包括处理所述目标网页的浏览器的插件和/或运行环境；

所述上传模块，还用于将所述设备硬件信息和所述浏览器信息发送到所述第二设备，以使所述第二设备基于所述设备硬件信息构建所述第一设备的虚拟设备，在所述虚拟设备上基于所述浏览器信息和所述多个副本，生成图像序列。

在一种可能的实现方式中，所述装置还包括：显示模块；其中，

所述显示模块用于显示第一接口；其中，所述第一接口用于指示上传所述多个副本和所述错误信息至所述第二设备。

在一种可能的实现方式中，所述多个副本包括所述目标网页的初始副本、以及所述目标网页相对所述初始副本的增量副本；

在一种可能的实现方式中，所述多个副本为脱敏后的副本。

本方案中，通过对数据脱敏，确保用户隐私。

示例地，网页诊断装置用于执行本申请实施例第二方面提供的网页诊断方法，本申请实施例提供的网页诊断装置，包括：

第一接口模块，用于接收第一设备发送的目标网页的多个副本和发生错误时的错误信息；其中，所述多个副本包括所述目标网页发生错误前的至少一个副本和发生错误时的副本；所述多个副本用于记录所述目标网页的页面内容信息、操作信息；所述操作信息指示了用户对所述目标网页的操作，所述页面内容信息用于生成页面内容；

还原模块，用于基于所述多个副本生成图像序列，所述图像序列用于记录还原所述目标网页在至少一个第一时刻各自的页面内容、所述用户在至少一个第二时刻各自对所述目标网页的操作位置。

在一种可能的实现方式中，所述装置还包括：

第二接收模块，用于接收所述第一设备发送的设备硬件信息；其中，所述设备硬件信息至少指示了所述第一设备中处理所述目标网页的硬件的情况；

第三接收模块，用于接收所述第一设备发送的浏览器信息；其中，所述浏览器信息包括处理所述目标网页的浏览器的插件和/或运行环境；

所述还原模块，还用于基于所述设备硬件信息构建所述第一设备的虚拟设备，在所述虚拟设备上基于所述浏览器信息和所述多个副本，生成图像序列。

在一种可能的实现方式中，所述装置还包括：接口提供模块；其中，

所述接口提供模块用于提供第一接口；其中，所述第一接口用于指示所述第一设备上传所述多个副本和错误信息。

在一种可能的实现方式中，所述多个副本包括所述目标网页的初始副本、以及所述目标网页相对所述初始副本的增量副本。

在一种可能的实现方式中，所述多个副本为脱敏后的副本。

在一种可能的实现方式中，所述多个副本还包括网络请求数据，所述网络请求数据包括至少一个请求记录，所述请求记录包括针对所述目标网页的网络请求和所述网络请求的返回值。

在一种可能的实现方式中，所述装置还包括：

还原模块，用于基于所述多个副本，确定所述图像序列中的至少一帧对应的页面参考信息；其中，所述页面参考信息包括操作记录、请求记录和/或错误信息；所述请求记录包括针对所述目标网页的网络请求和所述网络请求的返回值，所述操作记录包括操作位置和/或操作类型；

显示模块，用于显示所述图像序列和所述图像序列中的至少一帧对应的页面参考信息。

第四方面，本申请实施例提供了一种网页诊断设备，包括：至少一个存储器，用于存储程序；至少一个处理器，用于执行存储器存储的程序，当存储器存储的程序被执行时，处理器用于执行第一方面中所提供的方法，或者执行第二方面中所提供的方法。

第五方面，本申请实施例提供了一种网页诊断装置，其特征在于，装置运行计算机程序指令，用于执行第一方面中所提供的方法，或者执行第二方面中所提供的方法。示例性的，该装置可以为芯片，或处理器。

在一个例子中，该装置可以包括处理器，该处理器可以与存储器耦合，读取存储器中的指令并根据该指令执行第一方面中所提供的方法，或者执行第二方面中所提供的方法。其中，该存储器可以集成在芯片或处理器中，也可以独立于芯片或处理器之外。

第六方面，本申请实施例提供了一种网页诊断系统，该系统可以包括第一设备和第二设备，其中，所述第一设备用于执行如第一方面中所提供的方法，所述第一设备用于执行如第二方面中所提供的方法。

第七方面，本申请实施例提供了一种计算机存储介质，计算机存储介质中存储有指令，当指令在计算机上运行时，使得计算机执行第一方面中所提供的方法，或者执行第二方面中所提供的方法。

第八方面，本申请实施例提供了一种包含指令的计算机程序产品，当指令在计算机上运行时，使得计算机执行第一方面中所提供的方法，或者执行第二方面中所提供的方法。

附图说明

图1是相关技术中网页诊断方法的示意图；

图2是本申请实施例提供的一种网页诊断系统的架构示意图。

图3是本申请实施例提供的一种网页诊断方法的流程示意图一；

图4是本申请实施例提供的一种目标网页的界面显示示意图；

图5a是对图4提供的目标网页的操作的示意图一；

图5b是对图4提供的目标网页的操作的示意图二；

图5c是对图4提供的目标网页的操作的示意图三；

图5d是对图4提供的目标网页的操作的示意图四；

图5e是对图4提供的目标网页的操作的示意图五；

图5f是对图4提供的目标网页的操作的示意图六；

图5g是本申请实施例提供的图像序列显示的示意图；

图6是本申请实施例提供的一种网页诊断方法的流程示意图二；

图7是本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

为了使本申请实施例的目的、技术方案和优点更加清楚，下面将结合附图，对本申请实施例中的技术方案进行描述。

在本申请实施例的描述中，“示例性的”、“例如”或者“举例来说”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”、“例如”或者“举例来说”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”、“例如”或者“举例来说”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，单独存在B，同时存在A和B这三种情况。另外，除非另有说明，术语“多个”的含义是指两个或两个以上。例如，多个系统是指两个或两个以上的系统，多个终端是指两个或两个以上的终端。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

目前，B/S架构成为当今应用软件的首选结构体系。其中，B/S架构是软件系统体系结构，是指浏览器-Web服务器(Broswer-Server)，采用三层架构，即表现层(是展示给用户的界面)、业务逻辑层(针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理)、数据访问层(针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理)。在B/S架构中，用户界面完全通过浏览器实现，一部分事务逻辑在前端实现，但是主要的事务逻辑在服务器端实现，形成所谓的三成架构。在B/S体系结构系统中，用户通过浏览器向分布在网络上的许多服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。而其余如数据请求、加工、结果返回以及动态网页生成、对数据库的访问和应用程序的执行等工作全部由Web服务器完成。

因此，Web界面即网页的用户体验尤为重要，但是网页在使用过程中可能发生会无法预知的异常或者错误等情况。因此，用户如何反馈问题，工程师如何诊断网页的问题，是一个切实的业务痛点。

当前现有的网页诊断方法主要是通过监控网页中错误或者异常，并在发生时，返回网页错误时的最后一帧截图、报错信息等内容。通常实现这种方案的具体内容如下：

如图1所示，当用户访问网页时，网页启动监控系统监控网页。当网页发生错误或者异常之后，即网页报错，监控系统会通知信息采集模块采集报错时的网页截图和报错等信息，然后再将这些信息打包发送给服务器进行分析，即上传分析。信息采集模块只有当网页发生错误或者异常时才采集信息，只能获取到网页发生错误或者异常时的一些信息，并不能获取用户在之前的一系列操作信息。

上述方案具有以下缺点。

1.只能反馈当前网页发生错误或者异常时的截图和报错信息，无法追溯到报错之前的更多的操作。定位错误往往需要完整的一个操作流程，只有报错瞬间的信息对于复杂问题的定位很难起到好的效果。工程师可能无法复现当时的场景，因为复杂的错误问题一般是需要用户一个连续的操作流程才能触发。

2.无法获取用户报错时网络请求等数据，无法获取更多信息作为参考，可能会导致定位结果不准确。

3.由于直接反馈截图等信息，可能会暴露用户的一些敏感信息，有用户敏感信息泄露的风险。

为了解决上述技术问题，本申请实施例提供了一种网页诊断方法，能够采集网页发生错误以及发生错误前一段时间内网页上的页面内容、错误信息、用户操作、网络请求等数据，然后基于这些数据在浏览器中重新渲染网页的页面内容、用户操作、报错信息、网络请求等信息，使得工程师能够基于更全面的信息对于网页中发生的错误或异常进行快速的定位和修改。

图2示出了本申请实施例提供的网页诊断方法所应用的一种网页诊断系统的架构示例图。应理解，本申请实施例提供的网页诊断方法可以适用的网页诊断系统还可以适用图2示出的网页诊断系统之外的其他网页诊断系统，本申请实施例对此不做限定。如图2所示，网页诊断系统包括终端设备210、分析设备220。

其中，终端设备210可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑等可以浏览网页的设备，具体地，终端设备210安装浏览器，用户通过浏览器访问网页。本申请实施例中涉及的终端设备210的示例性实施例包括但不限于搭载iOS、android、Windows、鸿蒙系统(Harmony OS)或者其他操作系统的电子设备。本申请实施例对电子设备的类型不做具体限定。

其中，分析设备220可以是服务器。在一些实施例中，分析设备220也可以是台式机、笔记本电脑或者智能手机等终端设备。

终端设备210通过网络与分析设备220通信。其中，网络可以为有线网络或无线网络。示例地，有线网络可以为电缆网络、光纤网络、数字数据网(Digital Data Network，DDN)等，无线网络可以为电信网络、内部网络、互联网、局域网络(Local Area Network，LAN)、广域网络(Wide Area Network，WAN)、无线局域网络(Wireless Local AreaNetwork，WLAN)、城域网(Metropolitan Area Network，MAN)、公共交换电话网络(PublicService Telephone Network，PSTN)、蓝牙网络、紫蜂网络(ZigBee)、移动电话(GlobalSystem for Mobile Communications，GSM)、CDMA(Code Division Multiple Access)网络、CPRS(GeneralPacketRadioService)网络等或其任意组合。可以理解的是，网络可使用任何已知的网络通信协议来实现不同客户端层和网关之间的通信，上述网络通信协议可以是各种有线或无线通信协议，诸如以太网、通用串行总线(universal serial bus，USB)、火线(firewire)、全球移动通讯系统(global system for mobile communications，GSM)、通用分组无线服务(general packet radio service，GPRS)、码分多址接入(code divisionmultiple access，CDMA)、宽带码分多址(wideband code division multiple access，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)、长期演进(long term evolution，LTE)、新空口(new radio，NR)、蓝牙(bluetooth)、无线保真(wireless fidelity，Wi-Fi)等通信协议。

本申请实施例的终端设备210在使用浏览器访问客户端的网页的过程中，终端设备210采集网页发生错误以及发生错误前一段时间内网页上在不同时刻的页面内容、错误信息、用户的操作等数据，并将这些数据打包上传至分析设备220，分析设备220可以在浏览器中重新还原网页在不同时刻的页面内容、用户的操作等信息，使得工程师能够更全面的信息对于网页中发生的错误或异常进行快速的定位和修改。

需要说明的是，图2示出的网页诊断系统仅仅作为示例，并不构成具体限定，在实际应用中，网页诊断系统可以包括比图2所示更多的设备，比如，网页诊断系统还可以包括设备集群，设备集群作为服务端，分析设备220作为客户端，从而将目标数据和重新渲染的任务交给设备集群，分析设备220用于向设备集群发送请求，设备集群响应该请求进行网页还原，向工程师展示重现渲染之后的结果。

图3是本申请实施例提供的网页分析方法的流程示意图。本实施例可应用在上述网页诊断系统中，具体可以应用在终端设备210和分析设备220。如图3所示，本申请实施例提供的网页分析方法至少包括如下步骤：

步骤301、终端设备210创建目标网页的多个第一副本；其中，至少一个第一副本至少用于记录目标网页的页面内容信息、操作信息；页面内容信息用于生成目标网页的页面内容，操作信息指示了用户对目标网页的操作。

在实际应用中，用户通过终端设备210安装的浏览器访问目标应用的客户端，从而在浏览器中运行目标应用中的目标网页，显示目标网页的页面内容，之后，用户可以对目标网页的页面内容进行操作，从而改变目标网页的页面内容。

具体地，终端设备210基于目标网页的网址(通常为统一资源定位系统(uniformresource locator，url))访问目标网页，可以得到网页文件，解析网页文件得到DOM(Document ObjectModel，文档对象模型)树，渲染DOM树从而显示目标网页的页面内容。其中，DOM树记录了多个节点，以及每个节点的节点信息，节点信息可以包括需要显示的内容，和/或，需要请求的资源。示例地，请求的资源可以为CSS(Cascading Style Sheets，层叠样式表)文件，也可以为终端设备210内部的资源(为了便于描述和区别，可以称为本地资源)，还可以为终端设备210之外的资源(为了便于描述和区别，可以称为外部资源)。当请求内部资源时，可以将终端设备210生成的请求称为内部请求；当请求外部资源时，可以将终端设备210生成的请求称为网络请求。示例地，在渲染DOM树的过程中，若遇到外部css文件，终端设备220运行的浏览器会另外发出一个网络请求，来获取css文件，若遇到图片资源，浏览器也会另发出一个网络请求，来获取图片资源。

后续，如用户对目标网页的页面内容进行操作，则终端设备210可以生成网络请求或内部请求，请求资源，改变目标网页的部分页面内容。示例地，网络请求可以是跳转到新的网页的地址，假设，目标网页的页面内容中包括标签栏，标签栏中有多个标签，用户点击标签栏中的某一标签比如首页，此时，可以发送网络请求，请求标签的内容，此时，网络请求可以认为是需要跳转的网页的地址。示例地，网络请求也可以是在目标网页上需要显示的内容，比如，目标网页可以选择查询某些数据，此时，网络请求可以是请求需要查询的数据，之后在网页上显示。

具体地，用户可以对目标网页的页面内容进行操作，生成操作事件，进一步地，处理操作事件生成内部请求或网络请求，请求到资源后更新页面内容。其中，操作事件指示了操作相关信息，比如，操作类型，操作位置等。这里，操作事件可以为点击事件，移动事件、输入事件，长按滑动事件，滑动事件等，对应的，用户的操作可以为点击，鼠标移动，鼠标长按，鼠标长按滑动等。

举例来说，终端设备210基于目标网页的网址url1访问目标网页，可以得到如图4所示的页面。之后，用户可以对图4示出的页面内容进行操作。

图5a至图5f示出了可以对图4示出的页面内容的操作。

如图5a所示，鼠标可以在图4示出的页面内容上进行滑动，得到鼠标移动轨迹T。

如图5b所示，鼠标可以点击视频显示区域401中的视频播放按钮，则终端设备210可以发送网络请求，请求视频资源，之后，可以生成视频显示页面406，该页面用于播放视频。

如图5c所示，用户可以通过键盘在产品输入框中输入产品A，并点击搜索按钮，则终端设备210可以发送网络请求，请求产品A的介绍信息，之后，可以在产品介绍显示区域404中显示出产品A相关的图片、视频和文字介绍等信息。

如图5d所示，鼠标可以点击标题tag2，则终端设备210可以发送内部请求，请求tag2下的资源，之后，可以高亮显示tag2,并在标题内容显示区域405出显示tag2对应的内容。

如图5e所示，鼠标可以长按滑动控件402并移动，则终端设备210可以实现页面移动。

如图5f所示，鼠标可以移动到标签C2,终端设备210高亮显示标签C2，当鼠标点击标签C2时，终端设备210生成网络请求(包括url2)，从而跳转到C2指示的网页2。

在终端设备210显示目标网页的页面内容和用户对目标网页的页面内容操作的过程中，可以循环录制目标网页的相关信息，记录目标网页的页面内容信息、网络请求的请求记录、操作信息等，从而得到若干个第一副本。

其中，页面内容信息用于生成目标网页的页面内容，通常为DOM树。DOM树用于记录需要显示的文本、需要请求的外部资源以及需要请求的内部资源。该DOM树为虚拟树，可以认为是网页在某个时间的状态。

其中，操作信息可以为操作事件。

其中，请求记录用于记录网络请求和网络请求得到的返回值。这里，网络请求可以为终端设备210请求外部资源所生成的请求。示例地，该网络请求可以包括目标网页的网址(通常为统一资源定位系统(uniform resource locator，url)。另外，还可以包括生成目标网页的过程中请求外部资源的请求，和/或用户对目标网页操作过程中请求外部资源的请求。值得注意的是，为了更好的记录目标网页的实际的资源请求情况，可以单独记录网页生成过程中的网络请求，从而便于后续对网络请求进行处理分析。值得注意的是，网络请求通常需要访问其他的设备，在还原过程中，可能无法得到网络请求的返回值，因此，可以直接记录网络请求的返回值。对于一些可以在还原过程中拿到返回值的网络请求，可以直接记录网络请求，从而可以在还原过程中拿到资源。

根据一种可行的实现方式，第一副本可以为快照。在一些可能的情况下，第一副本也可以为备份，本申请实施例并不意图显示副本的类型，具体可结合实际情况确定。

根据一种可行的实现方式，若干个第一副本包括目标网页的初始副本和相对初始副本的若干个增量副本，且这些副本的序号随着副本的创建时刻的先后顺序递增。创建时刻越晚，序号越大。

在一个例子中，初始副本包括目标网页的网址、目标网页的全量页面内容信息。进一步地，还可以包括网络请求。这里，全量页面内容信息指示了目标网页的所有页面内容。比如，基于全量页面内容信息可以还原图4示出的页面内容。

在一个例子中，若干个增量副本用于记录操作信息、目标网页的页面内容变化信息，进一步的，还可以记录网络请求。其中，目标网页的页面内容变化信息可以通过虚拟DOM树记录，虚拟DOM树仅仅记录网页的页面内容发生变化的部分。

示例地，单个增量副本可以包括操作事件。

示例地，单个增量副本可以包括页面内容变化信息。

示例地，单个增量副本可以包括网络请求。对于图5b，增量副本包括请求视频文件的网络请求。

举例来说，假设对图4示出的网页页面创建初始副本，之后，用户依次进行图5a至图5f的操作。

则对于图4来说，初始副本包括网址url1、图4示出的网页的DOM树。

对于图5a来说，可以创建多个增量副本，每个增量副本用于记录移动事件，移动事件包括操作类型(移动)以及鼠标位置，后续，基于移动事件可以还原鼠标位置和移动的轨迹。对于图5a，页面内容没有发生变化，此时，页面内容变化信息为空。

对于图5b来说，可以创建4个增量副本，第1个增量副本用于记录点击事件，点击事件包括操作类型(点击)、单击的位置，后续，基于点击事件可以还原点击位置和点击的操作。第2个增量副本用于记录视频显示区域401的页面内容变化信息(比如，视频显示区域的DOM树，该树至少用于记录请求视频显示页面406的内部请求、请求视频文件的网络请求等)，基于页面内容变化信息可以还原图5b示出的视频显示页面406，基于请求视频文件的网络请求获取到视频文件，解析视频文件在视频显示页面406播放视频。第3个增量副本用于记录视频显示页面406上的点击事件，点击事件包括操作类型(点击)、单击的位置(删除按钮“X”)，后续，基于点击事件可以还原点击位置和点击的操作。第4个增量副本用于记录视频显示页面406的页面内容变化信息(指示删除视频显示页面406)，后续基于页面内容变化信息删除视频显示页面406。

对于图5c来说，可以创建4个增量副本，第1个增量副本用于记录点击事件，点击事件包括操作类型(点击)、单击的位置(产品输入框的位置)，后续，基于点击事件可以还原点击位置和点击的操作。第2个增量副本用于记录产品输入框403的页面内容变化信息(比如产品输入框403的DOM树，用于记录输入的内容，以及输入的内容的显示样式或者显示样式的内部请求等)，后续，基于页面内容变化信息可以还原图5c示出的产品输入框403中的输入内容“产品A”。第3个增量副本用于记录点击事件，点击事件包括操作类型(点击)、单击的位置(产品输入框中的搜索按钮的位置)，后续，基于点击事件可以还原点击位置和点击的操作。第4个增量副本用于记录产品介绍显示区域404的页面内容变化信息(比如DOM树，用于记录输入的内容，以及请求产品A的介绍内容的网络请求等)，后续，基于页面内容变化信息可以还原图5c示出的产品输入框403中的内容，以及，产品介绍显示区域404的显示内容。

对于图5d来说，可以创建2个增量副本，第1个增量副本用于记录点击事件，点击事件包括操作类型(点击)、单击的位置，后续，基于点击事件可以还原点击位置和点击的操作。第2个增量副本用于记录页面内容变化信息(比如，标题栏(tag1、tag2、tag3)对应的DOM树，该树至少用于记录请求tag2的高亮显示、tag2下的内容请求)，基于页面内容变化信息可以还原图5d示出的tag2的高亮显示和标题内容显示区域405示出的tag2下的内容。

对于图5e来说，可以创建2个增量副本，第1个增量副本用于记录长按滑动事件，长按事件包括操作类型(长按滑动)、长按的位置(滑动控件的位置)、滑动的位置，后续，基于长按滑动事件可以还原长按位置、长按的操作和滑动的操作。第2个增量副本用于记录页面内容变化信息(包括滑动控件402的DOM树，该树至少用于记录滑动控件402在不同位置对应的页面内容)，后续，基于页面内容变化信息可以还原图5e示出的滑动控件402的位置变化下的页面内容的变化。

对于图5f来说，可以创建3个增量副本，第1个增量副本用于记录移动事件，移动事件包括操作类型(移动)、移动到的位置(标签C2)，后续，基于移动事件可以还原移动到的位置。第2个增量副本用于记录页面内容变化信息(比如,标签栏(C1、C2、C3、C4)的DOM树，该树至少用于记录标签C2的高亮显示)，基于页面内容变化信息可以还原图5f示出的C2的高亮显示。第3个增量副本用于记录标签C2下的网络请求(url2)，基于网络请求(url2)可以加载网页2。

值得注意的是，初始副本中的全量页面内容信息和增量副本中的页面内容变化信息都是页面内容信息。

在具体实现时，对于没有创建过副本的网页，首先，创建该网页的初始副本和序号，之后，创建该网页的增量副本和序号(不断增加)，从而得到针对该网页的序号依次增加的多个第一副本。

在实际录制副本的过程中，IndexedDB(本地索引数据库)按照时间顺序存储副本，终端设备210还判断IndexedDB(本地索引数据库)是否超过存储的限制。如果超过存储限值，则判断IndexedDB最后记录的序号0和序号1的网址是否相同。如果是，将序号0的初始副本与序号1的增量副本相结合形成新的序号0的初始副本。如果否，则直接删除序号0的初始副本。之后，用户通过终端设备210打开目标系统的网页，终端设备210判断IndexedDB存是否存储有当前网页的副本。如果存在，创建增量副本，序号根据历史记录进行递增。如果否，从序号0开始创建初始副本，记录序号。

步骤302、终端设备210在目标网页发生错误时，创建目标网页的第二副本，获取错误记录。

在目标网页错误时，创建目标网页的第二副本。第二副本可以记录目标网页的地址、页面内容信息、操作事件、网路请求的请求记录等。这里，页面内容信息可以为页面内容变化信息。详细内容参见上文，不再赘述。值得注意的是，本申请实施例中，发生错误时的第二副本用于记录错误发生的全流程，即需要完整记录用户操作、用户操作后的页面变化信息、网络请求之后的返回值等。具体地，在用户操作后页面没有反应的情况下，第二副本用于记录操作事件，在用户操作后，页面显示的内容错误，此时，第二副本可以记录页面内容信息，在一些可能的实现方式，还可以额外创建一个第二副本，用于记录网络请求，或者，网络请求的请求记录；这里，当基于网络请求可以得到返回值时，可以记录网络请求，当基于网络请求无法得到返回值，此时需要记录网络请求的请求记录，从而便于后续还原。

下面对目标网页可能遇到的错误进行描述。

示例地，在访问网址时，可能会出现网络请求无法响应的问题，有时会出现404的错误信息，一般造成这个原因的可能是因为访问的页面不存在，或者，网址输入错误，或者，所使用的终端设备220没有网络。比如，对于对图5f，网页2无法访问，网页2的页面内容显示“404对不起，您访问的页面不存在”；此时，第二副本可以记录网页2的网络请求。再比如，对于图5c,假设产品A的图片、视频、文字等无法显示，产品介绍显示区域404无显示图片、视频或文字等，此时，第二副本可以记录用户对图5c示出的页面的操作事件。

示例地，目标网页的内部逻辑可能会出现问题。比如，对于图5b，假设鼠标点击视频显示区域401中的视频播放按钮，目标网页没有反应，对应地，第二副本可以记记录用户的点击事件。在比如，对于图5d，假设鼠标可以点击标题tag2，tag2没有高亮显示,标题内容显示区域405也没有更新到tag2对应的内容，依旧是tag1对应的内容，对应地，第二副本可以记记录用户的点击事件。再比如，对于图5e，假设鼠标可以长按滑动控件402并移动，则终端设备210没有实现页面移动等，对应地，第二副本可以记录用户的长按滑动事件。

需要注意的是，错误记录包括错误时刻和错误时刻对应的错误情况。比如，用户点击的位置没有响应，生成的内部请求没有响应，生成的网络请求没有响应等。值得注意的是，本申请实施例中，第二副本的创建时刻和错误记录是并行进行的，可选地，副本的创建时刻和错误时刻可以是等同的，比如用户操作页面没有反应，可选地，错误时刻早于副本的创建时刻，比如，如图5f示出的网页2无法显示的情况，此时，首先出现错误，其次才会创建副本记录网页2无法显示的页面。在实际应用中，第一副本和第二副本各自包括副本创建时刻，从而可以基于创建时刻和错误时刻分析出，错误时刻对应的副本，或者，直接将第二副本和错误记录关联。

步骤303、终端设备210基于已经创建的第一副本、第二副本和错误记录，确定多个副本和目标网页发生错误时的错误信息。

在实际应用中，一般在出现一次错误的时候，就可以上传数据，因此错误信息为一个错误记录，在一些可能的实现方式，可以在出现多次错误后上传数据，此时，错误信息可以包括多个错误记录。这里，多个副本包括第二副本和第二副本之前的预设时段的若干个第一副本。

需要说明的是，在步骤301和步骤302的副本包括请求记录，则多个副本可以包括网络请求数据，网络请求数据包括若干个请求记录。

根据一种可行的实现方式，终端设备210显示第一接口比如上传按钮，指示用户上传数据。示例地，第一接口为按钮，在用户点击按钮时，可以将第二副本和第二副本之前的预设时段内的第一副本，以及，第二副本创建时目标网页的错误信息，上传到分析设备220。这里，预设时段可以为默认的，也可以为用户配置的，比如，用户操作第一接口，配置第二副本之前的时段，后续，将用户配置的时段内的第一副本和第二副本打包。

在实际使用中，多个副本和错误信息为脱敏加密后的数据。终端设备210对第一副本和第二副本进行脱敏加密，确保用户隐私和数据安全。具体地，对已经录制好的副本，使用通用敏感数据扫描，判断里面是否有人名、电话号码、银行卡号等敏感个人信息。如果存在敏感数据，使用静态数据脱敏技术。当敏感数据大于两位时，除了第一位与最后一位，其他全部使用*号覆盖，其他情况直接替换成“******”。脱敏后的副本再进行AES(AdvancedEncryption Standard，高级加密标准)加密形成可传输文件。

步骤304、终端设备210向分析设备220发送多个副本和错误信息。

步骤305、分析设备220基于多个副本，得到图像序列和图像序列中的至少一帧各自的页面参考信息，图像序列用于记录在至少一个第一时刻各自的页面内容以及用户在至少一个第二时刻各自对目标网页的操作位置。

本申请实施例中，基于多个副本中的页面内容信息还原页面内容，基于操作信息还原操作位置，从而得到图像序列。在实际应用中，如图5g所示，图像序列可以作为还原视频进行展示。

下面对分析设备220进行页面内容还原的具体过程进行描述。

在一个例子中，多个副本中包括不同时刻的DOM树，则分析设备220会将这些DOM树进行渲染，从而还原不同时刻的页面内容。具体地转化过程如下：

DOM树中的每个节点称为vNode，其中每个vNode包含vid属性和vnode属性，vid属性记录当前节点的虚拟id,vnode记录当前节点的dom数据。首先使用递归的方式遍历虚拟dom，将每个vNode的包含的dom数据取出来并还原为新的dom树。其次，使用递归遍历dom树，并将每个dom节点使用Js中append(),appendChild()等方法将dom节点插入到页面中。

值得注意的是，在实际应用中，页面内容信息包括全量页面内容信息和页面内容变化信息。具体地，首先基于全量页面内容信息生成一个全量的页面内容(作为一个画面)，然后基于页面内容变化信息，对全量的页面内容进行局部改动，再次得到一个全量的页面内容(作为一个画面)，从而得到不同时刻的页面内容。

在多个第一时刻各自的页面内容的基础上，在至少一个第二时刻各自的操作位置上添加虚拟鼠标，从而构造图像序列。应当理解的是，第一时刻为多个副本中的页面内容信息的创建时刻。第二时刻为多个副本中的操作信息中记录的用户操作的时刻。

下面对用户操作还原的过程进行描述。

在一个例子中，多个副本包括鼠标移动轨迹数据，即移动事件，分析设备220以一定的间隔刷新网页鼠标位置，还原鼠标移动过程。鼠标移动轨迹数据是一个连续的数组(每个数组表示鼠标位置)，旧的轨迹在数组开头，新的轨迹在数组末尾。具体处理过程如下：

分析设备220从鼠标移动轨迹数据的第一个数据开始拿数据，拿到的数据如{x:220,y:200},其中x代表鼠标距离网页左边界的绝对距离，y代表鼠标距离网页上边距的绝对距离，模拟的鼠标是一直以图片的形式存在在网页的最上层，只需要获取到鼠标DOM元素就行，之后，获取鼠标DOM元素中offsetX和offsetY属性更新元素位置，然后判断是否还有鼠标移动轨迹数据，循环执行上述过程，如果没有，则鼠标移动轨迹还原就完成了。在实际应用中，会设置一个定时器，以特定的间隔循环执行鼠标移动轨迹数据中的数据直到鼠标移动轨迹还原完成；其中，间隔一般为50毫秒。值得注意的是，基于鼠标移动轨迹可以分析出用户为什么这些移动鼠标，分析出用户可能需要寻找的网页中的内容，从而可以合理设置网页的布局，提高用户体验。

需要说明的是，这里的鼠标移动轨迹可以理解为鼠标在目标网页的页面内容的移动轨迹，未进行任何操作，比如，图5a示出的鼠标移动轨迹T。

这里，页面参考信息可以包括渲染记录、操作记录和/或错误信息。这里，操作记录包括操作位置和操作类型，可以从多个副本中记录的操作信息中得到。渲染记录为基于页面内容信息重新渲染过程中的记录的信息。值得注意的是，操作记录对应的图像序列中第二时刻的一帧图像，错误信息对应图像序列中的第一时刻或第二时刻的一帧图像，示例地，当错误信息在页面加载过程中产生，则错误信息对应第一时刻，该第一时刻的页面内容为页面加载后的内容；当错误信息在用户操作的时刻产生，则错误信息对应用户操作的第二时刻。

进一步地，若多个副本中包括网络请求数据，则页面参考信息还可以包括请求记录。这里，请求记录对应图像序列中的第一时刻的一帧图像，示例地，当网络请求在页面加载过程中产生，则该网络请求的请求记录对应第一时刻，该第一时刻的页面内容为页面加载后的内容；当网络请求为用户对页面内容操作的过程中产生，且页面内容发生变化，则该网络请求的请求记录对应第一时刻，该第一时刻的页面内容为页面发生变化后的内容。

举例来说，假设用户按照图5a、图5b、图5c、图5d、图5e和图5f的顺序操作，且图5f无法加载出网页2，此时，分析设备220可以基于多个副本还原图5a至图5f，并可以将图5a至图5f按照时间顺序录制成视频，并记录视频中每一帧对应的若干个网络请求的请求记录、操作记录和/或错误信息，从而便于用户查看。更为具体地，在图5f中网页2对应的页面参考信息包括错误信息和请求记录。在图5f中的网页1对应的页面操作信息包括操作记录，这里，操作记录包括操作位置：C2所在的位置和操作类型:点击。

进一步地，页面参考信息还可以显示目标网页的加载时间，响应用户操作的时间(比如，用户操作到页面发生变化的时间)等。

综上，分析设备220将接收到的多个副本和错误信息进行解密，按照多个副本的录制时间进行网页还原。另外，分析设备220可以将还原的目标网页形成视频资源保留，同时保留视频中每一帧所对应的页面参考信息，从而便于后续查看。这里，视频用于反映出目标网页的页面内容随着时间的变化情况、用户的操作以及用户操作后目标网页的页面内容等，在视频的基础上结合页面参考信息，从而便于后续的网页错误分析定位。

步骤306、分析设备220显示图像序列和图像序列中当前帧的页面参考信息。

如图5g所示，分析设备220显示图像序列形成的还原视频，并在显示还原视频的过程中，显示当前帧的页面参考信息。这里，当前帧为图像序列中的当前画面。

在一个例子中，页面参考信息包括请求记录时，分析设备220将网络请求和执行网络请求的结果显示在网页中的特定的区域。具体处理过程如下：

分析设备220在拿到请求记录时，对请求记录中网络请求和执行网络请求的返回值进行整理处理，处理为统一的格式{method:网页诊断,status:网页诊断,payload:网页诊断,requ est:网页诊断，response:网页诊断}，后续，将处理后的数据当做文本插入到网页中展示网络请求的结果的区域显示，从而便于后续工程师进行分析。其中，method表示网络请求的方法，比如，get；status表示网络请求是否已成功,已经揭示网络请求失败的确切原因；payload表示网络请求的协议报文中的有效载荷所占报文的百分比；request表示网络请求的参数，即请求参数；response表示执行网络请求后的响应信息。

本申请实施例中，采用循环录制网页在不同时刻的页面内容，用户操作，错误信息等数据，这样能够完整的记录网页在发生错误和发生错误前的相关信息，然后将这些数据重新渲染为网页，还原发生错误和错误前一段时间内网页不同时刻的页面内容，用户操作，错误信息，有利于工程师对复杂的错误进行定位。

为了使得工程师能够对于网页中发生的错误进行快速的定位，分析设备220还原和终端设备210实际情况需要尽可能保持一致，即分析设备220需要在和终端设备210相似的设备上还原。

则在上述图3所示的步骤301至步骤305的基础上，如图6所示，包括如下步骤：

步骤601、终端设备210获取设备硬件信息；其中，设备硬件信息至少指示了终端设备210中处理目标网页的硬件的情况。

这里，设备硬件信息可以包括终端设备210的屏幕分辨率、网速、机器性能。这里，机器性能可以包括若干个性能参数，比如，CPU内核的数目、CPU的频率、内存的容量等。

步骤602、终端设备210获取浏览器信息；其中，浏览器信息包括处理目标网页的浏览器的插件和/或运行环境。

这里，浏览器信息可以包括浏览器的插件和/或运行环境。其中，运行环境可以包括操作系统的版本、浏览器的版本等。浏览器插件是指基于浏览器的原有功能,另外增加新功能的工具,常见的有Flash插件、RealPlayer插件、MMS插件、MIDI五线谱插件、ActiveX插件等，不同的插件对浏览器的运行可能会造成不同的影响，因此需要考虑浏览器的插件。

对应的步骤304包括如下步骤：

步骤3041、终端设备210向分析设备220发送多个副本、错误信息、设备硬件信息和浏览器信息。

值得注意的是，在实际应用中，应当对发送到分析设备220的数据加密，确保数据安全。

对应的，步骤305至少包括如下步骤：

步骤3051、分析设备220基于设备硬件信息构建第一设备的虚拟设备，在虚拟设备上基于浏览器信息和多个副本，得到图像序列和图像序列中的至少一帧各自的页面参考信息。

在实际应用中，基于设备硬件信息可以构建第一设备的虚拟设备，基于浏览器信息可以在虚拟设备上构建浏览器的运行环境，安装适配的浏览器、操作系统以及浏览器的插件，之后，通过安装的操作系统、浏览器、浏览器的插件，处理多个副本还原目标网页在不同时刻的页面内容、用户的操作和网络请求的结果，从而可以较为真实的模拟出目标网页实际情况，从而可以较为准确的实现网页诊断。

对应的，步骤306至少包括如下步骤：

步骤3061、分析设备220显示图像序列、图像序列中当前帧的页面参考信息、设备硬件信息和浏览器信息。

如图5g所示，分析设备220显示图像序列形成的还原视频、设备硬件信息和浏览器信息，并在显示还原视频的过程中，显示当前帧的页面参考信息。

本方案中，通过构建适配终端设备的虚拟设备，并在虚拟设备上还原的浏览器的实际运行情况，能够较为准确的还原网页在发生错误和发生错误前的相关信息，有利于复杂问题的错误定位。

需要说明的是，在实际应用中，对于目标应用的客户端中的目标网页，大量的终端设备210均可以使用目标应用的客户端，则分析设备220接收到多个终端设备210反馈的关于目标网页的多个副本和错误信息，从而拿到海量的数据，便于后续对目标网页进行错误分析和定位。值得注意的是，大量的终端设备210可以包括手机、电脑等设备，因此，可以综合分析目标网页在不同屏幕分辨率上的终端设备210的表现情况。

另外，上述终端设备210可以称为第一设备，分析设备220可以称为第二设备。

综上，在实际应用中，本申请实施例使得用户可以实时录制产品网页端的异常情况反馈给研发，工程师通过本申请实施例提供的方法进行回放还原，了解用户操作过程中每个时间点的问题所在，能更快定位和修复问题，提升用户体验。

本申请实施例可以用于研发内部测试与开发的沟通上，能够让开发更简单的定位到问题，不需要频繁借测试环境，节省大量的沟通成本，增加效率。

本申请实施例可以将用户/服务/维护/一线等反馈的问题进行整理，形成新型的软件类维护案例库，极大的减少了案例库写作的工作量，能快速输出案例，提升用户体验。

本申请实施例可以快速形成新型的仿真资料(即网页还原后形成的视频)，用户能直观地查看“动态”的资料。

基于与本申请方法实施例相同的构思，本申请实施例还提供了一种电子设备。该电子设备可以为上述终端设备210，或，分析设备220。图7是本申请实施例提供的一种电子设备的结构示意图。

如图7所示，电子设备700包括处理器701、存储器702和网络接口703。

处理器701可以是中央处理单元(Central Processing Unit，CPU)，还可以是其它通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器702可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(read-only memory,ROM)、可编程只读存储器(programmable ROM,PROM)、可擦除可编程只读存储器(erasable PROM,EPROM)、电可擦除可编程只读存储器(electrically EPROM,EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory,RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(static RAM,SRAM)、动态随机存取存储器(DRAM)、同步动态随机存取存储器(synchronous DRAM,SDRAM)、双倍数据速率同步动态随机存取存储器(double data date SDRAM,DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM,ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM,SLDRAM)和直接内存总线随机存取存储器(direct rambus RAM,DR RAM)。

示例地，存储器702上可以存储计算机程序，处理器701执行计算机程序时，实现上述网页诊断方法实施例中的终端设备210实现的功能，比如，例如实现图3所示的步骤301至步骤304；或者，实现上述网页诊断方法实施例中的分析设备220实现的步骤，比如，例如实现图3所示的步骤305。或者，所述处理器701执行计算机程序时实现上述装置实施例中各模块的功能。示例性的，计算机程序可以被分割成一个或多个模块/单元，所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，所述一个或者多个模块/单元被存储在所述存储器702中，并由所述处理器701执行，以完成上述网页诊断方法实施例中的终端设备210实现的步骤。或者，上述网页诊断方法实施例中的分析设备220实现的功能。

网络接口703用于收发数据，例如，将处理器701处理后的数据发送至其他的电子设备，或者，接收其他的电子设备发送的数据等。

当然，为了简化，图7中仅示出了该电子设备700中与本申请有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备700还可以包括任何其他适当的组件。另外，所述电子设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。本领域技术人员可以理解，图7仅仅是电子设备700的示例，并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入设备、输出设备、网络接入设备、总线等。示例地，该输入装置可以是键盘、鼠标等等。示例地，该输出装置可以向外部输出各种信息，可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

除了上述方法、装置和电子设备以外，本申请实施例还可以提供了一种计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时,使得所述处理器执行本说明书上述“方法”部分中描述的本申请各种实施例的网页诊断方法中的步骤。其中，所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本申请实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。其中，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本申请实施例还可以提供了一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“方法”部分中描述的根据本公开各种实施例的网页诊断方法中的步骤。所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

以上结合具体实施例描述了本申请的基本原理，但是，需要指出的是，在本申请中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

可以理解的是，在本申请的实施例中涉及的各种数字编号仅为描述方便进行的区分，并不用来限制本申请的实施例的范围。