問題タブ [source-maps]

Assetパイプラインを使用してRailsアプリに取り組んでいます。development.rb には次のものがあります。

開発環境では、アセットはバンドルされておらず、Rails によって個別に提供されます。この時点で、個別に提供されるアセットの数は 50 を超えています。したがって、ページ全体のリロードは非常に遅くなります。

開発環境での読み込み時間を短縮するために、少なくともいくつかのアセットにそれらを連結したいのですが、そうすると、Chrome 開発ツールでそれらを個別にデバッグ/表示する機能が失われます。例: http://d.pr/i/ZFge

私の知る限り、これを解決するには2つの方法があります。

それらを連結アセットとして提供し始めます。

1. 古いハック方法: @sourceUrl トリック。
2. 新しい方法: sourceMaps .

Railsアプリでそれらを有効にする方法に関するガイドはありますか? 私は CoffeeScript を使用していないので、https://github.com/markbates/coffee-rails-source-mapsは役に立ちません。ほとんどの Google 検索はそれにつながります。

ネイティブ JS のソリューションを探しています。

ソース マップと、Closure コンパイラを使用してソース マップを生成し、コードをコンパイルして最小化した後、開発で慣れ親しんだすべてのデバッグ機能を提供する方法についてよく耳にします。どうやら、CoffeeScript のような js にコンパイルされた言語もサポートされているようです。

これは信じられないほどクールだと思います！（これを可能にしてくれたすべての関係者に敬意を表します）

私が興味を持っているのは次のとおりです。

1. これはどのように達成されますか？（主な質問）
2. (開発モードでのデバッグだけではなく) なぜこれが役立つのですか? (二次)

ソース マップは、縮小されたライブラリ コードをステップ実行する場合などに非常に役立ちます。ソース マップを使用する .js ファイルの最初の数行は、既定では次のようになります。

同じディレクトリにない場合jquery.min.map、ソース マッピングをサポートするブラウザーは冗長な http 要求を作成し、404 エラーが発生します (おなじみのように聞こえますが、ファビコンはありますか? )。

sourceMappingURL別のドメインを指している可能性があることに気付きました。私はこの慣習を支持しているわけではありませんが、CORS の対象にならないのは奇妙に思えます。

マップされた縮小されていないソースは安全ですか? つまり、上記の例でマップされたサーバーが侵害され、悪意のあるコードがソースに追加された場合、それは実行される可能性がありますか? コードをデバッグしてステップ実行している場合はどうでしょうか。これに答える実装の詳細が見つかりません。

私が次のような言語を持っているとしましょう

にトランスパイルする

この言語のユーザーが

$__Helpers.print「文字列が必要です」と言うとTypeError がスローされます。print 5開発者ツールに、このエラーの元の呼び出しとして行を表示してもらいたいです。ソースマップを取得して、次のようなコールスタックを表示する方法を知っています

ここで、 は関数transpiled_script.js:2呼び出しのスクリプトと行番号、 は呼び出しのスクリプトと行番号です。私は、開発ツールに最上位の呼び出し(トランスパイラーの実装の詳細にすぎません) を無視させ、元のスクリプトからの呼び出しのみを表示させたいと考えています (これは、独自のスクリプトでデバッグする必要がある部分です)。$__Helpers.printoriginal_script.os:1print 5transpiled_script.js

insideへの呼び出しが複数ある可能性があるため、単純にマップtranspiled_script.js:2することはできません。したがって、1 対 1 の関係ではありません。original_script.os:1printoriginal_script.os

これを行う方法はありますか？

(私はソースとソース マップを生成するために escodegen を使用しています (escodegen は Node mozilla/source-map モジュールを使用します)。そのため、escodegen または mozilla/source-map にこれを実行するように指示する方法があれば理想的ですが、オーバーライドすることもできます。それが不可能な場合は、escodegen の出力。)

Google Chrome 内で、スタック トレースが将来的にマッピングのサポートを提供するかどうか疑問に思っていました。現在、ソース マップを使用してエラーをスローすると、TypeScript ファイルへの行番号リンクが提供されますが、Error.stack を呼び出すと、JavaScript の行とファイルが提供されます。

ここに参考画像があります: http://puu.sh/4DTOG.png

お気づきのとおり、エラーが発生している実際の行は TypeScript ファイルにリンクされていますが、スタック トレースは JavaScript ファイルにリンクされています。

