BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

JavaScript Error Recorder使用户可以在浏览器中直接报告缺陷

| 作者 James Chesters 关注 2 他的粉丝 ,译者 夏雪 关注 0 他的粉丝 发布于 2014年8月30日. 估计阅读时间: 5 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

Bogomil Shopov和Robert Nyman发布了Usersnap Console Recorder,该套件用于web项目可视化标注式的交流(通过截屏)。

针对最终用户缺乏缺陷跟踪技术和经验这样的特点,Usersnap将目标定为让用户能够以可视化的方式直接在浏览器中轻松地报告缺陷。为此,控制台对JavaScript错误进行了记录,以向修复缺陷的负责人提供所有必需的信息,包括console.log信息和元信息。

在《JavaScript Error- and XHR Log Recording With Every Bug Report》这篇文章中,Shopov说:

每个错误或日志包括一个与网络时间协议(NTP)同步的时间戳,完整的信息包括JavaScript源文件和行号,你可能已经对Firebug的开发者控制台有所了解了,它格式与之是比较类似的。

每个由 console.log、console.info、console.warn或者console.error发布的调试日志都已经得到恰当地格式化(包括递归对象或数组的格式化和浏览)。

Shopov接着举了一个例子:

在页面滚动时,可以通过使用一个固定元素的top属性让其他的元素与之保持对齐。然而,由于标签重写了,元素#inexistent已经不存在了。这就导致offset()方法返回null,属性top也就不能再访问了:

function clicky() { 
   console.info("Accessing a property of an undefined object");
   console.log("calculating scroll top %d", $('#inexistent').offset().top); 
};

Usersnap Console Recorder的JavaScript日志会显示如下内容:

JavaScript社区对这款控制台有各种不同的反应。在Reddit上对Usersnap(缺陷报告的圣杯)的讨论中,用户workaholicanonymous对之大加赞赏,说道:

毫不夸张地说,我今天上午正在思考这些东西的开发呢。说真的,谢谢你们。

但在Reddit上的其他地方,在对Web开发者的强力王国。耶酥受难日的解读!的讨论中,一些用户还不太清楚Usersnap的控制台提供的好处。用户 X1R0n评论说

你用免费的Google Analytics(http://davidwalsh.name/track-errors-google-analytics )也能实现同样的效果。

Usersnap的共同创立者Gregor Dorfbauer回复了不同的意见,

那实际上没有什么可比性。Google Analytics解决方案只是收集随机的JavaScript错误和jQuery的XHR。

你看不到用户的完整会话,正如你要在用户的浏览器上打开开发者控制台,根本不要想“看过去的信息”。它和浏览器的完整截屏配合在一起使用可以很轻松地再现和解决问题。

还有些人担心隐私问题。用户codepsycho

我本人是不会用它的,我的项目工作受保密协议的约束(所以实际上Usersnap保存所有的截屏并不是太理想的方式)

Shopov向InfoQ回应了这个疑问,说:

虽然我们把截屏存放在了我们的服务器上,但它们会得到充分的保护。如果客户端有安全方面的需要,我们会通过以安全通道传送的方式去集成合作伙伴(比如Trello、Kanbanize、Basecamp)甚至是客户的服务。我们可以保证只让客户能够看到这些截屏和数据,除了客户其他人谁都看不到。

客户也可以在任何时间要求删除所有的截屏:我们尊重我们的客户以及访问者的隐私。

Usersnap与开源社区是一种开放的关系,并为源项目提供免费的许可证。Shopov说,Usersnap团队也非常有兴趣从InfoQ的用户这里得到反馈意见,很希望听你们谈谈Usersnap如何使你们的生活变得更加的便利,如何使你们的工作变得更加的高效,如何使你们可以快乐地享受工作。

查看英文原文:JavaScript Error Recorder Lets Users Report Bugs in Browser

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT