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