跟踪所有的JavaScript的执行在Web应用程序 [英] Trace the execution of ALL Javascript in a web app

问题描述

这里的情况是：一个复杂的Web应用程序无法正常工作，并有可能持续生产意外的行为。这个问题的原因是不知道。

Here is the situation: A complex web app is not working, and it is possible to produce undesired behavior consistently. The cause of the problem is not known.

建议：跟踪所有的JavaScript code的执行路径。本质上，产生两个怪异日志然后可以送入一个diff算法，以确定相关的错误的行为开始发散（作为病因不从应用程序的行为明显的，并且两个玉米prehending和获得的复印件实际JS code是运行是困难的，因为必须切换到并复制了从Web检查的多个页面。因此很难是一个事实，即所有的页面是动态使用Perl code拼接在一起，其中，JS code的显著部分才有用的（动态...）Perl的字符串）。

Proposal: Trace the execution paths of all javascript code. Essentially, produce two monstrous logs which can then be fed into a diff algorithm to determine where the behavior related to the bug begins to diverge (as the cause is not apparent from application behavior, and both comprehending and obtaining a copy of the actual JS code being run is difficult, due to the many pages that must be switched to and copied out from the web inspector. Making it difficult is the fact that all pages are dynamically spliced together with Perl code, where significant portions of JS code exist only as (dynamic...) Perl strings).

Web检查在Chrome没有我知道的用于记录执行跟踪的选项。基本上我想是一个日志JS的每一行执行，在它们被执行的顺序。我不认为这作为一个困难的事情来获得鉴于JS VM是单线程的。这个问题很简单，现有的面向用户的工具不是设计相当这么多铁杆调试。如果我们在开发工具看探查，它显然能够在一种仪器，我需要的，但它是从根本上专门做分析代替的跟踪。

The Web Inspector in Chrome does not have an option that I know about for logging an execution trace. Basically what I would like is a log of every line of JS that is executed, in the order that they are executed. I don't see this as being a difficult thing to obtain given that the JS VM is single-threaded. The problem is simply that the existing user-facing tools are not designed for quite this much hardcore debugging. If we look at the Profiler in the Dev Tools, it's clearly capable of the kind of instrumentation that I need, but it is fundamentally designed to do profiling instead of tracing.

我该如何开始呢？有没有一些方法，我可以从源代码，在那里我可以

How can I get started with this? Is there some way I can build Chrome from source, where I can

• 关闭JIT在V8中？


• 将V8评估每一个JavaScript的前pression记录到文件

我有镀铬的发展方面的经验为零。因此，如链接DEV-建立/分支机构/版本/铬/铬/加纳利发行版（有什么区别？）的欢迎。

