CN107844486B - 一种用于客户端的分析网页问题的方法和系统 - Google Patents

Abstract

本发明公开了一种用于客户端的分析网页问题的方法和系统，通过在关键步骤处插桩构建插桩脚本并构建日志输出脚本，实现网页运行动态信息的捕捉和记录，通过将所述插桩脚本和日志输出脚本发送至客户端从而使得客户端能够以日志形式记录网页运行过程中的相关信息，所述相关信息用于进行网页问题的分析。本发明能够获取到全面的用于分析网页问题的信息，进而提升网页分析的效率，快速定位导致网页问题的漏洞。此外，本发明不阻碍客户端程序的执行，不影响客户端的用户体验。

Description

一种用于客户端的分析网页问题的方法和系统

技术领域

本发明涉及客户端测试领域，尤其涉及一种用于客户端的分析网页问题的方法和系统。

背景技术

在PC客户端或移动客户端中，通常通过内置精简的浏览器内核实现依托于web页面的有关功能，但是这种精简的的浏览器内核只能够提供基本的浏览网页的功能，而舍弃了一些对于用户而言并不适用的功能，比如javascript脚本调试，debug日志打印和异常处理，而这些功能对于分析网页问题却是非常必要的，这些功能的缺失导致了客户端没有较好的开发调试功能，在出现网页问题时难以定位引发网页问题的漏洞。

客户端网页环境千差万别，在用户使用web页面的过程中有可能会遇到各种使用问题，而这些问题有较大的可能与网页环境有关，因此，在开发人员在自己的环境中得不到复现，从而导致了开发人员难以定位导致这些问题的漏洞。虽然开发人员可以通过远程操作客户端来复现这些问题，但因为客户端缺少开发调试的功能，开发人员只能看到问题的表象，依然难以定位导致这些问题的漏洞。

现有技术中，通常采用调试代理工具(fiddler)抓包或通过在网页上弹出消息对话框来定位客户端的漏洞。但是调试代理工具只能判断文件是否加载成功以及后台接口返回数据时候正确，而对于由于网页控件不支持或脚本撰写错误而导致的网页问题无能为力；而通过弹出消息对话框定位漏洞的方法不仅会阻塞程序执行导致效率低下，而且由于难以对交互数据进行捕捉，也无法全面定位网页漏洞。

发明内容

为了解决上述技术问题，本发明提出了一种用于客户端的分析网页问题的方法和系统，通过在关键步骤处插桩并自动生成日志，从而获取全面的用于分析网页问题的信息，进而提升网页分析的效率，快速定位导致网页问题的漏洞。

本发明具体是以如下技术方案实现的：

一种用于客户端的分析网页问题的方法，所述方法包括：

定位用于实现网页业务的关键步骤，在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；

构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端运行所述插桩脚本和日志输出脚本；

根据所述客户端在网页运行过程中生成的日志分析网页问题。

进一步地，所述插桩包括设置数据捕捉接口和/或响应捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。

进一步地，所述关键步骤包括：加载页面框架、加载样式表、加载脚本文件、脚本初始化、调用服务端接口、调用业务逻辑接口、页面渲染、接受用户操作和/或显示操作结果。

进一步地，还包括将客户端生成的日志上传至服务器。

进一步地，还包括在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

在客户端运行网页之前，包括：

将用于展现所述用户交互界面的脚本发送至所述客户端，所述脚本包括html脚本和样式表。

进一步地，还包括：

获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

执行所述网页运行对象；

获取所述网页运行对象的执行结果并根据所述执行结果生成日志。

一种用于客户端的分析网页问题的系统，包括服务器和客户端，包括：

网页错误分析模块，用于根据所述客户端在网页运行过程中生成的日志分析网页问题；

所述服务器包括：

插桩脚本构建模块，用于定位用于实现网页业务的关键步骤并在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；

日志输出脚本构建模块，用于构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

发送模块，用于将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端包括：

接收模块，用于接收所述插桩脚本和所述日志输出脚本；

运行模块，用于运行所述插桩脚本和日志输出脚本。

