CN113934962A - 基于数据拦截的浏览器操作回放方法 - Google Patents

基于数据拦截的浏览器操作回放方法 Download PDF

Info

Publication number
CN113934962A
CN113934962A CN202111193282.8A CN202111193282A CN113934962A CN 113934962 A CN113934962 A CN 113934962A CN 202111193282 A CN202111193282 A CN 202111193282A CN 113934962 A CN113934962 A CN 113934962A
Authority
CN
China
Prior art keywords
data
dom
metadata
persistent storage
user
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111193282.8A
Other languages
English (en)
Inventor
马山虎
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Zhongtongji Network Technology Co Ltd
Original Assignee
Shanghai Zhongtongji Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Zhongtongji Network Technology Co Ltd filed Critical Shanghai Zhongtongji Network Technology Co Ltd
Priority to CN202111193282.8A priority Critical patent/CN113934962A/zh
Publication of CN113934962A publication Critical patent/CN113934962A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
    • G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3051—Monitoring arrangements for monitoring the configuration of the computing system or of the computing system component, e.g. monitoring the presence of processing resources, peripherals, I/O links, software programs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3065—Monitoring arrangements determined by the means or processing involved in reporting the monitored data

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Quality & Reliability (AREA)
  • Computing Systems (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Mathematical Physics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本申请涉及一种基于数据拦截的浏览器操作回放方法，包括对用户操作记录进行统一化记录，得到操作元数据；其中，所述操作元数据包括：用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据；然后基于虚拟dom结合所述操作元数据进行持久化存储；最后基于持久化存储后的操作元数据进行回放。如此，基于浏览器页面的数据拦截，可以是实现自动回放用户操作，并且通过对回放数据的播放，可以直观的反映出用户的操作路径，不需要专业的人员参与，也可以很容易的还原用户的使用场景，从而提高处理效率。

Description

基于数据拦截的浏览器操作回放方法
技术领域
本申请涉及远程调试技术领域，尤其涉及一种基于数据拦截的浏览器操作回放方法。
背景技术
随着互联网和电脑的普及,越来越多的信息采集和上报摒弃了纸张,转而采用浏览器中网页上送的方式，无论是政府、学校、以及公司都开始了无纸化办公和信息电子化模式，在数据采集过程中,好的用户体验主导且影响着数据的数量和质量,越来越多的企业加入到优化用户体验,数据化用户操作的行业中。
现有技术中,对于web端用户的反馈问题，数据采集的方式多为手动或自动埋点,然后将用户的操作日志上送到服务端,再通过数据报表分析用户的操作,最后基于数据的报表通过专业的人员，揣摩出用户的行为数据,但是该方法中，对于基于数据的报表进行用户的行为数据拆模，通常需要跨专业的人员聚集在一起,例如产品人员、测试人员、运营人员、以及开发人员，组装信息，才能拼凑出用户的操作场景，整个过程人力物力消耗严重，工作效率低。
发明内容
本申请提供一种基于数据拦截的浏览器操作回放方法，用于解决现有技术中，对于web端用于的问题反馈，数据采集分析需要众多专业人员才能进行，而且效率低的问题。
本申请的上述目的是通过以下技术方案实现的：
本申请实施例提供一种基于数据拦截的浏览器操作回放方法，包括：
对用户操作记录进行统一化记录，得到操作元数据；其中，所述操作元数据包括：用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据；
基于虚拟dom结合所述操作元数据进行持久化存储；
基于持久化存储后的操作元数据进行回放。
进一步的，所述对用户操作记录进行统一化记录，得到操作元数据，包括：
在预设DOM Level 4API中,通过MutationObserver监听dom的变化，获取dom数据；
通过在元素上绑定onscroll方法，对scroll事件进行监听，获取scroll事件数据；
通过在元素上增加addEventListener方法，对mouse事件进行监听，获取mouse事件数据；
通过增加input事件监听方法，获取input元素数据；
通过拦截AudioBuffer的decodeAudioDat和createBuffer方法，获取音频buffer数据；
通过在canvas元素上添加click/move事件,获取canvas数据；
通过解析页面中外部文件的引用，获取font和css引用数据。
进一步的，所述基于虚拟dom结合所述操作元数据进行持久化存储，包括:
基于虚拟dom通过IndexedDB对所述操作元数据进行持久化存储。
进一步的，所述基于虚拟dom结合所述操作元数据进行持久化存储，包括:
基于虚拟dom通过集成SQLite的WASM方式，对所述操作元数据进行持久化存储。
进一步的，所述基于持久化存储后的操作元数据进行回放，包括：
通过调用预设API，基于所述操作元数据对原网页进行渲染，回放视频、音频、鼠标和键盘操作。
本申请的实施例提供的技术方案可以包括以下有益效果：
本申请涉及一种基于数据拦截的浏览器操作回放方法，包括对用户操作记录进行统一化记录，得到操作元数据；其中，所述操作元数据包括：用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据；然后基于虚拟dom结合所述操作元数据进行持久化存储；最后基于持久化存储后的操作元数据进行回放。如此，基于浏览器页面的数据拦截，可以是实现自动回放用户操作，并且通过对回放数据的播放，可以直观的反映出用户的操作路径，不需要专业的人员参与，也可以很容易的还原用户的使用场景，从而提高处理效率。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
图1为本申请实施例提供的一种基于数据拦截的浏览器操作回放方法的流程示意图；
图2为本申请另一实施例提供的一种基于数据拦截的浏览器操作回放方法的流程示意图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
目前对于web端用户的问题反馈，主要基于服务端收集的日志和用户回访，日志不能直观连贯的反应用户的操作，回访受限于时间和沟通成本，均不能很好的解决web端用户问题反馈的问题。
实施例
图1为本申请实施例提供的一种基于数据拦截的浏览器操作回放方法的流程示意图，图2为本申请另一实施例提供的一种基于数据拦截的浏览器操作回放方法的流程示意图，如图1、图2所示，本申请提供的基于数据拦截的浏览器操作回放方法，包括：
S101、对用户操作记录进行统一化记录，得到操作元数据。
即基于用户操作记录形成统一化的操作元数据，对用户操作记录获取，其中，操作元数据包括用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据。
具体的，统一化操作记录的范围，主要包括dom的变化、scroll事件的监听，mouse事件的监听，input元素的获取，音频buffer的变化，canvas的绘制，font的引用和css的引用。针对以上范围,可以使用以下方式逐个跟踪记录，得到对应数据。
对于dom变化，可以在DOM Level 4API中，新增了MutationObserver,用于监听dom的变化，该API执行逻辑是先观察，再执行，是一个异步的过程，相较于Mutation events，性能更优。
对于scroll事件，对于元素可以增加scroll event的监听，实际上就是在元素上绑定onscroll方法。
对于mouse事件，可以在元素上增加addEventListener方法，添加对click，dbclick，mouseover等方法,该部分内容为本领域的常用技术手段，再次不在进行更加相机的说明书。
对于input，以及对于单行输入，多行文本框，单项选择和多项选择,可以增加input事件监听输入的变化。而且，input事件也适用于启用了contenteditable的元素，以及开启了designMode的任意元素。另外，需要说明的是，在contenteditable和designMode的情况下，事件的target为当前正在编辑的宿主，而如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。
对于音频数据，可以通过拦截AudioBuffer的decodeAudioData和createBuffer方法，可以对于web正在调用或处理的音频进行获取操作，从而实现对网页中音频的记录，获取音频数据。
对于canvas，可以在canvas元素上添加click/move事件,从而拦截记录页面中canvas的内容，得到canvas数据。
对于font/css，可以通过解析页面中外部文件的引用获得。
S102、基于虚拟dom结合所述操作元数据进行持久化存储。
具体的，由于在本申请提供的基于数据拦截的浏览器操作回放方法中，统一化操作记录的数据量较大，显然不适合采用常规的localstorage或实时同步服务端的方式进行记录。所以在本申请提供的基于数据拦截的浏览器操作回放方法中，基于虚拟dom结合所述操作元数据进行持久化存储方式可以通过如序列化、反序列化、数据压缩，以及IndexedDB进行持久化。在实际应用工中，本申请中，持久化的方式可以采用以下两种方式中的一种，具体可以根据实际需求进行选择：
首先，可以通过IndexedDB实现持久化存储。IndexedDB就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB允许储存大量数据，提供查找接口，还能建立索引。需要说明的是，IndexedDB不属于关系型数据库(不支持SQL查询语句)，更接近NoSQL数据库。另外关于IndexedDB具体的存储限制为本领域常用的技术，具体可通过如下连接理解：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria，在此不再进行详细的说明。
另外，第二种方式就是通过WASM+SQLite实现持久化存储。在实际应用中，如果需要使用关系型数据库,在本申请提供的基于数据拦截的浏览器操作回放方法中，还可以wasm的方式，集成sqlite进来，这种方式门槛较高，但性能相较indexeddb方式更优秀。
S103、基于持久化存储后的操作元数据进行回放。
即通过调用预设API，基于所述操作元数据对原网页进行渲染，回放视频、音频、鼠标和键盘操作。
具体的，操作回放的逻辑基本上是对原网页进行渲染后，包括视频渲染、音频渲染、Canvas渲染以及帧渲染等，回放视频、音频、鼠标、键盘等的操作。在实际应用中，包括
web API中包括对这些输入设备的模拟事件，可以直接调用API完成。
本申请实施例提供的基于数据拦截的浏览器操作回放方法，包括：对用户操作记录进行统一化记录，得到操作元数据；其中，所述操作元数据包括：用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据；然后，基于虚拟dom结合所述操作元数据进行持久化存储；最后，基于持久化存储后的操作元数据进行回放。如此，通过对可供回放的数据结构进行定义，然后解析回放数据并进行回放，不必需要众多跨专业的人员揣摩用户的行为数据，实现主动解决用户问题反馈的目的，提高效率。
可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。
应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
上述提到的存储介质可以是只读存储器，磁盘或光盘等。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (5)

1.一种基于数据拦截的浏览器操作回放方法，其特征在于，包括：
对用户操作记录进行统一化记录，得到操作元数据；其中，所述操作元数据包括：用户操作过程中的dom数据、input元素数据、音频buffer数据、font和css引用数据、scroll事件数据、mouse事件数据以及canvas数据；
基于虚拟dom结合所述操作元数据进行持久化存储；
基于持久化存储后的操作元数据进行回放。
2.根据权利要求1所述的基于数据拦截的浏览器操作回放方法，其特征在于，所述对用户操作记录进行统一化记录，得到操作元数据，包括：
在预设DOM Level 4API中,通过MutationObserver监听dom的变化，获取dom数据；
通过在元素上绑定onscroll方法，对scroll事件进行监听，获取scroll事件数据；
通过在元素上增加addEventListener方法，对mouse事件进行监听，获取mouse事件数据；
通过增加input事件监听方法，获取input元素数据；
通过拦截AudioBuffer的decodeAudioDat和createBuffer方法，获取音频buffer数据；
通过在canvas元素上添加click/move事件,获取canvas数据；
通过解析页面中外部文件的引用，获取font和css引用数据。
3.根据权利要求1所述的基于数据拦截的浏览器操作回放方法，其特征在于，所述基于虚拟dom结合所述操作元数据进行持久化存储，包括:
基于虚拟dom通过IndexedDB对所述操作元数据进行持久化存储。
4.根据权利要求1所述的基于数据拦截的浏览器操作回放方法，其特征在于，所述基于虚拟dom结合所述操作元数据进行持久化存储，包括:
基于虚拟dom通过集成SQLite的WASM方式，对所述操作元数据进行持久化存储。
5.根据权利要求1所述的基于数据拦截的浏览器操作回放方法，其特征在于，所述基于持久化存储后的操作元数据进行回放，包括：
通过调用预设API，基于所述操作元数据对原网页进行渲染，回放视频、音频、鼠标和键盘操作。
CN202111193282.8A 2021-10-13 2021-10-13 基于数据拦截的浏览器操作回放方法 Pending CN113934962A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111193282.8A CN113934962A (zh) 2021-10-13 2021-10-13 基于数据拦截的浏览器操作回放方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111193282.8A CN113934962A (zh) 2021-10-13 2021-10-13 基于数据拦截的浏览器操作回放方法

Publications (1)

Publication Number Publication Date
CN113934962A true CN113934962A (zh) 2022-01-14

Family

ID=79278697

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111193282.8A Pending CN113934962A (zh) 2021-10-13 2021-10-13 基于数据拦截的浏览器操作回放方法

Country Status (1)

Country Link
CN (1) CN113934962A (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110191676A1 (en) * 2010-01-29 2011-08-04 Microsoft Corporation Cross-Browser Interactivity Recording, Playback, and Editing
CN111898055A (zh) * 2020-08-10 2020-11-06 冯帆 一种浏览器网页的录屏与回放方法
CN112035205A (zh) * 2020-08-31 2020-12-04 深圳前海微众银行股份有限公司 数据处理方法、装置、设备和存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110191676A1 (en) * 2010-01-29 2011-08-04 Microsoft Corporation Cross-Browser Interactivity Recording, Playback, and Editing
CN111898055A (zh) * 2020-08-10 2020-11-06 冯帆 一种浏览器网页的录屏与回放方法
CN112035205A (zh) * 2020-08-31 2020-12-04 深圳前海微众银行股份有限公司 数据处理方法、装置、设备和存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
陈德健等: "Smart SEP:基于Web图形操作记录与回放的在线同步教学平台", 《计算机科学》, 15 November 2014 (2014-11-15) *

Similar Documents

Publication Publication Date Title
US11567736B2 (en) Systems and methods for providing an instant communication channel within integrated development environments
US20230168886A1 (en) Systems and methods for providing an instant communication channel within integrated development environments
US9696894B2 (en) Analytic process design
US10747952B2 (en) Automatic creation and server push of multiple distinct drafts
JP5325169B2 (ja) ウェブアプリケーションの操作再現方法およびシステム
US20210294855A1 (en) Method for processing information, electronic device and storage medium
CN111898055A (zh) 一种浏览器网页的录屏与回放方法
US20140317081A1 (en) System and method for session data management
CN115576974B (zh) 数据处理方法、装置、设备和介质
JP2022041865A (ja) テンプレートに基づくエクセル文書のオンライン作業システム
CN113934962A (zh) 基于数据拦截的浏览器操作回放方法
CN111694810B (zh) 数据仓库的创建方法、装置、电子设备及可读存储介质
CN107885807B (zh) 一种文件保存方法、装置、智能平板和存储介质
CN110275893A (zh) 一种数据操作方法及装置
CN112035159B (zh) 一种稽核模型的配置方法、装置、设备及存储介质
CN112527868A (zh) 一种数据获取方法、装置、设备及存储介质
CN115134353A (zh) 文件的自动上传方法、文件预览方法、装置、介质及设备
CN107741992B (zh) 会议记录的网络存储方法、装置、智能平板和存储介质
US20200065162A1 (en) Transparent, event-driven provenance collection and aggregation
US20120159257A1 (en) Control computer and report management method using the same
CN110928898A (zh) 数据采集方法、数据采集装置、存储介质及电子设备
US12039416B2 (en) Facilitating machine learning using remote data
US20210264312A1 (en) Facilitating machine learning using remote data
CN116611418B (zh) 基于在线编辑的报告处理方法、装置、电子设备及介质
CN116204593A (zh) 一种数据实时同步的方法、系统、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination