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

Question

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

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

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

我怎么能开始这个？我可以通过某种方式从源代码构建Chrome

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

我对Chrome的开发方面没有任何经验.那么例如链接到Chrome/Chromium/Canary的dev-builds/branches/versions/distros(有什么区别？)是受欢迎的.

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

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

我测试了dynaTrace,这是一个快乐的巧合,因为我们的应用程序支持IE(确实Chrome支持刚刚测试版),但这不会产生文本转储,它基本上产生了一个巨大的 Win32 UI expando-tree,这是不可能的差异.这让我非常难过,因为我知道让跟踪的表现形式显示出来更加困难,但事实证明它几乎完全无用.除了网络应用程序的玩具示例之外,谁会在树视图中上下滚动并查看其中真正有用的任何内容？

Answer 1

如果您正在开发一个大型网络应用程序，那么对其编码部分遵循测试驱动策略总是好的。只需使用一些技巧，您就可以制作一个简单的单元测试脚本（使用 QUnit）来测试应用程序的几乎所有方面。以下是一些潜在的错误以及解决这些错误的一些方法。

1. 让自己成为注册长期生存对象的处理程序，并创建一个以安全方式关闭它们的处理程序。如果安全方法不成功，那么就是对象本身的管理失败。一个例子是骨干僵尸视图。视图的关闭部分有错误的代码，父关闭未挂钩或发生无限循环。测试所有视图事件也很好，尽管很乏味。

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

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

4. 如果您的应用程序使用数据绑定，那么一个好的策略是为所有数据提供一个 JSON 架构，以便根据包含绑定的视图进行测试。根据架构检查所需的所有数据。这也适用于您的 Backbone.Model。

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

6. 我只是极力鼓励在代码中使用模块。尽管没有 JavaScript 官方方法（下一个 ECMAScript 草案有），但您仍然可以使用好的库来实现它。好的有：RequireJS、CommonJS 或 Marionette.Module（如果您使用 Marionette 作为框架）。我认为 Ember/AngularJS 也提供了这种功能，但我个人没有使用过它们，所以我不确定。

这可能无法立即解决您的问题，而且我认为（IMO）也没有一个简单的解决方案。我的重点是向您展示开发方法，以便在开发阶段轻松发现和纠正错误，以及所有这些（取决于您的单元测试）。错误总是会发生，尽管我们程序员的自我意识希望我们相信相反的情况。希望我有帮助:)