跟踪Web应用程序中所有Javascript的执行情况

Question

情况如下：复杂的Web应用程序无法正常工作，并且可能会始终如一地产生不需要的行为。问题的原因尚不清楚。

提案：跟踪所有javascript代码的执行路径。本质上，生成两个怪异的日志，然后可以将其输入diff算法以确定与bug相关的行为开始发散的位置（因为应用程序行为不明显，并且理解并获取实际JS代码的副本）由于必须切换到Web检查器并从Web检查器中复制出许多页面，因此运行起来很困难。所有页面都与Perl代码动态拼接在一起这一事实，其中JS代码的重要部分仅存在于（动态......）Perl字符串）。

Chrome中的Web Inspector没有关于记录执行跟踪的选项。基本上我想要的是按执行顺序执行的每一行JS的日志。鉴于JS VM是单线程的，我认为这不是一件难事。问题很简单，现有的面向用户的工具并不是为这么多的核心调试而设计的。如果我们在开发工具中查看Profiler，它显然能够提供我需要的那种仪器，但它基本上是设计用于分析而不是跟踪。

我怎样才能开始这个？有什么方法可以从源代码构建Chrome，我可以

• 在V8中关闭JIT？
• 将V8评估的每个javascript表达式记录到文件

我对Chrome的开发方面缺乏经验。所以例如链接到开发/分支/版本/发行版Chrome / Chromium / Canary（有什么区别？）是受欢迎的。

此时看来，使用强大的js跟踪来检测浏览器仍然比重新设计有缺陷的应用程序更容易。页面的体系结构是一场灾难，但功能很复杂，几乎完全有效。我只需要找到一个缺失的部分。

或者，如果已存在此类工具，我可以搜索哪些其他关键字？ “代码追踪”几乎是我唯一可以提出的。

我测试dynaTrace，这是一个快乐的巧合，因为我们的应用程序支持IE（确实Chrome支持刚刚测试版），但是这不会产生文本转储，它基本上产生大量< / em> Win32 UI expando-tree，这是不可能的差异。这让我非常难过，因为我知道让跟踪的表示以这种方式显示有多困难，但事实证明它几乎完全没用。除了网络应用程序的玩具示例以外，谁会在树视图中上下滚动并查看其中的任何内容？

Answer 1

我建议采用分而治之的策略，首先是通过记录，然后是第二个代码。使用控制台登录和退出事件来包装代码的可疑方法，并且当错误发生时，希望它发生在某个事件之间或之后。如果事件记录不会消失，请将部分代码放入新的页面/应用程序中。分歧和征服将在错误开始时找到。

Answer 2

如果您正在开发一个大型Web应用程序，那么按照测试驱动策略来编写它的编码部分总是好的。只需使用一些提示，您就可以制作一个简单的单元测试脚本（使用QUnit）来测试应用程序的几乎所有方面。以下是一些潜在的错误和一些解决方法。

1. 让自己的处理程序注册长生命对象和处理程序以安全的方式关闭它们。如果安全方式不成功，则对象本身的管理失败。一个例子是Backbone zombie views。视图在关闭部分中包含错误的代码，未关闭父关闭或发生无限循环。测试所有观看事件也很好，虽然很乏味。

2. 通过将所有数据获取代码放入某个模块（我经常在我的数据库中为每个表/文档使用一堆Backbone.Model对象）和每个使用reqres模式的处理程序，您可以测试他们1比1看看他们是否都正确获取和保存。

3. 如果需要进行复杂的计算，请在函数或模块中对其进行抽象，以便可以使用已知数据轻松进行测试。

4. 如果您的应用使用数据绑定，那么一个好的策略是针对包含绑定的视图测试所有数据的JSON架构。检查架构所需的所有数据。这也适用于您的Backbone.Model。

5. 使用好的IDE也有帮助。 PyCharm（如果你使用Python作为后端）或WebStorm非常适合测试和开发JavaScript / CoffeeScript。您可以在浏览器内的特定位置断点并研究代码！它还运行你的自动完成代码，你可以通过这种方式看到一些错误。

6. 我不能鼓励在代码中使用足够的模块。虽然没有JavaScript正式的方法（下一个ECMAScript草案有它），你仍然可以使用好的库。好的是：RequireJS，CommonJS或Marionette.Module（如果你使用Marionette作为你的框架）。我认为Ember / AngularJS也提供这种功能，但我没有亲自与他们合作，所以我不确定。

这可能无法立即解决您的问题，我认为（IMO）也不容易。我的重点是向您展示如何开发，以便在开发阶段轻松发现和反击错误，以及所有错误（取决于您的单元测试）。错误将永远发生，就像我们的程序员自我希望我们相信相反。希望我能帮助:)。

Answer 3

所以看起来你已经处于奇怪的境界，所以我想到了一个奇怪的解决方案。我对铬自己的后端一无所知，所以我们在同一条船上，但如果你觉得这里有一个大胆的想法。也许您可以使用一段代码找到/替换javascript文件中的每个换行符，这些代码记录到全局字符串或控制台a）您所在的文件，b）“this”的内容或对您有用的内容甚至可能是c）时间。这至少可以让你开始。确保它包裹在不同的东西中，这样你就可以轻松地将其移除。