使用BugReplay快速消除错误

作为 Web 开发人员，您一定会遇到不太精通技术的客户。一些客户可能希望您为他们创建一个新网站，而其他客户可能只想对特定部分进行更改或添加新功能。情况通常是这样的：

1. 您更新网站的一部分，检查一切是否正常，然后上床睡觉。

2. 第二天，您醒来却发现客户发来的电子邮件或消息称网站未按预期运行。

3. 您开始想知道是什么不工作并在您自己的设备上打开该网站。此时，您可能能够重现客户正在谈论的问题并修复它。但是，在某些不幸的情况下，网站似乎运行正常，您将无法看到客户在抱怨什么。

4. 这就是麻烦开始的时候。该网站可能不适用于您的客户以及其他许多人，但您不知道出了什么问题以及如何解决问题。

5. 您开始询问客户什么不工作，他们正在使用的浏览器，他们到底在做什么等，希望能够在您的最终重现问题。有时您可以重现该问题，但有时您不能。

整个过程对您和您的客户来说都非常令人沮丧。在这样的情况下，我希望我可以坐在客户旁边，亲自看到一切。 

BugReplay可以帮助你做一些非常相似的事情。您不再需要向您的用户询问有关他们的浏览器、cookie、插件等的大量问题。您所要做的就是给他们一个链接，他们可以单击该链接开始浏览器记录。

您也可以使用BugReplay进行内部测试。在本文中，我们将介绍该软件的所有功能，这些功能可以使网站的内部测试或提供出色的客户支持变得轻而易举。

BugReplay 记录浏览器选项卡中可见的所有内容

每当您询问用户他们为重现错误所遵循的步骤时，您永远无法确定用户没有错过任何步骤。BugReplay 通过记录用户在尝试重现错误时所做的一切来帮助您克服这个非常常见的问题。这不仅在解决客户投诉时很有帮助，而且还加快了内部测试的速度，使整个过程非常高效。

正如您在此视频中看到的，BugReplay 记录了用户执行的每个操作，从按钮单击到上下滚动浏览器窗口。

虽然查看用户在您的网站遇到问题时所做的事情很有帮助，但仍然很难知道用户安装的任何插件是否干扰了脚本或用户是否禁用了 cookie 等。只需观看上面的视频，您可能会断定图像未显示，因为检索图像的调用失败。 

也有可能检索到的图像没有任何错误，但由于本应将它们排列在两个不同列中的代码存在问题，它们没有显示出来。

此时您所能做的只是猜测并希望有一种方法可以让您查看所有网络调用以及 JS 控制台来确定出了什么问题。幸运的是，BugReplay 还记录了所有的网络请求和响应。 

这些呼叫都与屏幕录制同步，以帮助您准确了解何时触发网络呼叫。可以根据请求的域、MIME 类型和 HTTP 状态等多种因素对调用进行过滤。以下视频向您展示了 BugReplay 如何帮助您快速确定是否有任何网络调用导致错误.

在视频中，尝试观察单击右侧的“设置”图标并应用不同的过滤器如何更改“网络流量”选项卡中显示的请求列表。在任何给定时间仅应用突出显示的过滤器。您还应该看到“网络流量”选项卡在开始时没有显示任何呼叫。这是因为只有在发出请求后才会将调用添加到选项卡中。知道何时触发呼叫对于找出应用程序或网站出了什么问题大有帮助。

当您处理可以使用不同 HTTP 状态代码和 MIME 类型发出大量请求的网站时，过滤器会非常有用。在下图中，我显示了按域过滤请求并选择localhost的结果。如您所见，我们的网络调用按预期触发。

您还可以单击任何网络调用以了解有关它的更多信息，例如请求的持续时间。您还可以检查请求和响应标头。 

以下屏幕截图显示了我们第二个请求的详细信息。如您所见，我们正在返回 JSON 响应。这意味着应该将图像放置在两个不同列中的代码一定有问题。

就像过滤网络请求一样，您还可以根据域、级别或来源过滤javascript日志选项卡 下的所有控制台消息。在这种情况下，我们正在寻找错误消息，这就是我们将级别过滤器设置为error的原因。单击要检查的错误后，您将看到有关它的更多详细信息。这是在我们的案例中阻止图像显示的错误的屏幕截图。

多亏了 BugReplay，我们现在知道了库以及阻止图像显示的确切功能。您可以看到该软件使开发人员调试他们的网站变得多么容易。

内部测试和客户支持

如果您将 BugReplay 用于内部测试或客户支持，这并不重要。该软件以相同的方式记录所有网络调用和控制台日志。但是，请记住，您（或您的用户）需要为这些目的使用不同的浏览器扩展程序，并且过程也略有不同。

以下是使用 BugReplay 进行内部测试时要遵循的步骤：

1. 您需要做的第一件事是注册并创建一个帐户。您可以在前 30 天免费使用该软件。 

2. 在下一步中，您可以下载适用于 chrome 的 BugReplay 扩展程序。如果您主要使用 Firefox 进行工作，则可以下载BugReplay Firefox 扩展 。
   

3. 安装扩展程序后，您只需单击其中的“开始录制”按钮即可记录错误。 

4. BugReplay 还允许您在保存之前重播视频，以确保视频正确捕获所有必要的细节。您可以为每个记录指定一个可选的标题和描述，以便以后识别它。

除了录制视频，您还可以截取一个或多个屏幕截图以指出网站中的错误。

如果您的用户想要报告您网站中的错误，他们将不得不下载另一个名为“ BugReplay 反馈”的扩展程序。首先，您必须生成一个链接，用户可以从中下载扩展。该链接可以通过单击您帐户中 的“请求反馈报告”选项卡来生成。

您也可以为链接指定标题和到期日期。成功安装后，该扩展会为用户提供一些易于遵循的说明，以便他们轻松记录错误。用户还可以选择提供错误的标题和描述以及电子邮件地址以进行任何进一步的通信。

由于 BugReplay 记录了从用户采取的步骤到网络调用和控制台日志的所有内容，因此您的用户可以更轻松地提交详细的错误报告，而不会因大量问题而感到沮丧。我还想指出，BugReplay 扩展的反馈不会让用户访问您的任何其他视频或仪表板。 

更多 BugReplay 功能和集成

如果您决定使用 BugReplay 进行内部测试，您可能会与一个团队一起工作。团队中的每个人都可以访问彼此的报告，使他们可以轻松地一起工作以解决错误。您可以邀请其他人加入您的团队，方法是在您的 BugReplay 帐户页面右上角单击您的姓名，然后输入您要邀请的人员的姓名和电子邮件地址。

有时，您可能想与不在您团队中的人分享错误报告。BugReplay 允许您为每个视频创建一个可共享的 URL，然后让任何拥有链接的人都可以访问该视频。您可以通过单击仪表板中该视频旁边的共享链接来共享视频。相关人员观看视频后，您可以通过单击取消共享来撤销共享URL。

如果您和您的团队使用 GitHub 或 Jira，则允许您直接使用 BugReplay 向它们提交问题是有意义的。BugReplay 团队已经写了一篇详细的文章，概述了 集成 JIRA 的所有必要说明。 

将 BugReplay 与 GitHub 集成也很容易。您所要做的就是单击帐户页面上 的通知和集成 ，然后在添加集成下选择GitHub 问题跟踪器。同样，您可以按照屏幕上的说明将 BugReplay 与 Slack 集成。

如果您想在您的用户提交错误报告时收到一封电子邮件，您可以向 BugReplay 提供一个或多个您希望收到通知的电子邮件地址。

BugReplay 的所有这些功能使其成为内部测试您的网站并创建团队中每个人都可以访问的详细报告的最佳工具之一。这是 BugReplay 的众多快乐用户之一的推荐信。

BugReplay 大大减少了我的团队输入繁琐的重现步骤的需要，并且几乎消除了错误报告中的不确定性——我们的开发团队可以使用 BugReplay 立即开始进行故障排除。
— Matt Viirlee，项目经理

最后的想法

BugReplay 使您可以很容易地为您的客户提供出色的客户支持，并通过提供一些有用的工具显着加快内部测试。您的用户或团队成员创建的任何错误报告现在都对整个团队可见。查看所有网络调用和控制台日志的能力将为您提供最详细的错误报告，而不会用一个关于错误的问题来打扰您的客户。

如果您一直在寻找可以帮助您的用户或团队创建详细错误报告的工具，BugReplay 可能会满足您的所有需求。由于您可以 在前 30 天内无需支付任何费用即可注册 BugReplay 帐户 ，因此我建议您尝试一下。如果一切顺利，您将拥有一个让您的客户和内部测试团队都满意的神奇工具。