Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法

Chrome デベロッパーツールは便利ですけど、こんな便利な機能もあったのですね。 要素に適用されているCSSのセレクタ・プロパティ・値が、どのCSSファイルのどこに記述されているのか1クリックで見つけ出すことができる便利なテクニックを紹介します。

[wordi]

webpackでもbundle.cssとsourcemap吐く設定にすればいけると思うが

[oniipoooon]

webpackだとだめっぽい

[tkrtkhsh]

webpack 使ってるとダメっぽい

[pankichi]

[“セレクタやプロパティや値を「command+クリック」”

[hahahadaha]

「ctrl+クリック」で記述されている行へ移動、元の画面に戻ってくるには「Elements」のタブをクリック

[salamander_jp]

ぜんぜん隠してない件

[Funyapu]

隠し機能と言うか、きっとコマンド一覧に載せ忘れたんだな…

[kathew]

こんな機能が。 / ChromeやFirefoxは標準で画面を直接見ながらローカルファイルも直接編集できて大変便利