79

promise に基づく非同期コードをデバッグする方法を理解しようとしています。Promises とは ECMAScript 6 ベースの promise を意味し、デバッグとは組み込みの 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 を適切にデバッグする方法は?

4

6 に答える 6

64

これは議論するのに最適なトピックです。残念なことに、これは実際にはネイティブの promise では非常に困難です。

Chrome で生の ES6 promise をデバッグするのは恐ろしいことです。これは、エラーを黙って抑制し、catch を省略するたびに、promise が失敗したことを示すものがないためです。更新: Chrome は未処理の拒否をログに記録するようになりました (方法については、このリンクを参照してください)

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

Firefox では、処理されていない拒否の検出を実行するため、状況は少し改善されていますが、それでも不安定であり、promise をどこにでも割り当てた場合は機能しません。

それで、何ができるでしょうか？

Bluebirdを含める- これは ES6 Promise のスーパーセットであり、内部ですぐに交換できます。より豊富な 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()
        });
    });
});

ネイティブの promise では、これはサイレント エラーになり、デバッグが非常に困難になります。Bluebird の promise では、デフォルトでコンソールに大きな赤いエラーが表示されます。

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)

デバッグが完了したら、それを交換して、ネイティブの約束に戻ることができます。個人的には、本番環境にエラーがあることを知っていることを重視しているため、お勧めしませんが、確かに実行可能です。

于 2014-09-14T07:56:16.897 に答える
13

*これはあなたの質問に対する直接的な回答ではありませんが、参考になるかもしれません。

Chrome devtools には最近、Promises などの非同期コードのデバッグに役立つ新機能が追加されました。

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

基本的に、[ソース] タブで [非同期] チェックボックスを有効にすると、Chrome がコール スタックを同期コードのように再構築します。

スクリーンショット

于 2014-09-13T20:15:48.560 に答える
1

Chrome のデバッグ ツールを使用しているようです。詳細については、このスレッドを参照してください。

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

これがすでに開発版かベータ版かは確認していませんが、すぐになることを願っています。その後、2015 年 1 月かそこらで通常バージョンに含まれる可能性があります (個人的な推測にすぎません。Google で働いているわけではないので、絶対に約束はできません)。

于 2014-11-27T14:25:46.653 に答える