进一步地，所述插桩脚本构建模块包括数据捕捉接口设置单元和/或响应捕捉接口设置单元，

所述数据捕捉接口设置单元用于设置数据捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；

所述响应捕捉接口设置单元用于设置响应捕捉接口，所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。

进一步地，所述网页错误分析模块设置于服务器，所述客户端还包括日志上传模块，用于将客户端生成的日志上传至服务器。

进一步地，所述客户端还包括交互模块，所述交互模块用于在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

进一步地，所述客户端还包括：

网页运行对象获取模块，用于获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

所述运行模块还用于执行所述网页运行对象、获取所述网页运行对象的执行结果以及根据所述执行结果生成日志。

本发明的一种用于客户端的分析网页问题的方法和系统，具有如下有益效果：

(1)获取全面的用于分析网页问题的信息，从而提升网页分析的效率，快速定位导致网页问题的漏洞；

(2)不阻碍客户端程序的执行，不影响客户端的用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。

图1是本发明实施例1提供的一种用于客户端的分析网页问题的方法流程图；

图2是本发明实施例2提供的remote-debug对话框示意图；

图3是本发明实施例3提供的一种用于客户端的分析网页问题的系统的总体框图；

图4是本发明实施例3提供的插桩脚本构建模块3011的框图；

图5是本发明实施例4提供的一种用于客户端的分析网页问题的系统的总体框图；

图6是本发明实施例4提供的另一种用于客户端的分析网页问题的系统的总体框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1：

一种用于客户端的分析网页问题的方法，如图1所示，所述方法包括：

S101.定位用于实现网页业务的关键步骤，在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果。

具体地，由网页开发人员根据网页的业务运行逻辑选择用于实现网页业务的关键步骤。所述关键步骤既可以为业务流程中的关键步骤，也可以为容易出现错误的步骤。比如，网页中某些控件的使用依赖于网页运行环境，而在不同的运行环境中所述控件加载结果有可能不同。鉴于客户端的运行环境较为复杂且多种多样，这种控件加载失败的可能性也较大，因此，这种控件的加载也属于关键步骤。

具体地，所述关键步骤包括：加载页面框架、加载样式表、加载脚本文件、脚本初始化、调用服务端接口、调用业务逻辑接口、页面渲染、接受用户操作和/或显示操作结果。

相应地，所述插桩包括设置数据捕捉接口和/或响应捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。

插桩是指在保证被测程序原有逻辑完整性的基础上在程序中插入一些探针，通过探针的执行抛出程序运行过程中产生的特征数据，通过对这些数据的分析，获得程序的控制流和数据流信息，进而得到程序运行过程中的动态信息的方法。本步骤中通过构建插桩脚本，即可实现对于网页业务关键步骤运行过程中的动态信息的获取。

S102.构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志。

插桩脚本获取网页业务关键步骤运行过程中所抛出的动态信息，日志输出脚本以日志形式记录所述动态信息。

S103.将所述插桩脚本和日志输出脚本发送至客户端。

具体地，客户端包括移动终端、PC机和/或模拟器。

客户端主要通过执行来自服务器的脚本实现与所述脚本相对应的网页功能，因此，来自服务器端的脚本需要具有动态信息的获取以及日志输出的功能。具体地，当客户端出现网页问题时，向服务器请求所述插桩脚本和日志输出脚本。通过将所述脚本发送至客户端，客户端即可在运行网页程序的过程中获取日志。

S104.所述客户端运行所述插桩脚本和日志输出脚本。

客户端通过运行所述插桩脚本和日志输出脚本能够自动输出网页程序运行过程中产生的日志，所述日志被自动传输至后台的服务器，用于服务器端的开发人员及时分析解决客户端出现的问题。这一日志传输的过程可以由客户端的后台自动进行，而客户端用户对于这一过程是无感知的，因此，不影响客户端用户在浏览网页方面的体验。

S105.根据所述客户端在网页运行过程中生成的日志分析网页问题。

