web-dev-qa-db-ja.com

chrome es6を使用したデバッグ

プロジェクトにEcmascript 2015を使用しようとしていますが、特定の場所（ブレークポイントがあると論理的に考えた場所）にブレークポイントを追加するのは難しいと感じています。

chromeに＃enable-javascript-harmonyフラグがtrueに設定されている場合（それが役立つ場合）、babeljsを使用して変換し、ソースマップを使用してデバッグするファイルにブレークポイントを直接設定します。私は何か間違ったことをしていることを最も確信していますが、誰かが私が間違っている場所を指し示すことができます。

参考のため、私が話している内容のGIFを追加しました。

enter image description here

javascriptgoogle-chromeecmascript-6google-chrome-devtools
30
Ajai

問題は、ソースコード（ソースマップ経由）と実際のコードマッピングの関係です。ソースは簡潔で高密度ですが、生成されるコードは通常より長く、2つの間のマッピングは、2つの間の1：1の関係を保証する方法では行われません（おそらく不可能です）。

したがって、(foo) => barなどの単一行ステートメントにブレークポイントを配置しようとすると、 実際に実行されたコード は少なくとも数行の長さであり、私は推測します（実際にはわかりません！ ）devtoolsは、実際の実行中のコードの最初の行に単純に実際のブレークポイントを配置しようとします。 -これは式では失敗します。

これは、生成されたコードの固有の欠点であり、ソースマップを使用するすべてのjsへのコンパイル言語に適用されます。残念ながら、私は良い回避策を知りません。これらの場合の最後の手段として、ブラウザでソースマップをオフにして、生成された実際のコードをステップスルーします。

それが役立つことを願っています：/

7
Nick Ribal

ここのすべての指示に従いましたか？

https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

また、ハーモニーフラグセットを有効にしている場合、babeljsを使用してトランスパイルする必要はありません。ChromeはES6/2015または少なくともサポートしているサブセットを理解します...すべて一緒にソースマップ？

5
arislan

Chromeではエラーのようです。

カナリアで修正されました： https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

問題が解決しない場合、githubで大きな議論が行われます。 https://github.com/webpack/webpack/issues/2145

0
Thiago C. S Ventura

通常、私は単にソースマップを非難しますが、ここで示していることから、デバッグをchromeとjavascriptデバッガーステートメントと比較することから結論を導き出しています。

したがって、デバッガーステートメントを関数パラメーター領域内に配置できないことがわかっています。

これは、記録された例でよく起こります。

.then(debugger)

enter image description here

そこでブレークできるようにするには、さらにコードを追加する必要があります。

.then((whatever) => { 
 // We need an existing empty line here.
 return whatever
})

また、ソースマップをオフにすることも良い考えであり、コードを1行ずつステップスルーします。

約束の流れの近くで、または約束の流れの中で一時停止したいことがわかります。 この警告を覚えておいてください。複雑なアプリで非同期コードを一時停止すると、競合状態が発生し、さらに多くの予期しない動作が発生する可能性があります。

0
Urasquirrel