摘要：用于將及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識(shí)則是將記錄的數(shù)據(jù)結(jié)構(gòu)重建為對(duì)應(yīng)的。用于記錄中的所有變更則是將記錄的變更按照對(duì)應(yīng)的時(shí)間一一重放。表示觀察變動(dòng)時(shí)，是否需要記錄變動(dòng)前的屬性值。該方法返回變動(dòng)記錄的數(shù)組。

摘要： 網(wǎng)頁(yè)應(yīng)該如何錄屏呢？

作者：Winty

原文：用戶行為錄幀調(diào)研

Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。

首先，每一次會(huì)話都有一個(gè)唯一的session ID，這是串聯(lián)起所有行為的紐帶。

其次，用戶行為又分成兩個(gè)部分，其一是用戶的操作，比如鼠標(biāo)滑動(dòng)，點(diǎn)擊，頁(yè)面滾動(dòng)等，其二是頁(yè)面的變化。這兩者我們都統(tǒng)稱為用戶行為，記錄在同一個(gè)隊(duì)列中。

一開始的時(shí)候，系統(tǒng)會(huì)記錄下初始的頁(yè)面作為第一幀，這是唯一的一次完整頁(yè)面記錄。

針對(duì)用戶操作，我們會(huì)記錄事件的類型，鼠標(biāo)位置等關(guān)鍵信息，保存到隊(duì)列中。

針對(duì)頁(yè)面變動(dòng)，我們會(huì)起一個(gè)mutationObserve偵聽頁(yè)面的改動(dòng)，每次只記錄改動(dòng)的部分，保存到隊(duì)列中。

無論是事件還是頁(yè)面改動(dòng)，都是對(duì)等的一幀，每一幀都會(huì)有當(dāng)前時(shí)間，與上一幀間隔時(shí)間等基本信息用戶還原

一旦出錯(cuò)，SDK就把隊(duì)列發(fā)送到監(jiān)控系統(tǒng)，并清空當(dāng)前隊(duì)列。

還原端根據(jù)記錄的行為隊(duì)列，根據(jù)時(shí)間逐一播放出來。最終形成一個(gè)類似于視頻的效果。

初步思路

方式一：

前端收集信息，首先，初始化的時(shí)候記錄一個(gè)頁(yè)面的初始狀態(tài)，然后利用 MutationObserver 監(jiān)聽dom的改變事件，然后監(jiān)聽所有的鼠標(biāo)事件、滾動(dòng)事件等等所有的頁(yè)面變化。

在合理的時(shí)機(jī)把這些信息隊(duì)列上傳到服務(wù)器，如頁(yè)面出錯(cuò)時(shí)等。

后臺(tái)分析前端收集到的信息，轉(zhuǎn)為圖片，然后形成"視頻"，或者用戶行為棧。提供對(duì)應(yīng)的調(diào)用 api。

前端需要查找問題時(shí)，根據(jù)用戶id等信息找到對(duì)應(yīng)的出錯(cuò)棧。

方式二：

前端根據(jù) html 轉(zhuǎn)為對(duì)應(yīng)的圖片(可以轉(zhuǎn)為 base64 格式)

將圖片發(fā)送給后臺(tái)

后臺(tái)將圖片按序組成"視頻"

現(xiàn)有SDK

Fundebug

html2canvas

puppeteer

rrweb+rrweb-player+rrweb-snapshot

html2canvas 是通過分析頁(yè)面中已加載好的 DOM 元素，然后 canvas 將生成的 DOM 節(jié)點(diǎn)繪制在畫布上，最后轉(zhuǎn)換為圖片。它不是真正的截屏，只是根據(jù)頁(yè)面元素信息還原出圖片，所以并不是 100% 和頁(yè)面相同的。

局限性

頁(yè)面中的圖片不能跨域

不是所有的 css 特性都支持，如不支持 box-shadow、filter 等

不支持截取插件內(nèi)容,如 Flash

不支持 iframe 內(nèi)容

瀏覽器支持

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Edge

Safari 6+

Puppeteer 是 Google Chrome 團(tuán)隊(duì)官方的無界面（Headless）Chrome 工具，它是一個(gè) Node 庫(kù)，提供了一個(gè)高級(jí)的 API 來控制 DevTools協(xié)議上的無頭版 Chrome 。

局限性

Puppeteer 需要 Chromium。其主要應(yīng)用在自動(dòng)化測(cè)試上。

功能

生成頁(yè)面的截圖和PDF。

抓取SPA并生成預(yù)先呈現(xiàn)的內(nèi)容（即"SSR"）。

從網(wǎng)站抓取你需要的內(nèi)容。

自動(dòng)表單提交，UI測(cè)試，鍵盤輸入等

創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的JavaScript和瀏覽器功能，直接在最新版本的Chrome中運(yùn)行測(cè)試。

捕獲您的網(wǎng)站的時(shí)間線跟蹤，以幫助診斷性能問題。

結(jié)論html2canvas 更適合于 C 端的用戶行為截圖跟蹤，而 Puppeteer 適用于自動(dòng)化測(cè)試。

