webdevqa.jp.net

chrome Webインスペクターを使用してホバーコードを表示する方法

ChromeのWebインスペクターを使用してコードを表示することは非常に便利です。しかし、たとえばボタンのホバーコードをどのように表示しますか?ボタンの上にマウスを移動する必要があるため、インスペクターでマウスを使用できません。インスペクターでこれを達成するためのショートカットや他の方法はありますか?

96
Bo.

これで、擬似クラススタイルルールの両方を確認し、それらを要素に強制することができます。

[スタイル]ペインで:hoverなどのルールを表示するには、右上の小さな点線のボックスボタンをクリックします。

要素を:hover状態に強制するには、それを右クリックします。

または、スクリプトパネルのイベントリスナーブレークポイントサイドバーペインを使用して、マウスオーバーハンドラーで一時停止することを選択できます。

152

または、スクリプトパネルのイベントリスナーブレークポイントサイドバーペインを使用して、マウスオーバーハンドラーで一時停止することを選択できます。

14

少し面倒ですが、要素を右クリックして、マウスをリンクの上に置いたまま、キーボードを使用して[要素の検査]リンクを選択し、Enterキーを押します。これにより、選択した要素のホバー擬似クラスのcssが表示されます。

今後のビルドでこれが少し簡単になることを願っています。

4
purpletonic

Chromeの場合:

要素にマウスオーバーし、CTRL+SHIFT+Cをクリックしてその要素を検査することもできます。

Firefoxの場合:

enter image description here

firebugで:

enter image description here

ソース: https://stackoverflow.com/a/11272205/2165415

4
T.Todua

私はあなたの質問を正しく理解しているとは思いませんが、イベントハンドラコードを確認したい場合は、要素を調べて、要素パネルのイベントリスナーサイドバーペインを見るだけです。別の方法は、スクリプトパネルで一時停止ボタンを押して、要素をホバーするだけです。デバッガーは、最初のイベントハンドラーの最初の命令で停止します。

1
loislo

回答については、以下のリンクをご覧ください

Chrome開発者ツール)のホバー状態を参照

0
Santosh Khalse