chromeのデベロッパーツールでcssのhoverを調べる方法

#概要
cssでサイトのデザインをする時にはchromeのデベロッパーツールでセレクタを確認しながら調整をする事が多いのだが、hoverやactiveの要素を調べるやり方がよくわからなかったので調べてみた。

#結果
ググったらすぐ出てきた。

choromeデベロッパーツールを開いてElementsタブを選びさらにStylesを選んだところにある画鋲iconをクリックすると好きな擬似クラスを指定して調べられる。

何度も見かけてたはずの画鋲がこんなに便利だとは知らなかった。