javascript - 我的 HTML5 网络应用程序崩溃了，我不知道如何调试

Question

我使用 HTML5 canvas 标签和一些音频编写了一个文字游戏。我在 linux 系统上的 chrome web 浏览器上开发了应用程序。最近在测试阶段，在 Mac 上的 safari 5.0.3 上试过，网页卡住了。不仅 Canvas 元素，而且页面上的交互元素都卡住了。我在开发时曾在 google chrome 上遇到过这个问题，但由于在此之前控制台没有抛出任何错误，所以我不太相信它。现在根据要求，我应该同时支持 chrome 和 safari，但是 safari 上的这种糟糕表现让我感到震惊，我看不出会抛出什么错误可能导致这种情况。更糟糕的是，在我运行 ubuntu 的 2 岁旧 macbook 上，使用此应用程序时的 CPU 使用率达到 70-80%...我只能同情使用 mac 操作此应用程序的人，这无疑是一个更重的操作系统。有人可以帮我解决一个问题，我可以从这个地方着手找出导致此问题的确切原因。

我已经在 google chrome 控制台上的这个 webapp 上运行配置文件，并注意到堆中的 spanshot 值随着游戏的进行而稳步增加，特别是 (root) 值，它增加了 900 个计数。任何帮助将不胜感激!

谢谢

编辑:我不知道这是否有帮助，但我注意到即使在应用程序无响应后刷新页面，页面也会重新加载，我仍然无法与页面元素交互，但选项卡滚动条继续工作，我可以完全看到我的应用程序窗口。因此，总而言之，该选项卡停止接受页面内的任何类型的用户交互。

Edit2:不。它仍然不起作用...双击 Canvas 元素时应用程序崩溃。控制台也没有抛出任何错误! =/我注意到这个问题只存在于 safari 中!

Edit3:好的，所以我今天进行了一些其他测试。我仅隔离了 HTML5 小部件及其 HTML 数据，并在本地 Safari 上运行它以重现错误。 las，效果很好!所以我尝试在没有 Facebook 集成的情况下从我的服务器玩游戏，它再次运行良好!所以这个问题只出现在 MAC OSX 上的 safari 上，而小部件作为 Facebook 应用程序出现在 Facebook canvas 上。我很难为这个应用程序想出一个简化的测试用例场景……=/它变得更奇怪了，这个游戏在 windows 的 safari 上运行良好。此外，在该选项卡卡住后，其他选项卡继续响应并运行良好。单击关闭按钮和其他内容时此选项卡也会关闭，但是如果我在同一选项卡卡住后在同一选项卡上加载另一个页面，该页面将加载到选项卡 Canvas 中，但我无法与之交互。连 google.com 都不行!所以我确定我的游戏没有错误，但它是一个 safari 错误...将很快提交错误报告，感谢所有帮助的人...:)

Answer 1

你应该做什么，一句话:用尽可能少的代码重现问题。

开始删除您应用的部分内容，直到您发现没有任何内容可以删除，同时仍然保留错误。首先丢弃外部资源(css、图像等)，只留下 html 和 javascript。尝试删除音频。尝试尽可能多地删除游戏逻辑。尝试删除所有用户输入代码。

如果这确实是 Safari 本身的错误而不是您的代码中的错误，则应该可以创建一个非常的小代码示例。除非你知道了，如果没有任何细节或示例，说“我的网络应用程序在 safari 中不起作用”，你将一事无成。