如何调试 javascript 承诺？

Question

我正在尝试了解如何调试基于 Promise 的异步代码。承诺是指基于 ECMAScript 6 的承诺，而调试是指使用内置的 chrome 或 firefox 调试器。

我遇到的问题是，当发生错误时，无论我如何“拒绝”它，我似乎都无法获得堆栈跟踪。

我试过这些：

console.log(new Error('Error occured'));
throw new Error('Throwing an Error');
return new Error('Error returned by the onRejected function');
reject(new Error('Pass Error to the reject function'));

但是这些都没有返回代码中的实际错误，或者堆栈跟踪。

所以我的问题是 - 如何正确调试 javascript Promises？

Answer 1

这是一个值得讨论的好话题，可悲的是，对于原生 Promise，这实际上是相当困难的。

在 Chrome 中调试原始 ES6 承诺是可怕的。这是因为它们会静默地抑制错误，并且无论何时您忽略一个 catch，它都不会向您提供任何承诺失败的迹象。 更新：Chrome 现在记录未处理的拒绝 (see this link for how)

 Promise.resolve("foo").then(function(){
      throw new Error("You will never see this");// silent failure
 });

在 Firefox 中，情况要好一些，因为它们会执行未处理的拒绝检测 - 但是，它仍然很不稳定，如果你将 promise 分配到任何地方，它就不会起作用。

那么，有什么办法呢？

包括 Bluebird - 它是 ES6 承诺的超集，您可以直接在内部交换它，它具有更丰富的 API、速度更快并且具有惊人的堆栈跟踪。它在构建时考虑了调试，并包含出色的错误处理工具。

添加 Bluebird 后，请致电：

Promise.longStackTraces();

这会稍微减慢它的速度（它仍然会非常快）并且会给你惊人的错误信息。例如：

Promise.resolve().then(function outer() {
    return Promise.resolve().then(function inner() {
        return Promise.resolve().then(function evenMoreInner() {
            a.b.c.d()
        });
    });
});

在原生承诺中 - 这将是一个无声的失败，并且非常难以调试 - 使用 Bluebird 承诺，默认情况下这将在您的控制台中显示一个大的红色错误，从而为您提供：

ReferenceError: a is not defined
    at evenMoreInner (<anonymous>:6:13)
From previous event:
    at inner (<anonymous>:5:24)
From previous event:
    at outer (<anonymous>:4:20)
From previous event:
    at <anonymous>:3:9
    at Object.InjectedScript._evaluateOn (<anonymous>:581:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:540:52)
    at Object.InjectedScript.evaluate (<anonymous>:459:21)

完成调试后 - 您可以将其换掉并返回到原生 Promise。就我个人而言，我很重视知道我在生产中存在错误，所以我不推荐它，但它肯定是可行的。

Answer 2

这个答案是对 Benjamin Gruenbaum 答案的补充： 如果在 Promise 链中使用 catch 语句，您将通过 error.stack 获得堆栈跟踪：

        Promise.longStackTraces();

        function outer() {
            return Promise.resolve();
        }

        function inner() {
            return Promise.resolve();
        }

        function evenMoreInner() {
            a.b.c.d()
        }

        Promise.resolve()
            .then(outer)
            .then(inner)
            .then(evenMoreInner())
            .catch(function (err) {
                    console.log(err.message);
                    console.log(err.stack);
                });

错误信息：

ReferenceError: a is not defined
at evenMoreInner (test/test_promise.js:58:17)  <<<< HERE's the error!
at Context.<anonymous> (test/test_promise.js:64:23)

Answer 3

_{*这并不能直接回答您的问题，但它可能会有所帮助。}

Chrome devtools 最近获得了一项新功能，可用于调试异步代码，例如 Promises。

http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

基本上，启用源选项卡中的“异步”复选框，Chrome 会为您重建调用堆栈，就好像它是同步代码一样。

Answer 4

他们似乎正在使用 Chrome 中的调试工具。有关详细信息，请参阅此主题。

https://code.google.com/p/v8/issues/detail?id=3093

我没有检查这是否已经在开发版或测试版中，但我希望它会很快。然后它可能会在 2015 年 1 月左右包含在正常版本中（只是个人猜测，绝对没有保证，因为我什至不为 Google 工作）。

Answer 5

调试承诺的最佳方式是监听process 的unhandledRejection 事件。

例如，您可以在这里设置它并转储堆栈跟踪...

 process.on('unhandledRejection', (reason, p) => {
   console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
   // Stack Trace
   console.log(reason.stack);
 });

Answer 6

在返回Promise对象时在.then()函数内部，
添加console.log() 声明。
如果需要，请在 .catch() 内部执行相同操作：

...
  .then(
  (docs) =>{
      console.log(docs); ==> put here
      resolve(docs);
  })
  .catch((e)=>{