11

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 のサポートとソース マップの有効化)

考え？

4

3 に答える 3

4

これは、less.js 1.5b4 および Chrome 30.0.1599.69 で完全に機能するようになりました。

基本的に、lessc が css ファイルの最後に有効なソース マップ URL を生成することを確認する必要があります。

/*# sourceMappingURL=/templates/lwks/css/template.css.map */

.css.mapファイルがブラウザによってロードされていること。これでも何らかの理由でうまくいかない場合は、chrome://flags Enable Developer Tools Experimentsがオンになっていることを確認してください。

ここに画像の説明を入力

詳細はこちら: https://github.com/less/less.js/issues/1050

于 2013-10-12T11:32:54.127 に答える
3

ブログの投稿者はこちら...戻って投稿を更新したので、通常の Chrome 26 で動作するようになりました。Canary をチェックインしたところ、もう動作しないようです。したがって、Chrome 24 - 26 は良好ですが、Canary は壊れています。

于 2013-03-28T15:47:01.653 に答える
0

あなたが言及している問題は関連していないと思います。

私が理解している限り、サーバー側でLESSファイルをコンパイルし、キャッシュされたものではなく、新しいcssファイルを取得するだけですか? 私は正しいですか？

Google Chrome のキャッシュを無効にしてみましたか？

于 2013-03-27T17:50:39.600 に答える