本申请实施例涉及前端页面技术领域，具体涉及一种用于排查前端页面问题的方法及装置，以及一种提供前端页面监控信息的方法及装置，以及一种用于排查前端页面问题的系统。
背景技术：
随着应用业务的发展，业务逻辑也纷繁复杂，前端页面可能需要在不同的环境下进行显示，例如，不同的系统(ios、android等)、不同的客户端以及不同厂商的webview等。
由于前端页面需要适应各种不同的场景，因此使得前端开发人员在开发前端页面时难度加大，需要考虑的问题也增多。某些场景下，如果前端页面在展示过程中出现问题(例如，样式或者逻辑问题)，由于前端开发人员无法获知前端页面在展示过程中的相关信息，因此难以对出现问题的页面进行问题排查，特别是对于偶现问题的前端页面，排查难度更大。
如何获取前端页面在展示过程中的相关信息、供开发人员利用这些信息进行问题页面的排查，成为了亟待解决的问题。
技术实现要素：
本申请实施例提供一种用于排查前端页面问题的方法，以解决现有前端开发人员难以对出现问题的页面进行问题排查的问题。
所述用于排查前端页面问题的方法包括：
接收客户端设备上传的关于前端页面的监控信息；
将接收到的所述关于前端页面的监控信息存储到数据库中；
根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
可选的，所述根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查的步骤，包括：
根据查询请求从所述数据库中读取被请求页面的监控信息，并显示所述被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
可选的，所述被请求页面的监控信息至少包括：被请求页面的截图；
所述显示所述被请求页面的监控信息，包括：
至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程。
可选的，所述被请求页面的截图的数目为两个或者两个以上，且每个截图对应不同的采集时间点；
所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：
至少通过按照采集时间点依次显示被请求页面的截图，以动画效果重现被请求页面在所述客户端设备上的展示过程。
可选的，所述被请求页面的监控信息还包括以下所列的辅助信息：页面的html内容、页面用户事件、页面内存、cpu利用率、和/或调试信息；
所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：
通过显示被请求页面的截图以及辅助信息，重现被请求页面在所述客户端设备上的展示过程。
可选的，所述接收客户端设备上传的关于前端页面的监控信息，包括：
接收由前端页面的js脚本上传的关于前端页面的监控信息；和/或，
接收展示前端页面的客户端上传的关于前端页面的监控信息。
可选的，所述接收客户端设备上传的关于前端页面的监控信息，包括：
定时接收所述客户端设备上传的关于前端页面的监控信息；或者，
定期接收所述客户端设备上传的关于前端页面的监控信息。
可选的，所述查询请求携带的信息至少包括：被请求页面的url、和展示被请求页面的客户端设备的标识；或者，被请求页面的url、和使用被请求页面的用户标识。
可选的，所述查询请求携带的信息还包括：采集时间点或者时间段。
可选的，在根据查询请求从所述数据库中读取被请求页面的监控信息之后，在供开发人员对所述被请求页面进行问题排查之前，还包括：
若所述读取的监控信息中包括进行过采样处理和/或压缩处理的部分信息，则对所述部分信息进行相应的还原处理。
本申请实施例还提供一种用于排查前端页面问题的装置，所述装置包括：
接收信息单元，用于接收客户端设备上传的关于前端页面的监控信息；
存储信息单元，用于将接收单元接收到的所述关于前端页面的监控信息存储到数据库中；
查询信息单元，用于根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
本申请实施例还提供一种提供前端页面监控信息的方法，其特征在于，包括：
在展示前端页面的过程中，基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息；
将所述监控信息上传至服务端，供开发人员进行问题排查。
可选的，所述基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息，包括：
利用在所述前端页面内插入的js脚本获取所述监控信息；和/或，
通过在所述前端页面内插入的js脚本调用客户端提供的接口获取所述监控信息。
可选的，在将所述监控信息上传至服务端的步骤之前，还包括：
对所述监控信息进行数据处理，以减少上传的数据量；
所述将所述监控信息上传至服务端，包括：将进行数据处理后的监控信息上传至服务端。
可选的，所述对所述监控信息进行数据处理，包括：
若所述监控信息中存在对应于同一监控项的相似监控信息，则对所述相似监控信息进行采样处理，其中，所述相似监控信息中存在一监控信息与其他各监控信息的相似度都大于预设阈值；和/或，
对所述监控信息中的重复数据和/或截图进行压缩处理。
可选的，在展示前端页面的过程中，在基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息之前，包括：
利用所述js脚本对监控信息包括的监控项进行配置。
可选的，所述将所述监控信息上传至服务端，包括：
由所述js脚本将所述监控信息上传至服务端；和/或，
由客户端将所述监控信息上传至服务端。
可选的，所述由客户端将所述监控信息上传至服务端，包括：
所述js脚本调用客户端提供的接口将所述监控信息存储在所述客户端本地；
所述客户端将已存储的监控信息上传至所述服务端。
可选的，所述将所述监控信息上传至服务端，包括：
定时将所述监控信息上传至服务端；或者，
定期将所述监控信息上传至服务端。
本申请实施例还提供一种提供前端页面监控信息的装置，所述装置包括
获取信息单元，用于在展示前端页面的过程中，基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息；
上传信息单元，用于将获取信息单元获取的所述监控信息上传至服务端，供开发人员进行问题排查。
本申请实施例还提供一种用于排查前端页面问题的系统，所述系统包括：上述的用于排查前端页面问题的装置、提供前端页面监控信息的装置、以及用于存储前端页面监控信息的数据库。。
与现有技术相比，本申请实施例具有以下优点:
本申请实施例提供一种用于排查前端页面问题的方法，所述方法包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
本申请实施例提供的用于排查前端页面问题的方法，通过客户端设备将关于前端页面的监控信息上传至服务端，由服务端将监控信息存储到数据库中，当前端页面出现问题、甚至是机率很低的偶现问题时，开发人员通过从数据库中查询出现问题的前端页面的监控信息，能够非常方便地进行问题排查。可见，本申请解决了现有前端开发人员难以对出现问题的页面进行问题排查的问题，显著提升对前端页面进行问题排查的效率。
附图说明
图1是本申请第一实施例提供的一种提供前端页面监控信息的方法的流程图。
图2是本申请第二实施例提供的一种用于排查前端页面问题的方法的流程图；
图3是本申请第三实施例提供的一种提供前端页面监控信息的装置的示意图。
图4是本申请第四实施例提供的一种用于排查前端页面问题的装置的示意图。
图5是本申请第五实施例提供的一种用于排查前端页面问题的系统的示意图。
图6是本申请第五实施例提供的用于排查前端页面问题的系统的一个具体例子的示意图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请实施例。但是本申请实施例能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请实施例内涵的情况下做类似推广，因此本申请实施例不受下面公开的具体实施的限制。
本申请第一实施例提供了提供前端页面监控信息的方法。请参考图1，其示出了根据本申请的第一实施例提供的提供前端页面监控信息的方法的流程图。以下结合图1进行详细说明。本实施例提供的方法由客户端设备实施。
步骤s101,在展示前端页面的过程中，基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息。
本步骤通过在前端页面插入js脚本(javascript脚本)的方式获取关于所述前端页面的监控信息，是将所述监控信息上传的基础。
所述前端页面，通常是指在客户端设备上显示出来供用户浏览的页面。
所述js脚本，可以是在前端页面中插入的、用于获取前端页面监控信息的远程监控js脚本。通过将远程监控js脚本插入前端页面，在展示前端页面的过程中，远程监控js脚本可以获取关于前端页面的监控信息。
所述监控信息可以包括远程监控js脚本具有权限获取的、或者通过调用客户端接口获取的关于前端页面的数据。所述监控信息可以包括对应于以下监控项的信息：页面截图(可以简称截图)、页面的html内容、页面用户事件、页面内存、cpu利用率、js堆栈、调试信息。其中，所述调试信息(也称debug信息)可以包括主动记录的log信息和浏览器内核报出的错误、警告等提示信息。
针对每个前端页面，可以获取对应于上述所列全部监控项的信息，也可以获取对应于上述所列任意一个或者一个以上监控项的信息。
优选地，为了灵活地获取监控信息，在基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息之前，可以根据具体的需求，利用所述js脚本对监控信息包括的监控项进行配置。
具体的，可以利用远程监控js脚本生成远程监控对象，并利用远程监控对象对监控信息包括的监控项进行配置，例如，是否包括页面截图，是否包括页面用户事件、是否包括调试信息、是否包括页面内存等。在具体实施时，可以在远程监控对象的配置信息里面对相应的监控项进行配置，如果不包括某监控项，则可以将该监控项的配置信息设置为false或0，如果包括某监控项，则可以将该监控项的配置信息设置为true或1。例如，如果需要获取页面截图和调试信息，则将相应的两个监控项的的配置信息设置为true，将其他监控项的配置信息设置为false。
在具体实施时，在上述利用远程监控js脚本进行配置的过程中，还可以对是否对获取的监控信息进行采样或者压缩处理进行配置(关于采样和压缩处理的说明请参见步骤s102中的相关说明)。
基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息，可以包括：利用在所述前端页面内插入的js脚本获取所述监控信息，也可以包括：通过在所述前端页面内插入的js脚本调用客户端提供的接口获取所述监控信息。其中，本实施例所述的客户端通常是指用于展示前端页面的容器，例如，可以为展示前端页面的app。
例如，可以在远程监控js脚本中调用html2canvas()函数或者类似函数，获取前端页面的页面截图，也可以在远程js脚本中通过调用客户端提供的接口(例如hybrid接口)、利用客户端的能力来获取页面截图；再如，关于页面内存、cpu利用率等监控信息则可以通过调用客户端提供的接口获取。
在实际应用中，可以采用上述两种方式中的任一种方式获取前端页面的监控信息，也可以将上述两种方式结合使用。在不具有客户端的应用场景下，可以仅利用远程监控js脚本获取前端页面的监控信息，简化实施难度；在具有客户端的应用场景下，则可以优选利用客户端提供的接口来获取前端页面的监控信息，从而可以利用客户端的能力使得信息获取过程更加高效。
获取前端页面的监控信息的过程，也可以称为监控信息的采集过程，在具体实施时，在获取对应各监控项的监控信息时，还可以记录相应的采集时间点，即，所述关于前端页面的监控信息中，还可以包括：采集时间点(也称为时间戳)，从而便于开发人员根据采集时间点进行前端页面的问题排查。
需要说明的是，上面以在前端页面中插入独立的远程监控js脚本为例，对本步骤的实施方式进行了说明。在具体实施时，配置监控项、获取监控信息、以及步骤102涉及的上传监控信息的这些功能可以由独立的远程监控js脚本完成，也可以将这些功能分散在插入前端页面的多个js脚本中，例如：插入到用于完成业务功能的多个js脚本中，也是可以的。
步骤s102,将所述监控信息上传至服务端，供开发人员进行问题排查。
本步骤将步骤s101获取的关于前端页面的监控信息上传至服务端。具体的，可以由客户端设备通过服务端提供的接口将监控信息上传至服务端。
其中，所述客户端设备可以是展示前端页面的设备，例如，个人电脑、平板电脑、智能手机等。所述服务端，用于接收前端页面的监控信息并将其存储在数据库中。所述服务端提供的接口可以是基于http协议或者https协议的接口。
在本步骤中，可以由插入前端页面的所述js脚本、利用服务端提供的接口将所述监控信息上传至服务端，也可以由客户端利用服务端提供的接口将所述监控信息上传至服务端。其中，由客户端将所述监控信息上传至服务端，可以首先通过在前端页面中插入的js脚本调用客户端提供的接口将获取的监控信息存储在客户端本地，然后再由客户端将已存储的监控信息上传至所述服务端。
例如，可以由js脚本将通过canvas等技术获得的前端页面截图直接上传至服务端；也可以通过所述js脚本调用客户端提供的接口将前端页面截图存储在客户端本地的存储介质上，例如：硬盘上，然后由所述客户端将截图上传至服务端。
在具体实施时，可以采用由js脚本上传监控信息的实施方式；也可以采用将监控信息存储在客户端、并由客户端上传的实施方式；也可以将这两种方式结合实施，即，部分监控信息由js脚本上传、部分监控信息由客户端上传也是可以的。
在具体实施时，监控信息的上传时机是可以预先配置的，本步骤则可以按照配置好的时机执行上传操作。
以采用js脚本上传监控信息为例，如果预先利用远程监控对象配置了在前端页面的生命周期内采用定时、或者定期的方式上传，则本步骤可以按照定时、或者定期的方式将获取的前端页面的监控信息上传给服务端。
在具体实施时，也可以将定时或定期上传的方式与实时上传的方式相结合，例如：对前端页面的截图可以每隔5s上传一次，对于页面用户事件，例如：用户点击按钮的事件，则可以在对应于onclick事件的js脚本中实时地将本次用户点击事件上传给服务端。
类似的道理，对于由客户端上传监控信息的实施方式，客户端也可以预先配置采用定期、定时、和/或主动上传的方式，那么本步骤中客户端可以将已存储的监控信息采用相应的方式上传给服务端。
优选地，为了减少上传数据量、减少对网络带宽的占用，本实施例还提供对步骤101获取的监控信息进行数据处理、以减少上传数据量的优选实施方式。即：在将所述监控信息上传至服务端之前，可以先对所述监控信息进行数据处理，以减少上传的数据量，本步骤则将进行数据处理后的监控信息上传至服务端。由于客户端设备上传给服务端的数据越多，占用网络带宽越多，导致上传失败的几率越大，因此在上传监控信息之前，先对数据进行优化处理，减少上传的数据量。具体实施时，上述数据处理可以由准备执行上传操作的js脚本或者客户端执行。
对所述监控信息进行数据处理，包括：压缩处理，和/或，根据相似度计算结果对监控信息进行采样处理。其中，根据相似度计算结果对监控信息进行采样的实施方式可以为：若所述监控信息中存在对应于同一监控项的相似监控信息，则对所述相似监控信息进行采样处理，其中，所述相似监控信息中存在一监控信息(以下称基准监控信息)与其他各监控信息的相似度都大于预设阈值。具体的采样处理可以为，针对所述相似监控信息，在监控数据中仅保留其中基准监控信息的完整内容，其他监控信息则可以用表征其内容与该基准监控信息相似的标识信息代替，从而可以不用上传所述相似监控信息的全部内容。具体实施时，所述预设阈值可以根据需求进行设置，例如设为99％。
例如，前端页面加载显示后，客户端每隔10s上传一次前端页面的debug信息，如果在10s内获取的监控信息中，包含先后5次采集到的debug信息，通过相似度计算，发现后4次采集到的debug信息与首次采集的debug信息的相似度都超过预设阈值，那么这5次采集到的debug信息则为相似监控信息，在这种情况下，可以进行采样处理，即：在待上传的监控信息中仅保留首次采集的debug信息(对应采集时间点为t1)，而后4次的debug信息都用标识信息替代，表征本次获取的debug信息与t1时间点获取的debug信息相似即可。其效果相当于，在10s内，只进行了一次采样，减少了监控信息上传的数据量，减少对网络带宽的占用，降低上传失败的几率。
所述压缩处理可以为，对所述监控信息中的重复数据和/或截图进行压缩处理。例如，可以对监控信息中的重复数据采用压缩表示方式，对截图采用相应的图像压缩算法进行压缩。
执行上述数据处理操作后，则可以将处理后的监控信息上传至服务端，供服务端存储，以便开发人员排查前端页面问题时查询参考。
在具体实施，本步骤上传给服务端的信息通常不仅包括监控信息，还可以包括用于标识相应前端页面的标识信息，所述标识信息可以为：前端页面的url信息和客户端设备标识，或者，前端页面的url信息和使用前端页面的用户标识(该信息可以从cookie数据中获取)，从而在服务端可以将前端页面与监控信息对应存储，以便于根据前端页面标识进行相应监控信息的查询。
至此，通过上述步骤s101-s102，对本实施例提供的提供前端页面监控信息的方法的实施方式进行了描述。通过上述描述可以看出，本实施例实现了关于前端页面的监控信息的采集并将采集到的所述监控信息上传至服务端，为开发人员进行查询、排查问题提供了数据基础。
本申请第二实施例提供了一种用于排查前端页面问题的方法。请参考图2，其示出了根据本申请的第二实施例提供的用于排查前端页面问题的方法的流程图。以下结合图2进行详细说明。本实施例提供的用于排查前端页面问题的方法通常在服务端实施。
步骤s201,接收客户端设备上传的关于前端页面的监控信息。
其中，所述客户端设备是指展示前端页面的客户端设备。
所述上传的关于前端页面的监控信息，可以包括：页面截图、页面的html内容、页面用户事件、页面内存、cpu利用率、和/或调试信息，其中每一项监控信息可以有对应的采集时间点信息。上传的信息还可以包括用于标识相应前端页面的信息，例如，前端页面的url信息和客户端设备标识，或者，前端页面的url信息和使用前端页面的用户标识。
所述接收客户端设备上传的关于前端页面的监控信息，包括：接收由前端页面的js脚本上传的所述监控信息；和/或，接收展示前端页面的客户端上传的所述监控信息。具体的，可以通过服务端提供的接口(例如：基于http协议或者基于https协议的接口)接收客户端设备上传的关于前端页面的监控信息。
所述接收客户端设备上传的关于前端页面的监控信息，可以包括定时或者定期接收所述客户端设备上传的所述关于前端页面的监控信息。定时或者定期接收，取决于客户端设备的上传方式，如果客户端设备的上传监控信息时采用定时上传方式，则服务端定时接收所述监控信息；如果客户端设备采用定期上传方式，则服务端定期接收所述监控信息。
步骤s202,将接收到的所述关于前端页面的监控信息存储到数据库中。
本步骤将步骤s201接收到的关于前端页面的监控信息存储到数据库中，以供开发人员在某前端页面出现问题时进行查询和排查问题。
所述数据库，通常是指按照数据结构来组织、存储和管理数据的仓库。所述数据库包括关系数据库，例如oracle、sqlserver，从数据库中查询信息时可以使用数据库查询语句。所述数据库可以和服务端部署在同一台物理服务器上，为了保证数据存储的安全性，所述数据库也可以和服务短部署在不同的物理服务器上。
由于存储到数据库中的信息可以包括插入前端页面的js脚本和/或展示前端页面的客户端获得的关于前端页面的监控信息，因此，当某一前端页面出现问题后，即便是偶现问题，开发人员可以通过查询数据库中的监控信息快速地进行问题定位、排查，提高了前端页面的问题排查效率，具体请参见步骤s203中的说明。
步骤s203,根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
在将接收到的关于前端页面的监控信息存储到数据库中后，开发人员可以根据需求查询所述数据库中的监控信息，并根据获取的监控信息进行前端页面的问题排查。
所述被请求页面，可以是开发人员需要获取其相关监控信息的前端页面，通常是指出现问题、需要进行问题排查的前端页面。
当开发人员需要对某个发生问题的前端页面进行问题排查时，可以将其作为被请求页面向服务端发起查询请求，例如：利用键盘输入对被请求页面的查询请求。所述查询请求携带的信息可以包括被请求页面的标识信息，例如：被请求页面的url、和展示被请求页面的客户端设备的标识；或者，被请求页面的url、和使用被请求页面的用户标识。本步骤则可以根据接收到的查询请求，将其转换成相应的数据库查询语句(例如：sql语句)，然后将所述数据库查询语句发送给用于存储监控信息的数据库，并接收数据库返回的查询结果，从而就获取了被请求页面的监控信息。
所述查询请求携带的信息还可以包括：采集时间点或者时间段。由于被请求页面的监控信息通常数据量比较大，而被请求页面出现问题的时间通常是可以获知的，因此开发人员可以通过在请求信息中携带采集时间点或时间段，来获取被请求页面处于某个时间点或时间段内的监控信息。例如，在查询请求中不仅携带被请求页面的标识信息，还携带“2017/1/115:00——15:10”，则可以从数据库中获取针对被请求页面在“2017/1/115:00——15:10”时间段内采集到的监控信息。
需要说明的是，在根据查询请求从所述数据库中读取被请求页面的监控信息之后，若所述读取的监控信息中包括进行过采样处理和/或压缩处理的部分信息，则可以对所述部分信息进行相应的还原处理。
例如，被请求页面的监控信息中包含进行过采样处理的debug信息，则可以根据监控信息中的相应标识信息获取作为采样基准的完整debug信息，并用完整debug信息替换相应的标识信息，从而还原了监控信息中的debug信息；如果被请求页面监控信息包含压缩后的截图图片，则可以采用相应的解压缩算法对压缩图片进行解压缩，从而还原监控信息中的截图。
获取被请求页面的监控信息后，开发人员可以利用所述监控信息对所述被请求页面进行问题排查，例如可以用一些数据分析工具对读取的监控信息进行分析、并进一步确定问题。
优选地，为了便于更为直观地进行问题排查，本实施例还提供显示监控信息的优选实施方式。即，在根据查询请求从所述数据库中读取被请求页面的监控信息之后，可以将所述读取的被请求页面的监控信息在显示设备上进行显示，以便开发人员更直观地进行问题排查。
进一步优选地，在显示所述被请求页面的监控信息时，若所述被请求页面的监控信息包括被请求页面的截图时，可以通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程。根据重现的截图，开发人员就可以直观地获知被请求页面在发生问题时，页面的具体显示状况，有助于进行问题排查。
在具体实施时，如果所述被请求页面的监控信息不仅包括截图，还包括以下所列的辅助信息之一或者任意组合：页面html内容、页面用户事件、页面内存、cpu利用率、debug信息，那么重现被请求页面在所述客户端设备上的展示过程时，可以将被请求页面的截图以及辅助信息都显示出来。通过将被请求页面的截图以及辅助信息结合显示，开发人员可以充分利用显示的信息进行问题排查，使定位问题更加迅速。
在具体实施时，如果从数据库中获取的被请求页面的截图的数目为两个或者两个以上，且每个截图对应不同的采集时间点时，在重现被请求页面在所述客户端设备上的展示过程时，可以通过按照采集时间点依次显示被请求页面截图的方式，以动画效果重现被请求页面在所述客户端设备上的展示过程。例如，被请求页面的监控信息中包括多个由于用户操作(点击、滑动或摇一摇等)而彼此不同的页面截图，在重现被请求页面的展示过程时，可以将每一帧页面截图以动画效果重现。从而开发人员可以直观地看到前端页面在展示过程中发生的各种变化，有助于进行问题排查。
同样的道理，重现被请求页面在所述客户端设备上的展示过程时，也可以通过按照采集时间点依次显示被请求页面的截图以及对应的辅助信息，以动画方式重现被请求页面在所述客户端设备上的展示过程。其中，与某一截图对应的辅助信息，可以是与该截图同步采集到的辅助信息(即：采集时间点相同)，也可以是在该截图与下一截图之间采集到的辅助信息。采用这种方式，可以直观地重现被请求页面的显示情况、用户针对被请求页面执行了哪些操作、导致被请求页面发生了哪些变化，以及对应于各个截图的debug信息等，从而可以为开发人员从各个角度展现被请求页面的信息。
下面举例说明以动画效果重现被请求页面在所述客户端设备上的展示过程。例如：在客户端设备上，第一采集时间点获取了某一前端页面的第一帧截图，用户点击了“详情”按钮，该前端页面中进一步展示了详情，并在第二采集时间点获取了该前端页面的包含详情展示的第二帧截图，然后用户通过手指上滑操作，导致该前端页面向上滚动，并在第三采集时间点获取了该前端页面的第三帧截图，上面三帧截图以及用户事件(点击按钮、手指上滑)都作为该前端页面的监控信息上传给了服务端。当开发人员获知该客户端设备在第一时间点和第三时间点之间显示的该前端页面存在问题时，就可以在服务端输入针对该前端页面的查询请求，并在查询请求中携带从第一时间点到第三时间点的时间段指示，从而服务端可以根据用户的查询请求从数据库中获取已存储的监控信息，包括三帧截图以及用户事件，并将上述信息以动画形式依次展示出来，即：首先显示第一帧截图，并显示用户执行了点击“详情”按钮的操作；随后显示第二帧截图，并显示用户执行了手指上滑操作；最后显示第三帧截图。
上述提供的优选方案，在根据查询请求从数据库中读取被请求页面的监控信息之后，将所述读取的被请求页面的监控信息进行显示，而且可以将不同采集时间点的页面截图进行动画显示、并同步显示监控信息中包含的其他信息，方便开发人员更直观地进行问题排查。
至此，通过上述步骤s201-s203，对本实施例提供的用于排查前端页面问题的方法的实施方式进行了描述。通过上述描述可以看出，开发人员在前端页面出现问题时，可以根据需求从所述数据库中读取被请求页面的监控信息，有助于对问题进行定位、排查。
与上述提供的前端页面监控信息的方法相对应的，本申请实施例还提供了一种提供前端页面监控信息的装置。由于所述装置的实施例基本相似于方法的实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。所述提供前端页面监控信息的装置实施例如下：
请参考图3，其示出了根据本申请的第三实施例提供的一种提供前端页面监控信息的装置的示意图。
所述提供前端页面监控信息的装置，包括：获取信息单元301、上传信息单元302。
获取信息单元301，用于在展示前端页面的过程中，基于在所述前端页面内插入的js脚本获取关于所述前端页面的监控信息；
上传信息单元302，用于将获取信息单元获取的所述监控信息上传至服务端，供开发人员进行问题排查。
可选的，所述获取信息单元，包括：
js脚本获取信息子单元，用于利用在所述前端页面内插入的js脚本获取所述监控信息；和/或，
客户端接口获取信息子单元，用于通过在所述前端页面内插入的js脚本调用客户端提供的接口获取所述监控信息。
可选的，所述装置还包括：
数据处理单元，用于在上传信息单元工作之前，对所述监控信息进行数据处理，以减少上传的数据量；
所述上传信息单元，具体用于将进行数据处理后的监控信息上传至服务端。
可选的，所述数据处理单元，包括：
采样处理子单元，用于若所述监控信息中存在对应于同一监控项的相似监控信息，则对所述相似监控信息进行采样处理，其中，所述相似监控信息中存在一监控信息与其他各监控信息的相似度都大于预设阈值；和/或，
压缩处理子单元，用于对所述监控信息中的重复数据和/或截图进行压缩处理。
可选的，所述监控信息包括对应于以下监控项的信息：
页面截图、页面的html内容、页面用户事件、页面内存、cpu利用率、和/或调试信息。
可选的，所述装置，还包括：
配置单元，用于在获取信息单元工作之前利用所述js脚本对监控信息包括的监控项进行配置。
可选的，所述上传信息单元，包括：
js脚本上传信息子单元，用于由所述js脚本将所述监控信息上传至服务端；和/或，
客户端上传信息子单元，用于由客户端将所述监控信息上传至服务端。
可选的，所述客户端上传信息子单元，包括：
存储信息子单元，用于所述js脚本调用客户端提供的接口将所述监控信息存储在所述客户端本地；
上传信息子单元，用于所述客户端将已存储的监控信息上传至所述服务端。
可选的，所述上传信息单元，包括：
定时上传信息子单元，用于定时将所述监控信息上传至服务端；或者，
定期上传信息子单元，用于定期将所述监控信息上传至服务端。
与上述提供的用于排查前端页面问题的方法相对应的，本申请实施例还提供了一种用于排查前端页面问题的装置。由于所述装置的实施例基本相似于方法的实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。所述用于排查前端页面问题的装置实施例如下：
请参考图4，其示出了根据本申请的第四实施例提供的一种用于排查前端页面问题的装置的示意图。
所述用于排查前端页面问题的装置，包括：接收信息单元401、存储信息单元402、查询信息单元403。
接收信息单元401，用于接收客户端设备上传的关于前端页面的监控信息；
存储信息单元402，用于将接收单元接收到的所述关于前端页面的监控信息存储到数据库中；
查询信息单元403，用于根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
可选的，所述查询信息单元，包括：
查询信息子单元，用于根据查询请求从所述数据库中读取被请求页面的监控信息；
显示子单元，用于显示所述被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。
可选的，所述显示子单元，包括：
重现子单元，用于当所述被请求页面的监控信息至少包括被请求页面的截图时，至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程。
可选的，所述重现子单元，包括：
动画显示子单元，用于当所述被请求页面的截图的数目为两个或者两个以上，且每个截图对应不同的采集时间点时，至少通过按照采集时间点依次显示被请求页面的截图，以动画效果重现被请求页面在所述客户端设备上的展示过程。
可选的，所述被请求页面的监控信息还包括以下所列的辅助信息：页面的html内容、页面用户事件、页面内存、cpu利用率、和/或调试信息；
所述重现子单元，包括：
显示截图及辅助信息子单元，用于通过显示被请求页面的截图以及辅助信息，重现被请求页面在所述客户端设备上的展示过程。
可选的，所述接收信息单元，包括：
接收js脚本信息子单元，用于接收由前端页面的js脚本上传的关于前端页面的监控信息；和/或，
接收客户端信息子单元，用于接收展示前端页面的客户端上传的关于前端页面的监控信息。
可选的，所述接收信息单元，包括：
定时接收子单元，用于定时接收所述客户端设备上传的关于前端页面的监控信息；或者，
定期接收子单元，用于定期接收所述客户端设备上传的关于前端页面的监控信息。
可选的，所述监控信息，包括：页面截图、页面的html内容、页面用户事件、页面内存、cpu利用率、和/或调试信息。
可选的，所述查询请求携带的信息至少包括：被请求页面的url、和展示被请求页面的客户端设备的标识；或者，被请求页面的url、和使用被请求页面的用户标识。
可选的，所述查询请求携带的信息还包括：采集时间点或者时间段。
可选的，所述查询信息单元具体用于：根据查询请求从所述数据库中读取被请求页面的监控信息，若所述读取的监控信息中包括进行过采样处理和/或压缩处理的部分信息，则对所述部分信息进行相应的还原处理，并将还原处理后的监控信息供开发人员对所述被请求页面进行问题排查。
本申请实施例还提供一种用于排查前端页面问题的系统，如图5所示，所述系统包括上述实施例所述的提供前端页面监控信息的装置501、用于排查前端页面问题的装置502、以及用于存储前端页面监控信息的数据库503。所述提供前端页面监控信息的装置可以部署于个人电脑、或移动终端设备(例如：智能手机)。所述用于排查前端页面问题的装置可以部署在一台服务器上，也可以部署在两台服务器上：其中一台用于接收并存储关于前端页面的监控信息，另一台用于根据查询请求从数据库中读取被请求页面的监控信息。所述存储前端页面监控信息的数据库可以与用于排查前端页面问题的装置部署于同一台服务器上(如果用于排查前端页面问题的装置部署于两台服务器上，则数据库可以部署于其中任一台服务器上)，也可以与用于排查前端页面问题的装置部署于不同的物理服务器。
图6是本申请第五实施例提供的用于排查前端页面问题的系统的一个具体例子的示意图，所述提供前端页面监控信息的装置部署于智能手机，用于排查前端页面问题的装置部署于两台服务器a和b，服务器a用于存储智能手机上传的关于前端页面的监控信息，服务器b用于查询并展示关于前端页面的监控信息，所述存储前端页面监控信息的数据库部署于服务器c。
本实施例提供的用于排查前端页面问题的系统的处理流程如下所示：1)智能手机在展示前端页面的过程中，利用所述前端页面内插入的js脚本获取关于所述前端页面的监控信息，然后将所述监控信息上传至服务器a；2)服务器a在接收到关于前端页面的监控信息后，将所述关于前端页面的监控信息存储至服务器c的数据库中；3)当某一前端页面出现问题后，服务器b根据开发人员的查询请求从服务器c查询得到问题页面的页面截图及其他辅助信息；4)服务器b将查询到的页面截图及辅助信息展现在显示器上，供开发人员进行问题排查。
本申请实施例虽然以较佳实施例公开如上，但其并不是用来限定本申请实施例，任何本领域技术人员在不脱离本申请实施例的精神和范围内，都可以做出可能的变动和修改，因此本申请实施例的保护范围应当以本申请实施例权利要求所界定的范围为准。
在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。
本领域技术人员应明白，本申请实施例可提供为方法、系统或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。