ChromerデベロッパーツールでのSass/SCSSのサポート

Question

これまでのところ、Chrome開発ツールはChrome実験の助けを借りて、厳密にはSCSSをサポートしていましたが、 "検査"。

サポートは、サイトのCSSファイルを検査する能力で明らかにし、CSSは、その後CSSパネルで、--debug-info（SCSS 3.2.7）を使用して、SCSSからコンパイルされた場合：

代わりにCSSファイルのリンクをクリックすると、対応するSCSSファイルのリンクが表示されます。クリックすると、CSSルールの検証に貢献したSCSSルールのリソースファイルが開きます（CSSファイルと同じように）。

何らかの理由で、（私の）最新のChromeアップデートでの動作が停止しています。

これは私が現在行っている作業（SCSSの大規模プロジェクトの再編成）にとって重要なことです。これは誰でも同じことを経験したのですか？重要なのは、誰でもそれを修正する方法を知っていますか（古いChromeバージョンを狩ることなく）？

は、私は適切なSEチャンネルがどうなるかわからなかったが、それは開発に関係するので - ここでは

P.S.ですリリース、ベータ版、カナリア

更新18.06.13

- FireSASSにそれらが示され、アクセスされているので、SCSSが生成するパスが同じで、私が試したどのチャンネルで起こる

正しく、正しいように見えます

古い（--debug-info）日がなくなったようですので、唯一の可能性として@electric_g答えを受け付けます。

Answer 1

私はクロームカナリアに同じ問題を抱えていたし、私は次のようにそれを修正：

まず私は、ソースマップのサポートが有効：ウェブインスペクター - > - >設定 - > [全般]タブを[ソースマップを有効にする]をオンにします。少なくともサス3.3を持っている

sass -v 

と

​​3210

チェック

実行：

は、その後、私はここに http://snugug.com/musings/debugging-sass-source-mapsた手順を使用して、（ソースマップをサポートしています）サス3.3をインストールしました。 0.α101 --debug-info/ -gの代わりに --sourcemap flagを使用してくださいあなたのファイルをコンパイルするとき。

Answer 2

誰かがここで終わる場合、Chrome for Sassでソースマップを使用するには、最初に--sourcemapフラグを使用する必要があります。

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css 

さらに詳しい情報：https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

--debug-infoフラグがFireSassためです。

Answer 3

Chromeにアップデートエラーが発生している可能性があります。私は右上のメニューをクリックし、About About Chromeをクリックすると、あなたのバージョンが表示されます（31以上になるはずです）。私の古いバージョンと更新エラーが表示されました。

Chromeをアンインストールしてコンピュータを再起動し、Chromeをもう一度インストールします。

すべての最新ツールが必要です。 SASSのサポートは私のバージョンではもはや実験的ではなく、デフォルトでオンになっています。しかし、それをオンにする必要があります：

• クロム：//フラグをオンにし、デベロッパーツールの実験を有効にします。
• オープンデベロッパーツール（右のWebページをクリックしてエレメントを点検）
• 下での歯車アイコンをクリックして右
• クリック実験、および
• SASSのサポートを有効にする]をクリックし[全般]をクリックし、CSSのソースが
をマップ有効にする]をクリックします