2

私はcoffeescriptファイルをデバッグするための環境をセットアップしています。私は、オリジナルの .coffee ファイルから .js ファイルと .map の両方を、coffeescript のデフォルト コンパイラから生成する IDE、webstorm を使用しています。

したがって、最終的には 4 つのファイルがすべて同じフォルダーにあります。

main.html、aa.coffee、aa.js、aa.map。main.html に js ファイルを含めます。JS ファイルには以下が含まれます。

// Generated by CoffeeScript 1.6.3
var my;

my = 1;

alert(my);

/*
//@ sourceMappingURL=aa.map
*/

とてもシンプルです。main.html をロードすると、アラートが正しくポップアップ表示されます。ファイルのツリーが表示されるGoogle dev tools / sourceを開くと、htmlファイルとjsファイルが表示されます。ただし、上記のように正しく参照されていますが、.coffee ファイルを表示することは不可能です。もちろん、開発ツールの設定で sourcemap を有効にしました。いくつかのビデオ チュートリアルを参照し、コーヒー ファイルが表示されるようにすべての手順を実行しました。

他の 2 つのファイルの内容は次のとおりです。

コーヒー ：

my = 1
alert my

地図：

{
"version": 3,
"file": "aa.js",
"sourceRoot": "",
"sources": [
"aa.coffee"
],
"names": [],
"mappings": ";AAAA,EAAA,EAAA;;AAAA,CAAA,CAAA,CAAK;;AACL,CADA,CACA,GAAA"
}

ソース マップ プロセスが chrome 開発ツールで機能しない理由がわかりましたか?

4

1 に答える 1

1

編集：私は今、これらすべてについて考えを変え、ソースマップのデバッグをまったく使用していません。まず、それは一般的に不安定でした。次に、JS を作成していない場合は、少なくともそれを読み取ることができる必要があるため、常に js でデバッグします。

まず、現在 Chrome ではソース マップのデバッグが不安定であることに注意してください。あなたが試すことができるいくつかのこと：

  1. コードにデバッガー ステートメントを挿入します。デバッグが非常に不安定であることに気付きました。約 10% の確率で、ブレークポイントで停止しません。

  2. ソース ペインで Ctrl O を押してコーヒー ファイルを直接開き、ブレークポイントを配置するか、デバッガー ステートメントを使用します。

  3. "sourceRoot": "",が空である理由を理解してください。これは、ソース ファイルが js ファイルと同じディレクトリにあることを意味している可能性があります (そう思われます)。私のコーヒーファイルは別のディレクトリにあるため、sourceRoot エントリがあります。

  4. grunt または coffeescript を使用してソース マップを生成します。これは効果がありそうにありませんが。

#2 やると思います。

于 2013-09-20T17:16:14.053 に答える