TOOL 備忘録 | メシのタネ

chorome2
このエントリーをはてなブックマークに追加

hoverやvisited時のスタイルを知る方法

 2015/02/12

クロームのデベロッパーツールを使って、リンクのhoverとかactiveとかその辺にかかってるCSSを知る方法があります。そのやり方をささーと書いてささーっと終わろうと思います。

調べ方

デベロッパーツールで対象の要素を開いて、ForceElementStateを選択するとまた入れ子のメニューがあって、hover,active,visited,focusが選択できます。
hidebuforce1

まぁこんな感じでそれぞれ選択してやれば、そのスタイルが効いた状態でブラウザがWebサイトを表示してくれます。

要素選択中にできること

この他にもメニューがあるので自分が分かる範囲で書いて行きたいと思います。

Add attribute 属性の追加ができます。
Edit attribute マウスカーソルが居るとこの属性の変更ができます。
Edit as HTML 名前の通り対象要素のHTMLの変更ができます。
Copy CSS path 対象要素へのCSSのパスがコピーできます。コピーしてCSSを書けばその要素にスタイルを効かせる事ができるんだと思います多分。
Copy Xpath 対象要素へのXpathのパスがコピーできます。
break on これもForceElementStateと同じように入れ子になってて、一番上が要素が変更されたらブレークして、真ん中が属性変更されたときにブレークして、一番下のやつが要素が削除された時にブレークします。

べんりですよねー。


このエントリーをはてなブックマークに追加

コメント

プログラミング備忘録 | メシのタネ