問題タブ [source-maps]

Chrome の開発者ツールで AngularJS のソース マップを表示しようとしています。私は簡単なウェブページを作りました：

これは として保存されindex.html、3 つの AngularJS ファイル ( angular.js、angular.min.jsおよびangular.min.js.map) をAngular の bower リポジトリから直接libサブディレクトリにコピーし、開発者ツールの設定ページで [ソース マップを有効にする] オプションがオンになっていることを確認しました。を使用して、このディレクトリの内容を提供しpython -m SimpleHTTPServerます。しかし、Chrome はマップ ファイルをサーバーに照会することさえしません。これはサーバーのログに表示されます。

次に、 Coffee Script デモやHTML5Rocksページにリンクされているデモなどのソース マップ デモを読み込んでみましたが、実際にはどれもマップ ファイルを読み込んでおらず、「ネットワーク」タブに表示されると思います。

これは、Debian SID システム上の Chrome 28.0.1500.95 です。

私が間違っていることは何ですか？

grunt でコンパイルされたアプリのソース マップを含むワークフローを知っていますか?

uglifyjsソースマップを簡単に生成できるようなプラグインについてはよく知っています。しかし、これを 1 回限りのソース マップを作成するのではなく、より複雑なワークフローに組み込むことを検討しています。

最も人気のある Yeoman ジェネレーター (私が知っている) では、ワークフローでソース マップが欠落していることに気付きました。これは、ソース マップの主要なプラグインがサポートされていないためですか? それとも、ワークフローにソース マップが必要ないということでしょうか?

私が遭遇した一般的な grunt プラグインの注目すべき問題の原因は次のとおりです。

uglifyハッキーな修正なしでは、最も基本的なプロジェクト構造でさえ処理できません。

useminまた、プロジェクトごとに 1 つしかサポートできないという点で、最も単純な構成を超えてソース マップを処理することもできません(ただし、修正するにはハックが必要です)。可能な解決策は明らかに使用を完全に停止することですが、そうすると、 、、および とusemin組み合わせるなど、すべての利点を失うことになります。revwatchconnect

アプリをテストするときに、連結されていない/縮小されていないソースを使用してテストすることが最善の方法であると考えています。もちろん、これは理想的とは言えません。テスト環境が本番環境を可能な限り反映するようにしたいからです。

grunt プロジェクトでソース マップを使用しますか? どのようにしますか？そうでない場合、サポートの欠如をどのように回避しますか?

私が取り組んでいるプロジェクトは、少ないコンパイラを実行するコードを使用しています。

less ファイルからコンパイル済み css にインライン ソース マップを追加するのに問題があります。ノードから次のコードを実行しています。

追加できるオプションはありますか? 私は追加しようとしましたがsourceMap: true、outputSourceFiles: true成功しませんでした。

WebStorm 7.0.1 で yeoman angular generator grunt サーバーを実行すると、以下がスローされます。

ブラウザでロードされたファイルを検索して.js.mapもsourceMappingURL結果が返されず、プロジェクト ソースではエラーからのそれらのファイルに関連する結果が返されません。

エラーは、WebStorm が JetBrains IDE サポート プラグインに接続されている場合、初回起動時、およびファイル変更のライブ リロード時にのみ表示されます。これらは IDE の JavaScript デバッグ コンソールとブラウザ コンソールに表示されますが、開発者ツールを開いてブラウザから更新を行うと、エラーはスローされません (したがって、新しいタブの読み込み時に開発者ツールを起動する方法がない限り、編集: 実際にはそれも機能しません)。

問題を再現する手順:

• Yeoman 角度ジェネレーターをインストールする
• それらのソースから Webstorm プロジェクトを作成する
• 次の構成を使用してプロジェクトを開始します (JS 用に 2 番目の構成が自動的に作成されます)。

ノード インタープリター: pathToNode\nodejs\node.exe

作業ディレクトリ: ProjectRootFolder

JavaScript ファイル: C:\Users\UserName\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

アプリケーション パラメータ: サーバー

ブラウザ/ライブ編集の場合:

起動後確認

JavaScript デバッガーで確認する

開始 URL:http://localhost:9000

これらのエラーをデバッグする方法についてのアイデアはありますか? ご協力ありがとうございました！

サイトにソース マップを追加したいのですが、提供方法を​​ある程度制御したいと考えています。それらに使用する適切な MIME タイプは何ですか?

一部のデータ

• コンテンツ自体は JavaScript ですが、そのように実行するためのものではありません。
• CDN.js は で機能http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.mapしContent-Type: application/octet-streamます。
• Googlehttp://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.mapサービスContent-Type: application/json
• ソース マップの仕様では、マップが)]}実際の JavaScript として評価されるのを防ぐ (したがって、クロスサイト スクリプティング攻撃を公開する) ことを防ぐために、マップを開始する必要があると述べています。これにより、ファイルは無効な JSON になり、有効ではあるが実行できない JavaScript になります。

Google Closure Compiler の Node.js ラッパーを使用して、連結された縮小ファイルを作成しました。Google Chrome で開発者ツールを開くと、ソース マップとマップされたファイルの両方が適切に読み込まれます。

私が抱えている問題は、ソース マップ ファイルでブレークポイントがトリガーされず、縮小されていない個別のファイル セッションを実行しているようにならないことです。スクリプトにブレークポイントを配置しようとすると、設定しようとしている場所ではなく、数行下にジャンプすることがあります。しかし、最もイライラするのは、ブレークポイントを設定できるのに、それらがトリガーされないことです! 呼び出されていることがわかっている関数の途中に設定しますが、スクリプトは実行を一時停止しません。

編集

Ubuntu 13.10 で Chrome 31.0.1650.57 を実行しています。Firefox 25.0 でも動作しません。

まず、Chrome でソース マップを有効にしました。次に、ソース マップを使用するhttp://dev.fontdragr.com/に移動します。マップ ファイルもダウンロードされていることがわかりましたが、縮小されたソースがソース タブに表示されていました。

クロムバージョン: version 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2)

私もfirefoxを使用しようとしましたが、まだ機能しません。

SASS ソース マップとディスクへの自動リロード/保存を機能させようとしています。変更を再コンパイルするためのすべての設定grunt-contrib-sassと監視タスクが.scssあり、SASSを編集してディスクに保存できるように、ソースマップがChromeで正しく機能しています。私の問題は、SASS を編集すると、CSS がまったくないかのようにページがリロードされることです。次にページをリロードすると、適用した変更が実際にそこにあります。

なぜこれが起こるのか分かりますか？

開発ツールの sass-change 前: http://cl.ly/image/1R2o2I113H3y 後: http://cl.ly/image/1m0V3b0J420X

Google Canary 33.0.1738.0 を使用しています

ソース マップを使用して Chrome で CoffeeScript コードをデバッグできるようにする場合、ソース マッピングを使用していない場合と同様に、コンパイルされた JS でエラーを確認できると便利な場合があります。

元のトレースバックを表示するように Chrome に指示する方法はありますか?

I'm trying to have sourcemaps on my project. I'm using LESS, compiled with Grunt using grunt-contrib-less

Here is the code I have on my gruntfile.js:

And this is the file's structure I have:

I have problems defining the sourceMapRootpath. I tried putting the same folder where all .LESS files are, but nothing happends, the same using the folder where .CSS files are.

Any idea on this?

Thanks! seba