I have zero experience with the development side of Chrome. So e.g. links to dev-builds/branches/versions/distros of Chrome/Chromium/Canary (what's the difference?) are welcome.

在这一点上看来，插装具有强大的JS跟踪浏览器仍然可能比重新设计的车更容易的应用程序。页的结构是一种灾难，但功能是复杂的，它几乎完全有效。我只是找到了一个遗漏的部分。

At this point it appears that instrumenting the browser with powerful js tracing is still likely to be easier than redesigning the buggy app. The architecture of the page is a disaster, but the functionality is complex, and it almost fully works. I just have to find the one missing piece.

另外，如果已经存在这样的工具，有什么是其他一些关键字我能为他们搜索？ code跟踪是pretty多我唯一能想出。

Alternatively, if tools of this sort already exist, what are some other keywords I can search for them with? "Code Tracing" is pretty much the only thing I can come up with.

我测试的dynaTrace ，这是一个令人高兴的巧合是我们的应用程序支持IE（确实Chrome的支持，刚出来的时候公测），但这并不能产生文本转储，它基本上产生的大规模的Win32的用户界面的expando树，这是不可能的差异。这让我真的很伤心，因为我的知道的是多么困难得多，使跟踪的重新presentation显示的方式，但它原来是几乎完全无用。谁去和上下滚动的树视图和看到什么它真的很有用，比一个We​​b应用程序的玩具例子其他什么吗？

I tested dynaTrace, which was a happy coincidence as our app supports IE (indeed Chrome support just came out of beta), but this does not produce a text dump, it basically produces a massive Win32 UI expando-tree, which is impossible to diff. This makes me really sad because I know how much more difficult it was to make the representation of the trace show up that way, and yet it turns out being almost utterly useless. Who's going to scroll up and down that tree view and see anything really useful in it, in anything other than a toy example of a web app?

推荐答案

如果你正在开发一个大的web应用程序，这是一件好事，遵循它的编码部分的测试驱动的战略。只用一些技巧可以让你做一个简单的单元测试脚本（使用QUnit）来测试pretty您的应用程序有多少方方面面。下面是一些潜在的错误和解决这些问题的一些方法。

If you are developing a big web app, it is always good to follow a test driven strategy for the coding part of it. Using just a few tips allows you to make a simple unit testing script (using QUnit) to test pretty much all aspects of your app. Here are some potential errors and some ways of solving them.

1. 请自己处理注册长期生活的对象和处理程序关闭它们的安全方法。如果安全的方式不那么成功，这本身就是失败的对象的管理。一个例子是骨干僵尸的看法。无论是鉴于已在关闭部分不良code，家长密切不是钩住或无限循环发生。测试所有查看事件也不错，虽然繁琐。

1. Make yourself handlers to register long living Objects and a handler to close them the safe way. If the safe way does not succeed then it is the management of the Object itself failing. One example would be Backbone zombie views. Either the view has bad code in the close section, the parent close is not hooked or an infinite loop happened. Testing all view events is also good, although tedious.

通过将所有的code数据某个模块内获取（我经常用一堆我的数据库Backbone.Model对象为每个表/文件），并处理每一个使用reqres格局，您可以通过1对它们进行测试1，看看他们是否所有fetch和正确的储存。

By putting all the code for data fetching inside a certain module (I often use a bunch of Backbone.Model objects for each table/document in my DB) and handlers for each using a reqres pattern, you can test them 1 by 1 to see if they all fetch and save correctly.

如果需要复杂的计算，抽象它在功能或模块，以便它可以容易地用已知的数据进行测试。

If complex computation is needed, abstract it in a function or module so that it can be easily tested with known data.

如果您的应用程序使用数据绑定，一个良好的政策是有一个JSON架构反对包含您绑定的意见进行测试的所有数据。针对检查所需的所有数据的模式。这适用于您的Backbone.Model也。

If your app uses data binding, a good policy is to have a JSON schema for all data to be tested against your views containing your bindings. Check against the schema all the data required. This is applied to your Backbone.Model also.

使用好的IDE也有帮助。 PyCharm（如果你使用Python后端）或WebStorm是用于测试和开发的JavaScript / CoffeeScript的非常好。您可以断点并在多个地点研究你的code，你的浏览器中！此外，它运行在您的code为自动完成，你可以看到一些错误的方式。

Using a good IDE also helps. PyCharm (if you use Python for backend) or WebStorm are extremely good for testing and developing JavaScript/CoffeeScript. You can breakpoint and study your code at specific locations, inside your browser! Also it runs your code for auto-completion and you can see some of the errors that way.

我只是不能鼓励不够的code模块的使用。虽然这样做（接下来的ECMAScript草案有它）没有JavaScript的正式方法，你仍然可以使用它好的库。好的是：RequireJS，CommonJS的或Marionette.Module（如果你使用的木偶作为框架）。我认为灰烬/ AngularJS也提供了这种功能，但我没有与他们个人的工作，所以我不知道。

I just cannot encourage enough the use of modules in your code. Although there is no JavaScript official way of doing it (next ECMAScript draft has it), you can still use good libraries for it. Good ones are: RequireJS, CommonJS or Marionette.Module (if you use Marionette as your framework). I think Ember/AngularJS also offers this kind of functionality but I did not work with them personally so I am not sure.

这可能不会立即给你解决你的问题，我不认为（IMO）有一件容易的事情。我的重点是向您展示的方式来使开发的错误很容易被察觉和反驳，和它的所有的开发阶段（取决于您的单元测试）。错误总是发生，不亚于我们的程序员的自我想让我们相信的相反。希望我帮助：）

This might not give you an immediate solution to your problem and I don't think (IMO) there is an easy one either. My focus was to show you ways to develop so that errors can be easily spotted and countered, and all of it (depending on your Unit Testing) during development phase. Errors will always happen, as much as our programmer ego wants us to believe the contrary. Hope I helped :)

这篇关于跟踪所有的JavaScript的执行在Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！