###介绍
JavaScript之所以如此与众不同是因为它拥有如下强大的特性：通过回调函数使得JavaScript能够异步工作。指定异步回调能够让你写出事件驱动的代码，但是也让跟踪缺陷（bug）变成一种痛不欲生的经历，因为JavaScript代码没有按照线性方式执行。
幸运地，现在在谷歌开发者工具（Canary版本），你可以看到异步JavaScript回调函数的完整调用堆栈。
（我们将会很快的分解这个事例的工作流程）
一旦你在谷歌开发者工具中启用异步调用堆栈的功能，你将能够适时地转进在你的网页应用中的各种各样的断点中。然后遍历事件监听器、setInterval、setTimeout、XMLHttpRequest、promises、requestAnimationFrame、MutationObservers等等的完整堆栈踪迹。
随着你在遍历堆栈踪迹的过程中，你也可以分析运行时执行的代码的特定断点处任意变量的值。这就像一个时光机，能让你查看各种表达式！
让我们启用这个功能，然后看一看几个场景。
###在Chrome浏览器（Canary版本）中启用异步调试
通过在Chrome浏览器（35版本或更高）中启用异步调试这个功能来尝试这个新特性。点中谷歌开发者工具中的 Source 面板。
接下来在右手边的 Call Stack 面板，有一个“Async”的复选框。点击复选框可以打开或者关闭异步调试的功能。（尽管一旦打开了它，你可能不再想要关闭它了。）
###捕获延时计时器事件和XHR响应回应
你也许以前在Gmail中看到以下场景：
如果在发送请求的时候出现问题（不是服务器出现问题就是客户端出现网络连通性问题），Gmail将会在短暂之后自动地尝试重新发送信息。
为了查看异步调用堆栈式如何帮助我们分析延时计时器事件和XHR响应，我重新创造了一个虚拟Gmail事例的流程，完整的JavaScript代码能够在上面的链接找到，但是整个流程就像下面所示：
在早期版本的开发者工具，仅仅查看调用堆栈面板，在postOnFail()中的断点只能给你一点点postOnFail()被从哪里调用出来的信息而已。然而当你打开了 异步调用 的功能，你会看到不一样的地方：
你能够看到 postOnFail() 是从一个AJAX回调函数创造的，但是没有更详细的信息
你能够看到XHR是由submitHandler()创造的，submitHandler()是在scripts.js中绑定的单击处理器，Nice！
随着异步调用堆栈的打开，你能够查看到全部的调用堆栈来明了地了解请求是由上面示例的
submitHandler()创造的或者是下面示例中的retrySubmit()创造的：
从Call Stack面板中，你也可以断定断点事件的发起是否比一个UI事件例如“点击”早，或者一个
setTimeout()的时延，或者任何常用的异步回调事件。###监听表达式的异步方式
当你遍历整个调用堆栈，你的监听表达式也将会更新，以反映那时的状态。
###从过去的作用域评估代码
除了能够简化监听表达式，你也能够通过谷歌开发者工具的JavaScript控制台面板中的之前作用域与你的代码互动。
想象一下你就是神秘博士并且你需要一些帮助来比较时钟上从穿梭时光获取的过去时间到“现在”获取的时间。在谷歌开发者工具的控制台中，你可以简单地评估、存储以及跨不同的执行点做任何运算。
使用JavaScript控制台结合异步调用堆栈来调试你的代码。点击查看上面的DEMO
保持在谷歌开发者工具中操作你的表达式将会从不得不转到源代码、编辑和刷新浏览器中节省你的时间。
原文链接