rrweb 主要由 3 部分組成：

rrweb-snapshot，包含 snapshot 和 rebuild 兩個(gè)功能。snapshot 用于將 DOM 及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識(shí)；rebuild 則是將 snapshot 記錄的數(shù)據(jù)結(jié)構(gòu)重建為對(duì)應(yīng)的 DOM。

rrweb，包含 record 和 replay 兩個(gè)功能。record 用于記錄 DOM 中的所有變更（mutation）；replay 則是將記錄的變更按照對(duì)應(yīng)的時(shí)間一一重放。

rrweb-player，為 rrweb 提供一套 UI 控件，提供基于 GUI 的暫停、快進(jìn)、拖拽至任意時(shí)間點(diǎn)播放等功能。

rrweb適用場(chǎng)景：

用戶行為分析；

遠(yuǎn)程debug；

錄制操作；

實(shí)時(shí)協(xié)作；

局限性

社區(qū)資源較少

部分代碼用較舊的模式寫的，有未知坑

最終結(jié)論

綜合來看，結(jié)合思路一，基于 rrweb 來開發(fā)是最可行最快捷的。

目前，我基于 rrweb 已經(jīng)做了個(gè) demo 出來。以下是初步成果：demo代碼

rrweb：打開 web 頁(yè)面錄制與回放的黑盒子

Mutation Observer API 用來監(jiān)視 DOM 變動(dòng)。DOM 的任何變動(dòng)，比如節(jié)點(diǎn)的增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)，這個(gè) API 都可以得到通知。

特點(diǎn)

它等待所有腳本任務(wù)完成后，才會(huì)運(yùn)行（即異步觸發(fā)方式）。

它把 DOM 變動(dòng)記錄封裝成一個(gè)數(shù)組進(jìn)行處理，而不是一條條個(gè)別處理 DOM 變動(dòng)。

它既可以觀察 DOM 的所有類型變動(dòng)，也可以指定只觀察某一類變動(dòng)。

example

Select the node that will be observed for mutations var targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
    for (var mutation of mutationsList) {
        if (mutation.type == "childList") {
            console.log("A child node has been added or removed.");
        } else if (mutation.type == "attributes") {
            console.log(
                "The " + mutation.attributeName + " attribute was modified."
            );
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

observe方法接受兩個(gè)參數(shù)，第一個(gè)是所要觀察的DOM元素是article，第二個(gè)是所要觀察的變動(dòng)類型（子節(jié)點(diǎn)變動(dòng)和屬性變動(dòng)),方法調(diào)用時(shí)必須指定一種或多種變動(dòng)類型，否則報(bào)錯(cuò)，變動(dòng)類型如下：

boolean childList = false;
boolean attributes;
boolean characterData;
boolean subtree = false; //表示是否將該觀察器應(yīng)用于該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)。
boolean attributeOldValue; //表示觀察attributes變動(dòng)時(shí)，是否需要記錄變動(dòng)前的屬性值。
boolean characterDataOldValue; //表示觀察characterData變動(dòng)時(shí)，是否需要記錄變動(dòng)前的值。
sequence attributeFilter;//數(shù)組，表示需要觀察的特定屬性（比如["class","src"]）

disconnect方法用來停止觀察。調(diào)用該方法后，DOM 再發(fā)生變動(dòng)，也不會(huì)觸發(fā)觀察器。 takeRecords方法用來清除變動(dòng)記錄，即不再處理未處理的變動(dòng)。該方法返回變動(dòng)記錄的數(shù)組。

MutationRecord對(duì)象

DOM 每次發(fā)生變化，就會(huì)生成一條變動(dòng)記錄（MutationRecord 實(shí)例）。該實(shí)例包含了與變動(dòng)相關(guān)的所有信息。Mutation Observer 處理的就是一個(gè)個(gè)MutationRecord實(shí)例所組成的數(shù)組。 MutationRecord對(duì)象包含了DOM的相關(guān)信息，有如下屬性：

type：觀察的變動(dòng)類型（attribute、characterData或者childList）。
target：發(fā)生變動(dòng)的DOM節(jié)點(diǎn)。
addedNodes：新增的DOM節(jié)點(diǎn)。
removedNodes：刪除的DOM節(jié)點(diǎn)。
previousSibling：前一個(gè)同級(jí)節(jié)點(diǎn)，如果沒有則返回null。
nextSibling：下一個(gè)同級(jí)節(jié)點(diǎn)，如果沒有則返回null。
attributeName：發(fā)生變動(dòng)的屬性。如果設(shè)置了attributeFilter，則只返回預(yù)先指定的屬性。
oldValue：變動(dòng)前的值。這個(gè)屬性只對(duì)attribute和characterData變動(dòng)有效，如果發(fā)生childList變動(dòng)，則返回null。

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了20億+錯(cuò)誤事件，付費(fèi)客戶有陽(yáng)光保險(xiǎn)、核桃編程、荔枝FM、掌門1對(duì)1、微脈、青團(tuán)社等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！