問題タブ [source-maps]

ブラウザに動的に JavaScript をロードするツールを開発しています。

ユーザーが生成されたコードをデバッグできるようにしたいのですが、デバッグ中に生成された行の一部を隠したいと思っています。

生成されたソースの例:

理想的には、devtools でのデバッグ中に最初と最後の行を非表示にする必要があります。ソース マッピングを使用できることはわかっていますが、デバッガーで一部の行を非表示にする簡単な方法があるかどうか、またはこの単純なユース ケースのソース マップを生成するツールがあるかどうかを知りたいです。

Chrome ワークスペースでライブ編集できるようにするために、Bootstrap の少ないファイルと gruntjs を使用してプロジェクトをセットアップしました。

以下は私の Gruntfile.js です。より少ないファイルを目的の style.css に自動コンパイルし、変更を保存するとソース マップ ファイルを作成します。プロジェクト ディレクトリをワークスペースに追加した後、Chrome ワークスペースからより少ないファイルを編集して保存することもできます。

私が抱えている問題は、Sublime Text 2 または Chrome Workspaces を介して、ページを更新せずにブラウザで直接、より少ないファイルで変更のライブ リロードを確認できないことです。

私は何が欠けていますか？ファイルをマップする必要がありますか? どのファイルからどのファイルに正確に? 同じ方法で複数をマップする必要がありますか、それとも 1 つのファイルのみをマップする必要がありますか。

ファイル ツリーが表示される画像も追加しました。

参考までに、style.less はブートストラップの less ファイルとカスタムの less ファイルをインポートすることにも注意してください。

更新 [要素] タブから編集すると、style.less ファイルが style.css にもあるコンテンツで上書きされ、機能します。私は何を間違っていますか？

お時間を割いてご協力いただき、誠にありがとうございました。

CSSフォルダーには、ファイル拡張子が .mapの 2 つのファイルが含まれています。彼らです：

それらは縮小されたファイルのように見えますが、何のためにあるのかわかりません。

最適化フレームワークによって縮小されたスクリプトのソースマップを生成する方法はありますか?

Web Essetials について話している多くのリソースを見つけましたが、コンパイル時に最小ファイルとマップ ファイルを生成するだけです。バンドルする必要があるスクリプトはさまざまなソースから入手したものであるため、vs.net の機能に頼ることはできません。

この質問で同じ問題が解決されています: ASP.NET スクリプト バンドルとソース マップの調整

AngularJS アプリケーションの縮小版 (UglifyJS 経由) をロードすると、コンソールに次のエラーが表示されます。

今、これは変数名のマングリングが原因であることがわかりました。マングルされていないバージョンは問題なく動作します。ただし、 JS 出力ファイルのサイズが大幅に削減されるため、変数名マングリングを利用したいと考えています。

そのため、ビルド プロセスでngminを使用していますが、以前はうまく機能していたにもかかわらず、この問題は解決していないようです。

そこで、この問題をデバッグするために、uglify grunt タスクでソース マップを有効にしました。それらは問題なく生成され、Chromeはサーバーからマップをロードします。それでも、プロバイダーの元の名前が表示されるはずだと思っていたにもかかわらず、同じ役に立たないエラー メッセージが表示されます。

Chrome にソース マップを使用させて、ここで問題となっているプロバイダーを教えてもらうにはどうすればよいですか? あるいは、別の方法でプロバイダーを見つけるにはどうすればよいでしょうか?

Web アプリケーションの 2 段階のコンパイル プロセスがあります。まず、CoffeeScript ファイルを JavaScript ファイルにコンパイルします [1]。次に、JavaScript ファイル (CoffeeScript に由来するものと、AngularJS テンプレートから生成されたような外部のものの両方grunt-angular-templates) は、Google Closure Compiler [2] によって単一の最小化されたファイルにコンパイルされます。

手順 [1] と [2] の両方で、ソース マップが生成されます。

これらのソース マップを単一のソース マップに結合して、最小化された JS ファイルを実行する Web ブラウザーから CoffeeScript ファイルをデバッグできるようにすることは可能ですか?

つまり、ソース マップ [1] が関数で表されているとします。

ソース マップ [2] は次の関数で表されます。

関数構成で表されるソース マップを取得したいと思います。