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ライフを!

関連エントリー

CodeKitで簡単にCSS Preprocessorを利用する!
CodeKitの新機能「Kit Language」
MacのCodeKitでCompassを使う
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«Web制作の現場で使うjQueryデザイン入門の改訂版が発売されます。 | メイン | Re:プログラミング学習手段としての写経について»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/632
コメントを投稿