我知道可以记录鼠标移动、滚动和击键。但是对文档的更改呢？如何记录文档的更改？
这是我的尝试。必须有更好更简单的方法来存储所有事件吗？
我很感谢我能得到的所有提示!
<!DOCTYPE html>
<html>
<head>
<title>Record And replay javascript</title>
</head>
<body id="if_no_other_id_exist">
<div style="height:100px;background:#0F0" id="test1">click me</div>
<div style="height:100px;background:#9F9" class="test2">click me</div>
<div style="height:100px;background:#3F9" id="test3">click me</div>
<div style="height:100px;background:#F96" id="test4">click me</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var the_time_document_is_redy = new Date().getTime();
var the_replay = '';
$('div').live("click", function (){
var the_length_of_visit = new Date().getTime() - the_time_document_is_redy;
// check if the element that is clicked has an id
if (this.id)
{
the_replay =
the_replay
+
"setTimeout(\"$('#"
+
this.id
+
"').trigger('click')\","
+
the_length_of_visit
+
");"
;
alert (
"The following javascript will be included in the file in the replay version:\n\n"
+
the_replay
) // end alert
} // end if
// if it does not have an id, check if the element that is clicked has an class
else if (this.className)
{
// find the closest id to better target the element (needed in my application)
var closest_div_with_id = $(this).closest('[id]').attr('id');
the_replay =
the_replay
+
"setTimeout(\"$('#"
+
closest_div_with_id
+
" ."
+
this.className
+
"').trigger('click')\","
+
the_length_of_visit
+
");"
;
alert (
"The following javascript will be included in the file in the replay version:\n\n"
+
the_replay
) // end alert
} // end if
});
// fall back if there are no other id's
$('body').attr('id','if_no_other_id_exist');
// example of how it will work in the replay version
setTimeout("$('#test1').trigger('click')",10000);
});
</script>
</body>
</html>
最佳答案
我对这个问题感到好奇并在这里实现了概念验证
https://codesandbox.io/s/jquery-playground-y46pv?fontsize=14&hidenavigation=1&theme=dark
使用演示
- 按录音，点击一些圆圈，在输入中输入内容，再次按录音停止录音，最后点击播放。
- 您可以通过编辑
REPLAY_SCALE来调整播放的大小源代码中的变量。 - 您可以通过更改
SPEED来控制播放速度源代码中的变量。 - 注意，我只在 Chrome 上测试过。
实现细节:
- 它监视 mousemove、click 和 typing 事件。它应该易于扩展以添加其他功能，例如滚动、调整窗口大小、悬停、焦点等。
- 回放创建一个
<iframe>，注入(inject)原始 HTML 并重播用户事件。 - 事件监听器绕过任何
event.stopPropagation()通过在监听文档上的事件时使用捕获。 - 使用
zoom以不同的分辨率显示回放CSS3。 - 可以覆盖透明 Canvas 来绘制鼠标的轨迹线。我只使用一个简单的 div，所以没有跟踪线。
注意事项:
假设我们正在捕获真实网站上的用户事件。由于所提供的页面在现在和回放之间可能会发生变化，因此我们在 iframe 中回放记录时不能依赖客户端的服务器。相反，我们必须对 html、记录期间发出的所有 ajax 请求和资源请求进行快照。在演示中，为了简单起见，我只对 HTML 进行快照。然而在实践中，所有额外的请求都必须在客户端页面上下载时实时存储在服务器上。此外，在回放期间，重要的是使用与用户感知到的相同的时间线回放请求。为了模拟请求时间线，还必须存储每个请求的偏移量和持续时间。在客户端下载所有页面请求时上传它们会减慢客户端页面的速度。优化此上传的一种方法是在上传之前对请求的内容进行哈希处理，如果服务器上已经存在哈希，则不需要重新上传请求数据。此外，一个用户的 session 可以利用另一个用户使用此哈希方法上传的请求数据。最后，浏览器本身不需要上传，只要所有请求都通过中央服务器，这种快照可以发生在服务器端，以免影响用户体验。
上传所有用户事件时需要仔细考虑。由于将生成大量事件，这意味着大量数据。也许可以对事件进行一些压缩，例如丢失一些不太重要的 mousemove 事件。不应针对每个事件发出上传请求，以尽量减少请求数量。应该缓冲事件，直到在上传每批事件之前达到缓冲区大小或超时。应该使用超时，因为用户可以随时关闭页面，从而丢失一些事件。
在回放期间，应模拟传出的 POST 请求，以防止在其他地方重复事件。
在播放期间，应该欺骗用户代理，但这在呈现原始显示时可能不可靠。
自定义录制代码可能与客户端代码冲突。例如查询。需要命名空间来避免这种情况。
在某些边缘情况下，键入和单击可能无法重现与原始结果相同的 HTML，例如随机数，日期时间。变异观察者可能需要观察 HTML 变化，尽管并非所有浏览器都支持。屏幕截图在这里可能会有用，但可能证明 OTT。
关于javascript - 录制和重播 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8093961/