104

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

4

7 に答える 7

161

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

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

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

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

于 2011-07-21T15:30:43.163 に答える
16

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

于 2011-04-27T11:07:52.533 に答える
6

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

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

于 2011-06-23T16:01:18.863 に答える
5

Chromeの場合:

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

Firefoxの場合:

ここに画像の説明を入力してください

Firebugで:

ここに画像の説明を入力してください

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

于 2015-05-27T08:59:09.067 に答える
1

私はあなたの質問を正しく理解しているかどうかはわかりませんが、イベントハンドラーコードを確認したい場合は、要素を調べて、要素パネルの[イベントリスナー]サイドバーペインを確認できます。もう1つの方法は、スクリプトパネルの一時停止ボタンを押して要素にカーソルを合わせるだけです。デバッガーは、最初のイベントハンドラーの最初の命令で停止します。

于 2011-04-27T01:40:32.027 に答える
1

Chrome DevToolsを使用して、ホバー状態を確認できます。

ここに画像の説明を入力してください

YouTubeのChromeDevToolsでホバー状態を確認する方法。

于 2021-09-24T01:56:23.977 に答える
0

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

Chromeデベロッパーツールの:hoverstateをご覧ください

于 2017-01-06T08:08:15.150 に答える