本实施例提供了用于客户端的分析网页问题的方法，通过插桩自动获取客户端运行过程中的动态信息，并将所述动态信息以日志形式传输至服务器以便于开发人员分析网页问题。本实施例不仅能够获取全面的用于分析网页问题的信息，从而提升网页分析的效率，快速定位导致网页问题的漏洞，还不阻碍客户端程序的执行，不影响客户端的用户体验。

实施例2：

一种用于客户端的分析网页问题的方法，所述方法包括：

S201.定位用于实现网页业务的关键步骤，在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果。

S202.构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志。

S203.将所述插桩脚本和日志输出脚本发送至客户端。

S204.所述客户端运行所述插桩脚本和日志输出脚本。

S205.根据所述客户端在网页运行过程中生成的日志分析网页问题。

具体地，当客户端出现网页问题时，有两种输出日志的方法：

(1)以无感知形式向后台输出日志，这种方式参见实施例1；

(2)通过与客户端用户进行交互，选择网页运行对象，运行所述网页运行对象并在客户端以日志形式输出运行结果，并将结果传输至服务器。

具体地，包括以下步骤：

获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

执行所述网页运行对象；

获取所述网页运行对象的执行结果并根据所述执行结果生成日志。

在第二种输出日志的方法中，还包括在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

具体地，在客户端运行网页之前，包括：将用于展现所述用户交互界面的脚本发送至所述客户端，所述脚本包括html脚本和样式表。

所述脚本会在客户端的当前页面生成remote-debug对话框，如图2所示，并调用S203中获取的插桩脚本和日志输出脚本。客户端通过在remote-debug对话框中将日志输出方式设置为remote-debug，即可在remote-debug对话框中查看日志。Remote-debug对话框会提供一个用户主动执行网页运行对象的功能，用户可以通过自行选择或手动输入的方式设定脚本和/或代码作为网页运行对象。当所述插桩脚本和所述日志输出脚本监听到用户输入后，执行用户输入的网页运行对象，并在客户端和服务器端都输出所述网页运行对象执行的结果，从而便于用户和开发人员都能够分析定位网页问题。通过remote-debug对话框可以查看网页运行对象的执行状态并快速定位问题，这对于业务逻辑复杂的页面尤为适用。

本实施例提供了另一种用于客户端的分析网页问题的方法，通过用户自主设定网页运行对象，可以根据不同的网页问题有选择的执行不同的网页运行对象，从而增加了网页运行过程中动态信息获取的灵活性，更加便于定位网页问题。

实施例3：

一种用于客户端的分析网页问题的系统，如图3所示，包括服务器301和客户端302，包括：

所述服务器301包括：

插桩脚本构建模块3011，用于定位用于实现网页业务的关键步骤并在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；

日志输出脚本构建模块3012，用于构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

网页错误分析模块3013，用于根据所述客户端在网页运行过程中生成的日志分析网页问题；

发送模块3014，用于将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端302包括：

接收模块3021，用于接收所述插桩脚本和所述日志输出脚本；

运行模块3022，用于运行所述插桩脚本和日志输出脚本；

日志上传模块3023，用于将客户端生成的日志上传至服务器。

如图4所示，所述插桩脚本构建模块3011包括数据捕捉接口设置单元和响应捕捉接口设置单元，所述数据捕捉接口设置单元用于设置数据捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；所述响应捕捉接口设置单元用于设置响应捕捉接口，所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。作为其他的实施方式，所述插桩脚本构建模块3011也包括只包括数据捕捉接口设置单元和响应捕捉接口设置单元中的任意一种。

实施例4：

一种用于客户端的分析网页问题的系统，如图5所示，包括服务器401和客户端402，包括：

所述服务器401包括：

插桩脚本构建模块4011，用于定位用于实现网页业务的关键步骤并在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；

日志输出脚本构建模块4012，用于构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

网页错误分析模块4013，用于根据所述客户端在网页运行过程中生成的日志分析网页问题；

发送模块4014，用于将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端402包括：

接收模块4021，用于接收所述插桩脚本和所述日志输出脚本；

运行模块4022，用于运行所述插桩脚本和日志输出脚本；

