web-dev-qa-db-ja.com

CSS / Javascriptホバーの問題をデバッグする方法

ホバーイベントに反応するJavascriptによるDOMの変更や、：hoverセレクターによって適用されるさまざまなCSSルールを含むCSSレイアウトの問題をデバッグしたいことがよくあります。

通常、私はFirebugを使用して、問題を引き起こしている要素を調べ、そのCSSプロパティが何であり、それらのプロパティがどこから来ているのかを調べます。ただし、ホバリングが関係している場合、マウスをFirebugパネルに移動するとすぐに、関心のある要素がホバリングされなくなり、適用されるCSSルールが異なるため、（ JSのホバー）DOMが変更されます。

duringホバーイベントとしてDOMを検査するために、DOMの状態と：hoverのアプリケーションを「フリーズ」できる方法はありますか？

もちろん、この種の問題をデバッグする方法に関する他のアイデアは大歓迎です。

javascripthtmlcssfirebughover
70
Jason Creighton

_:hover_を使用する要素にonmouseover関数ハンドラーを追加します。その関数内で、知りたい要素でconsole.info(element)を呼び出します。

_myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};
_

Firebugをアクティブにしてこれを実行すると、要素はfirebugコンソールで検査できるようになります。

22
Matt Bridges

Firebugでこれを行うことができますが、少し「バギー」です。要素を調べてから、HTMLタブ、たとえばDOMタブをクリックして、HTMLタブに戻ると、右側の「スタイル」CSSタブに矢印ドロップダウンセレクターがあり、そこで選択できます。 ：アクティブにするその要素のホバー状態。表示するためにタブを切り替える必要があることを吸うが、それは私のために動作します。

44
Neum

リンクを検査するとき、FirebugはデフォルトのCSS状態、つまりa：linkに適用されたスタイルを表示します。デフォルトでは、：hoverおよび：activeスタイルは表示されません。幸いなことに、[スタイル]をクリックして適切なオプションを選択すると、リンクの状態を変更できます。

enter image description here

31
Subodh Ghulaxe

Firebugでは、HTMLビューで右側のパネルを見て、「スタイル」タブを見つけます。下矢印をクリックして、[:hover。

19
kelly johnson

Firefox（v33.1.1）の場合：

  • 要素の検査（Q）
  • DOMビューで要素を右クリックします
  • コンテキストメニューの下部で：hover、：activeまたは：focusを選択します
5
Maximilian Köhler

In Chrome（バージョン35）：

  • 検査要素
  • 要素ビューアー内で、要素を右クリックします。
  • 「要素の状態を強制する」を選択->：active、：hover、：focus、：visited
3
xonya

Dojoなどの一部のJavaScriptツールキットは、スタイルに：hoverではなくdijitButtonHoverなどのCSSクラスを使用します。

そのため、[スタイル]タブ：ホバートリックは機能しません。

代わりに、HTMLタブでNode（CSSクラスの変更者））を右クリックし、[属性変更時に中断]をクリックします。

3
Arlo

また、その要素を調べて、スタイルのタブに小さなドロップダウン矢印があるはずです。 「Show User Agent」、「Expand Shorthand Properties」などがあり、その下にさらに2つあるはずです（ホバー状態の何かを検査していると思います）:activeおよび:hover を選択 :hoverそして、あなたは黄金色になるはずです。

2
ramoneguru

cSSの問題については、Web開発者プラグインは非常に貴重です：

http://chrispederick.com/work/web-developer/

ロードすると、2つのツールを自由に使用できます。

  1. マウスオーバーされた要素上のファイルからCSSを継承し、shift-ctrl-yを使用します

  2. 計算されたcss（.cssファイルにない、またはjqueryなどの.cssメソッドを介して適用されるインラインstyle =が適用されることを含む）-shift-ctrl-fを押します

後者は、要素に適用されるすべてのクラスも返します。

もちろん、隠しフィールドやCookieの編集など、フォームの優れたデバッグ（侵入テストに使用できます）など、他の優れた用途もあります。

2
Dimitar Christoff

私は同じ問題を抱えていて、Firebugでホバーオブジェクトを検査することはできませんでしたが、SafariのWebインスペクターは現在の状態をフリーズして検査を許可します。 SafariのWebインスペクターをアクティブにするには、ターミナルに次の行を入力してSafariを再起動します。

defaults write com.Apple.Safari WebKitDeveloperExtras -bool true

ブラウザでホバー要素をアクティブにし、右クリックして「要素の検査」を選択します。ページは現在の状態でフリーズしますので、一瞬のオブジェクトを思いのままに調べることができます。

1
Michael Sibley

Firebugには完璧なソリューション（マウスオーバー/ホバーシミュレーション効果）はありません。

ただし、firebugでホバー状態を編集する方法はいくつかあります。

  1. :activeと共に:hover状態を追加します

    a:hover, a:active { ... }

    要素の上にマウスを置いて、ドラッグして離すと、アクティブのままになります。

  2. :hover状態を.hoverクラスに変換します

    （Firebugの[スタイル]タブで）ソースファイルをクリックして、CSSルールを編集できます。

    それからもちろん、要素から.hoverクラスを追加（および削除）します。

1
Spencer

私はこの投稿が少し古いことを知っていますが、Googleでこれを見つけた人のために、マウスを動かすだけでHTML/CSSレイアウトを視覚化できるクロスブラウザツールを作成しました。ホバー状態の要素を簡単に表示できます。

HTML Box Visualizer-GitHub

0
Gabriel McAdams

新しいFirefoxバージョン（少なくともv57以降）では、インスペクターのUIは他の回答が投稿されたときとは少し異なります。エレメントの:active/:hover/:focus状態を有効にしてフリーズするには、それを検査し（右クリック-> [エレメントの検査]）、インスペクターで次をクリックします。

enter image description here

結果：

enter image description here

ソース （画像はCC-BY-SA v2.5、Mozilla Contributorsでライセンスされています）

0
balu

私はしばしば、ホバーされたイベントを「フリーズ」するために、いくつかの代替CSSまたはJavascriptを作成します。 Firebugで完全に微調整し、ホバーを元に戻します。

0
Ecropolis

はい、ホバー状態をトリガーするときに「要素を検査」を右クリックできます。これはFirebugとWebKitでうまくいきました。

0
user1703862