QKAKE::TECH

テックなことを書く

Chromeのインスペクタ機能でのCSSの見方

command + option + iデベロッパーツールを開く。 ( command + option + c でDOMインスペクタモードで起動できる )

f:id:Kaketan:20171022105920p:plain

要素を選択する。

f:id:Kaketan:20171022110003p:plain

それぞれの要素について、読み込み元が ファイル名:行番号 の形でリンクされているので飛んでみる。

f:id:Kaketan:20171022110211p:plain

コンパイル済みの定義箇所に飛ぶ。

SCSS などを用いたときに、CSS の実際の吐き出し場所を特定するためには sourcemap を用いる。 そのために config.rb などに sourcemap = true を定義しておく。これで hoge.css.map というファイルがつくられ、コンパイル前のオリジナルソースとコンパイル後のソースを紐付けることができる。

refs: