chrome Webインスペクターを使用してホバーコードを表示する方法
ChromeのWebインスペクターを使用してコードを表示することは非常に便利です。しかし、たとえばボタンのホバーコードをどのように表示しますか？ボタンの上にマウスを移動する必要があるため、インスペクターでマウスを使用できません。インスペクターでこれを達成するためのショートカットや他の方法はありますか？
これで、擬似クラススタイルルールの両方を確認し、それらを要素に強制することができます。
[スタイル]ペインで:hoverなどのルールを表示するには、右上の小さな点線のボックスボタンをクリックします。
要素を:hover状態に強制するには、それを右クリックします。
または、スクリプトパネルのイベントリスナーブレークポイントサイドバーペインを使用して、マウスオーバーハンドラーで一時停止することを選択できます。
または、スクリプトパネルのイベントリスナーブレークポイントサイドバーペインを使用して、マウスオーバーハンドラーで一時停止することを選択できます。
少し面倒ですが、要素を右クリックして、マウスをリンクの上に置いたまま、キーボードを使用して[要素の検査]リンクを選択し、Enterキーを押します。これにより、選択した要素のホバー擬似クラスのcssが表示されます。
今後のビルドでこれが少し簡単になることを願っています。
Chromeの場合：
要素にマウスオーバーし、CTRL+SHIFT+Cをクリックしてその要素を検査することもできます。
Firefoxの場合：
firebugで：
私はあなたの質問を正しく理解しているとは思いませんが、イベントハンドラコードを確認したい場合は、要素を調べて、要素パネルのイベントリスナーサイドバーペインを見るだけです。別の方法は、スクリプトパネルで一時停止ボタンを押して、要素をホバーするだけです。デバッガーは、最初のイベントハンドラーの最初の命令で停止します。
回答については、以下のリンクをご覧ください