問題タブ [source-maps]

CoffeeScript が新しいソース マップのホットネスをサポートするようになったので、nodeJS アプリの開発中に、ブラウザーだけでなくコマンド ラインでもソース マップを使用できるかどうか疑問に思っていました。

コンパイルされた JS ファイルではなく、実際に自分の coffeescript ファイルと一致する、より有用なエラー トレースを JS コンパイラに提供してもらいたいです。

待望の機能であるソース マッピングに気付きました。コーヒースクリプト（ブラウザ、キックスタートプロジェクトなど）のために多くの人が集まって実現したことに感銘を受けました.

少しテストを設定したので、使い方が理解できました...

コーヒースクリプト

y注意：定義されていないため、ここには意図的な間違いがあります

ソースマップ

Javascript

ジェイド

コーヒースクリプトのソースが表示され、ブレークポイントを設定することもできるため、これはすべて機能しているようです (ただし、グラフィックが表示されないようで、javascript でブレークポイントが設定されている場所が少し不安定なようです)。

私が抱えている問題は、エラーが発生したときに、コンソールが javascript ファイルの行番号を報告することです。エラーの原因となっている coffee-script ソース ファイルの行を見つけるにはどうすればよいですか?

OSX 10.8.2 で Google Chrome バージョン 23.0.1271.101 を使用しています。

最近、chromeはソースマップの表示を停止しました。

プロジェクトで少し休憩しましたが、新しいバージョンのgwtとchromeを使用すると、[ソース]タブにJavaソースが表示されません。

私はスーパー開発モードを使用しています。コードサーバーから受け取ったコンパイル済みファイル（* .cache.js）には、ソースマップのヘッダーが含まれています。

コードサーバーは、（以前のように）ソースマップを送信したことを出力せず、コンパイルが成功したことのみを出力します

私は持っています：gwtバージョン2.5.0 Chrome verson 25.0.1364.172 Ubuntu 12.04 LTS（ただし、問題はWindowsとMacOSでも再現されます）

私はChrome Dev 27を使用しており、Dev Tools設定でDisable cacheをチェックしました。ページをリロードすると、Chrome はマップ ページで使用されるすべてのリソース (.jsファイルを含む) を適切にリロードします。ただし、対応するソース マップ .mapは自動的に再読み込みされません。.mapアプリの Chrome 間の HTTP トラフィックを監視し、その後のページの読み込み時に、Chrome からのファイルに対する要求が表示されません。Chrome にソース マップもリロードさせるにはどうすればよいですか?

Chrome がファイルをリロードしない問題は.map、生成元のファイルもリロードしないことです.js。私の場合はたまたま CoffeeScript ファイル ( .coffee) です。つまり、デバッグ時に[ソース] タブで探していることを意味します。 .coffee( からの) 新しいコードが実行されている場合でも、ファイルの古いバージョンで.js。

実稼働 Web サイトをデバッグしたいのですが、マップ ファイルをサーバーにアップロードしたくありません (プライバシー上の理由から、公開の権利なので?)。

出来ますか ？

LESS のデバッグは 1 年前からかなり進んでいるように見えますが、Chrome/Canary で開発者ツールを使用してデバッグした経験のある人はどれくらいいるのでしょうか。

ファイルをデバッグしているときに、要素の CSS が CSS ファイルではなく LESS ファイルとして表示されるようにしています。LESS ファイルの必要な行番号を知る必要がある場合、CSS の行番号を表示してもほとんど役に立ちません。firebugとfirelessを使用してfirefoxでこれを行うことができますが、chromeでは機能しません

こちらの手順を実行しようとしましたが、手順に注意深く従った後でも正しく機能していないようです。

私はOSXを実行しており、node.js経由でLESSをインストールしており、保存時に少ないファイルを処理するためにST2プラグインLess2CSSを使用しています。コマンドを使用するlessc --line-numbers=mediaquery style.less style.cssと期待どおりに機能し、これを css ファイルの先頭に書き込みますが@media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}、要素を検査すると、CSS ファイルのみがキャッチされ、LESS ファイルはキャッチされません。

必要な Chrome 設定を有効にしています (SASS のサポートとソース マップの有効化)

考え？

CSS ファイルを圧縮/縮小/結合し、Chrome で使用できる有効な v3 SourceMap を生成するツールを知っている人はいますか? できればNodeJSツール。

私が知っている Node 用のコンプレッサーは、clean-css、csso、css-condense (css-parse を使用しますが、bootstrap.css をチョークします) および cssmin (YUI からのポートですが、CLI はありません) です。これらのどれもソースマップをサポートしていないようです。

SASS (Ruby) とおそらく Less.js が実装に取り​​組んでいると思いますが、それらはプリプロセッサ ツールです。

jQuery を使用してページに CSS タグを動的に追加しています。

Chrome デベロッパー ツールで表示すると、すべての CSS が「localhost」として表示されますが、これは常に役立つとは限りません。

デバッガーへの CSS のソースを識別できるようにする、CSS のソース マップのようなものはありますか?

アプリが chrome アプリとしてパッケージ化されている場合、ソース マップの実行に問題があります。(Chrome 開発者ツールに dart ファイルが表示されません)。この機能は現在サポートされていますか?

パッケージ化されたアプリとしてではなく、ページをそのまま実行すると、ソース マップは正常に機能します。

生成されたjsファイルのsourcemapingURLを絶対パスに変更することで、解凍された拡張機能でこれを機能させることができました：

パッケージ化されたアプリケーションでこれができるのだろうか。

これで成功した人はいますか？