日志上传模块4023，用于将客户端生成的日志上传至服务器。

交互模块4024，所述交互模块用于在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

网页运行对象获取模块4025，用于获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

所述运行模块4022还用于执行所述网页运行对象、获取所述网页运行对象的执行结果以及根据所述执行结果生成日志。

作为本发明的另一种实施方式，如图6所示，客户端还包括网页错误分析模块4026，客户端和服务器端均可进行网页错误分析。

实施例3和实施例4均基于同样地发明构思，提供了用于客户端的分析网页问题的系统，能够用于实现上述方法实施例中提供的用于客户端的分析网页问题的方法。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的系统实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

Claims (12)

1.一种用于客户端的分析网页问题的方法，其特征在于，所述方法包括：

定位用于实现网页业务的关键步骤，所述关键步骤为网页开发人员根据网页的业务运行逻辑选择的步骤；在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；

构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端运行所述插桩脚本和日志输出脚本；

根据所述客户端在网页运行过程中生成的日志分析网页问题。

2.根据权利要求1所述的方法，其特征在于，所述插桩包括设置数据捕捉接口和/或响应捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。

3.根据权利要求1所述的方法，其特征在于，所述关键步骤包括：加载页面框架、加载样式表、加载脚本文件、脚本初始化、调用服务端接口、调用业务逻辑接口、页面渲染、接受用户操作和/或显示操作结果。

4.根据权利要求1所述的方法，其特征在于，还包括将客户端生成的日志上传至服务器。

5.根据权利要求4所述的方法，其特征在于，还包括在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

6.根据权利要求5所述的方法，其特征在于，在客户端运行网页之前，包括：

将用于展现所述用户交互界面的脚本发送至所述客户端，所述脚本包括html脚本和样式表。

7.根据权利要求5所述的方法，其特征在于，还包括：

获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

执行所述网页运行对象；

获取所述网页运行对象的执行结果并根据所述执行结果生成日志。

8.一种用于客户端的分析网页问题的系统，包括服务器和客户端，其特征在于，包括：

网页错误分析模块，用于根据所述客户端在网页运行过程中生成的日志分析网页问题；

所述服务器包括：

插桩脚本构建模块，用于定位用于实现网页业务的关键步骤并在所述关键步骤处插桩构建插桩脚本，所述插桩脚本用于探测所述关键步骤的执行结果；所述关键步骤为网页开发人员根据网页的业务运行逻辑选择的步骤；

日志输出脚本构建模块，用于构建日志输出脚本，所述日志输出脚本用于获取所述执行结果并根据所述执行结果输出日志；

发送模块，用于将所述插桩脚本和日志输出脚本发送至客户端；

所述客户端包括：

接收模块，用于接收所述插桩脚本和所述日志输出脚本；

运行模块，用于运行所述插桩脚本和日志输出脚本。

9.根据权利要求8所述的系统，其特征在于，所述插桩脚本构建模块包括数据捕捉接口设置单元和/或响应捕捉接口设置单元，

所述数据捕捉接口设置单元用于设置数据捕捉接口，所述数据捕捉接口用于捕捉客户端与服务器的交互数据；

所述响应捕捉接口设置单元用于设置响应捕捉接口，所述响应捕捉接口用于捕捉客户端在网页运行过程中执行操作指令的结果。

10.根据权利要求8所述的系统，其特征在于，所述网页错误分析模块设置于服务器，所述客户端还包括日志上传模块，用于将客户端生成的日志上传至服务器。

11.根据权利要求10所述的系统，其特征在于，所述客户端还包括交互模块，所述交互模块用于在所述客户端的网页上显示用户交互界面，所述用户交互界面用于与用户交互并呈现所述客户端生成的日志。

12.根据权利要求10所述的系统，其特征在于，所述客户端还包括：

网页运行对象获取模块，用于获取用户输入的网页运行对象，所述网页运行对象包括用户选择的脚本和/或用户直接输入的代码；

所述运行模块还用于执行所述网页运行对象、获取所述网页运行对象的执行结果以及根据所述执行结果生成日志。

Images