前端开发人员收到测试发来的 bug 后，通常比较头疼复现的问题。

即使测试人员录了视频，照着一步步操作也不一定能复现，例如bug是与当时的数据相关的。

为了解决这个问题，Firefox 推出了一个重磅新功能：web reply。

看名字就知道它的功能是“页面回放”，这个回放可不是像录屏一样，而是完全真实的回放：

JavaScript、DOM、CSS 的行为都完全像录制时一样重播。

而且在重放时，你可以随意检查页面上的各种元素、查看 console 日志、断点调试。

想象一下，测试把页面过程录下来，发给前端，前端导入进行回放，随意的调试，这是多么的高效。

就像时间旅行一样，所以对于前端本地开发，或者bug修复，是极其便利的。

目前是测试版，只支持 MacOS，官方说等稳定后才会支持跨平台。

想体验的话需要下载 nightly 版本，下载地址：

https://www.mozilla.org/zh-CN/firefox/channel/desktop/#nightly

我体验了一下，不稳定，非常消耗内存，将近700M。

期待正式发布，到时将会大幅提升前端开发效率。

快点通知你的前端小伙伴吧，早点了解一下这个很酷的功能。

项目地址：

https://firefox-replay.com/

前端开发利器 Web Replay的更多相关文章

  1. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  2. 前端开发利器-Brackets IDE

    是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...

  3. 移动前端开发和 Web 前端开发的区别

    http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...

  4. 移动前端开发和 Web 前端开发的区别是什么

    可以分成两部分理解1.服务器端开发,也叫后台开发,这是唯一的,对应不同的平台,他负责数据的分发与存储,和一些逻辑的处理.逻辑处理的多少由业务的复杂程度决定.服务端相对独立,与平台没啥关系. 2..1中 ...

  5. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  6. [转] 前端开发利器--Brackets 的七种武器和旁门左道

    转自:http://www.jianshu.com/p/ff7798aa4548 Brackets是Adobe开发的web编辑器,是一款免费开源.多平台支持的软件,并在于GitHub上维护.Brack ...

  7. 前端开发利器 Sublime Text 3 使用技巧和总结笔记

    这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...

  8. 葡萄城首席架构师：前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  9. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

随机推荐

  1. dijkstra堆优化(multiset实现->大大减小代码量)

    例题: Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣 ...

  2. vue-learning：41 - Vuex - 第二篇：const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  3. es6笔记 day2---解构赋值

    解构赋值 这个知识点非常有用,特别是在做数据交互的时候(Ajax).那么它是怎么使用的呢? 它就是这么使用的↓ let [a,b,c] = [12,5,6];  这就是解构赋值 注意:左右两边,结构格 ...

  4. KAFKA报错：COMMIT CANNOT BE COMPLETED SINCE THE GROUP HAS ALREADY REBALANCED AND ASSIGNED THE PARTITIONS TO ANOTHER MEMBER

    转载:https://www.greenhtml.com/archives/Commit-cannot-be-completed-since-the-group-has-already-rebalan ...

  5. PyTorch深度学习：60分钟入门(Translation)

    这是https://zhuanlan.zhihu.com/p/25572330的学习笔记. Tensors Tensors和numpy中的ndarrays较为相似, 因此Tensor也能够使用GPU来 ...

  6. 人生苦短，我用Python（4）

    1.创建数值元组: 在Python中,使用tuple()函数直接将range()函数循环出来的结果转换为数值元组. tuple(data) #tuple()函数的基本语法 data表示可以转换为元组的 ...

  7. com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1680 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    这个错误是由于mysql的一个系统参数max_allowed_packet设置的值过小引起的 解决这个错误的方法就是修改这个参数的值, linux系统中我们在etc目录下找到my.cnf这个文件,打开 ...

  8. [梁山好汉说IT] 如何理解一致性Hash

    [梁山好汉说IT] 如何理解一致性Hash 0x00 摘要 用梁山酒店分配客人为例来理解一致性Hash. 0x01. 与经典哈希方法的对比 经典哈希方法:总是假设内存位置的数量是已知且固定不变的.因为 ...

  9. ELK学习实验012：Logstash的安装和使用

    一 logstash安装 1.1下载包 [root@node1 ~]# cd /usr/local/src/ [root@node1 src]# wget https://artifacts.elas ...

  10. Java正则表达式学习与记录

    转载自:http://www.runoob.com/java/java-regular-expressions.html 正则表达式定义了字符串的模式,用于搜索.编辑或处理文本. 1.正则表达式中字符 ...