一般的なデバッグ目的でブラウザ内で編集および保存できるように、Chrome と .scss ファイル間のソース マッピングの設定に時間を費やしました。ただし、これに対するより重要な手順の 1 つは、DevTools の実験を有効にしてから、"Support for Sass" を選択することのようです。実験を何度か有効にしましたが、まだ Sass サポートのボックスはありません。Chrome は新しいアップデートに自動的に含まれている可能性がありますか?

存在しないことを証明するためのスクリーンショット。（気にしないでください、私はそれを投稿することを許可されていません）.

最近、uglify-js を使用して JavaScript を圧縮し始めました。ソース マップはデバッグには便利な機能ですが、JavaScript を圧縮する利点の 1 つは難読化です。

ソース マップをパスワードで保護されたディレクトリに配置すると、受動的なオブザーバーがそれを使用して JavaScript を再美化するのを防ぐことができますか? 彼には望ましくない副作用がありますか？

ブラウザーがこのファイルをいつ、どのように要求するかについてはよくわかりません。パスワード プロンプトが表示されてユーザーに迷惑をかけたくありませんが、一般に公開されることも避けたいと考えています。

カルマ テスト ランナーでテストするときに、デバッガーが自分の coffeescript ファイルを操作できるようにするのに苦労しています。

おそらく、Webstorm ファイル ウォッチャーにソースマップを生成するように指示するだけで、デバッガーがカルマ テスト ランナーと連携するようになります。残念ながら、デバッガーは、coffeescript コンパイラーによって出力されたマップ ファイルを認識していないようです。file.coffee -> file.js.map を探します。ただし、他の結果を取得しようとしても、マップ ファイルは常に file.coffee -> file.map です。

私のカルマ設定ファイルには次のものがあります（明らかにすべてではなく、関連する部分だけです）：

ファイルウォッチャーであらゆる種類の構成を試しました：

引数が「--compile --bare --map $FileName$」で、更新する出力パスが「$FileNameWithoutExtension$.js.map」または「$FileNameWithoutExtension$.js:$FileNameWithoutExtension」のいずれかの単一ファイル ウォッチャー$.js.map"

最初のバージョンでは空白の file.js.map が生成され、2 番目のバージョンでは空白の file.js.map と、適切なソースマップ ファイルである標準の file.map が生成されます。

「--compile --bare」出力パス:「$FileNameWithoutExtension$.js」と「--map」出力パス:「$FileNameWithoutExtension$.js.map」だけを持つ 1 つのファイル ウォッチャーを試しました。 "。それは空の file.js.map を出力し、実際のマップは出力しません。

「--compile --bare」出力パス:「$FileNameWithoutExtension$.js」のみを持つ 1 つのファイル ウォッチャーと、「--compile --map」出力パス:「$FileNameWithoutExtension$. js.map". それは空の file.js.map を出力し、実際のマップは出力しません。

一方、デバッグ モードでテストを実行すると、Karma サーバーは次のように報告します。

明らかに、サーバーはマップが file.js.map と呼ばれると想定していますが、実際には coffeescript は「js」なしで file.map を出力します。出力ソースマップ ファイルの名前を変更できないようで、デバッガーに何を探すべきかを伝える場所がわかりません。

括弧を付けて言うと、デバッガーは、angular.js や jquery.js などの私のファイルで読み込まれた非 coffeescript ライブラリのマップ ファイルが見つからないことも教えてくれます。おそらくそれは何が間違っているかの手がかりです。

JetBrains にチケットを送信しました。彼らの反応もここで共有します。お手数ですが、解決策をご存知の方がいらっしゃいましたら教えてください。

ありがとう！

を使用してクライアント側の例外ログを実装しwindow.onerrorました。現在のエラーとスタック トレースを取得し、AJAX を使用してサーバーに送信します。

はprintStackTrace、このライブラリによって提供される関数です: http://stacktracejs.com/

問題は、本番環境ではすべての JavaScript ファイルが縮小されているため、スタック トレースと行番号は実際には役に立たないことです。これは、すべてのエラーがファイルの 1 行目に報告されているためです。これは、縮小されたバージョンには 1 行のコードが含まれているため正常です。例えば：

これはソース マップを使用して改善できますか、それとも開発者ツールがアクティブな場合にのみ機能しますか?

私が望むのは、開発者ツールを有効にしていない/ソースマップを有効にしていないユーザーにエラーが発生したときに、ソースマップ (または少なくとも実際の行番号) を使用して完全なスタックトレースを取得することです。これはまったく可能ですか？