Google ChromeでCSSがSassの何行目に記述されているか確認する方法

Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。

Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。

Google Chromeインスペクタ

このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。

これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。

sass_options = { :debug_info => true }
output_style = :expanded
#output_style = :compressed

次にGoogle Chromeのインスペクタの右下にある歯車のマークをクリックしExperimentsを選択し、「Support for Sass」にチェックを入れます。

「Support for Sass」にチェックを入れる

「Experiments」はデフォルトでは表示されないのでURLバーに「chrome://flags」と入力して、「デベロッパーツールのテストを有効にする」を有効にしてください。

デベロッパーツールのテストを有効にする

そうすると、インスペクタで何行目のSassファイルに記述されている内容か確認できるようになります。新規ウィンドウで確認しないと反映されないことがあります。

WebインスペクタでSassの行数を確認

それでは、よいSassライフを！

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー