Kaketan::Tech

誰かのためになるかもしれないテックなことに関するメモを書いています。

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

▼ 宣伝 ▼

これを読んでいるあなた!HP制作・アフィリエイトサイト制作に興味ありませんか?

現在、コーポレートサイトやアフィリエイトサイトの制作、月額課金制のファンクラブ制作などを行っています。

新しい収益源・集客ツールとしてのWeb制作はお任せください!「Kaketan::Tech を見た」で特別価格にてご案内いたします。

詳細は こちら のお仕事一覧をご覧ください!

プログラミング学習支援サロンのご紹介

フリーランスエンジニアの私が、あなたがプログラマとして案件を獲得できるようになるまでサポートいたします。詳細は こちら をクリック!

▲ 宣伝 ▲

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: