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

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

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

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

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

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

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

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

Chromeの場合：

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

Firefoxの場合：

Firebugで：

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

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

答えは以下のリンクをご覧ください

Chromeデベロッパーツールで：hoverの状態を確認する