web-dev-qa-db-ja.com

Firebug:マウスの動きで変化する要素を検査する方法は?

マウスをある領域に置いた場合にのみページに表示される要素を検査する必要がある場合があります。問題は、変更を確認するためにFirebugコンソールに向かってマウスを動かし始めると、マウスアウトイベントがトリガーされ、検査しようとしているすべての変更が消えることです。そのような場合の対処方法は?

基本的に私は次のいずれかを探しています:

  • マウスを動かさずにfirebugコンソールに切り替えます(キーボードショートカットを使用している場合がありますが、キーボードのみでfirebugを使用する方法がわかりません)
  • マウスの動きによってイベントがトリガーされないように、ページを「フリーズ」する機能があります。

ありがとう。

68
serg

これもできると思います:

  • Firebugs Inspectモードを選択します

  • 検査したい要素をポップアップするアイテムにカーソルを合わせてから、 Tab キーを数回押してFirebugをアクティブにします(Firebugがアクティブなコンポーネントだった時期を確認するのは難しいですが、試行錯誤のようなものはありませんでした。FirefoxesFind Toolbarがアクティブだったのを見て、 Shift + Tab Firebugに入るために後方に2回。

  • 次に、L/R矢印キーを使用して要素を縮小/拡張し、U/D矢印キーを使用してFirebugsコンソールをナビゲートします

とにかく私のために働いた!

14
Meerkatlookout

HTMLツールチップ(Firebug)

インスペクターまたはDOMで要素を選択します。 firebugの[スタイル]タブに移動し、タブの小さな矢印をクリックして[:hover](利用可能な[:active])を選択します。状態は「ホバー」のままであり、他の要素を選択してホバーさせることができます。

HTMLツールチップ(Firefox開発者ツール)

enter image description here

ボタンをクリックして3つのチェックボックスを表示します。これらのチェックボックスを使用して、選択した要素の:hover、:activeおよび:focus疑似クラスを設定できます

この機能は、HTMLビューのポップアップメニューからもアクセスできます。

ノードにこれらの擬似クラスのいずれかを設定すると、マークアップビューで、擬似クラスが適用されたすべてのノードの横にオレンジ色のドットが表示されます。

enter image description here

JQuery Tooltip

コンソールを開き、jQuery('.css-class').trigger('mouseover')と入力します

Regular Javascript Tooltip

コンソールを開き、document.getElementById('yourId').dispatchEvent(new Event('mouseover'));と入力します

94
Stefan

Firebugのスタイルパネルにはドロップダウンメニューがあり、_:activeまたは:hover状態。

enter image description here

33
david.s

Jquery UIツールチップでは、最終的に要素の非表示に長い遅延を設定したため、削除する前に要素を調べる時間ができます。たとえば、これを使用してツールチップを検査しました。

    $( document ).tooltip({ hide: {duration: 100000 } });

の代わりに:

    $( document ).tooltip();
13
Ronen Festinger

Mouseoutイベントハンドラーの先頭にブレークポイントを挿入できます。そのコードは、続行を許可するまで実行されません。実行が停止している間にDOMインスペクターなどを使用できます。

6
NickFitz

タイマーでデバッガーを開始することもできます。コンソールに次のコマンドを入力します。

setTimeout(function(){ debugger; }, 10000);

これにより、マウスを使用して、ページを検査するために必要な方法でページを表示するのに10秒かかります。デバッガーが起動すると、ページがフリーズし、DOMを変更したり、追加のマウスイベントに応答したりすることなく、開発者ツールタブで要素を探索できます。

6
Casey

要素を検査するためのFirebugのホットキーは Ctrl + Shift + C (Windows/Linux)。

すべてのリストについては、こちらをご覧ください Firebugのキーボードショートカット

3
Dave M-engineer

bootstrapツールチップの場合:

$(document ).tooltip({delay: { show: 0, hide: 100000 }});
2
jpprade

CSSメニューで:hoverを選択すると、一部のCSSコードのみを検査したい場合は良いかもしれませんが、JavaScriptを使用して検査したいものが変更された場合は機能しません。

この場合の簡単なハックは、Firebugを目的の場所に移動し、そこから何かをブラウザーウィンドウの外にドラッグアンドドロップするのとは別のウィンドウ(Firebugバーの右上隅)で開くことです。これで、Firebugウィンドウで何でも検査できます。マウスをブラウザウィンドウに戻さないでください。

1
jpath

Javascriptなどのイベントマウスオーバー

  1. Firebugを開く /要素を検査します。
  2. 要素をクリック mouseoverイベントの前、例えばdivをクリックします。選択されていることを示すために青色に変わります。
  3. マウスを要素の上に置く移動しないをこの時点から先に置きます。
  4. あなたを使用して / Firebugで操作する矢印キー。
  5. あなたを使用して / +または-でコードを展開/縮小する矢印キー。
  6. ダブルタップ Tab CSSペインに移動します。
  7. 矢印キーを使用してナビゲートします。つかいます shift および矢印キーでテキストを選択します。 Ctrl & C コピーする。
  8. 保留 Shift およびダブルタップ Tab HTMLペインに戻ります。
1
Eoin

これは今では非常に古い質問ですが、質問の「ブラウザをフリーズ」部分に直接答える答えを見つけました。

Ctrl + Alt +B。これは「mutate on mutate」です。つまり、firebugが有効になっている要素(Control + Shift + C)の上にマウスを移動すると、HTML属性が変更される代わりにブレークポイントにヒットし、簡単にナビゲートしてパスなどを調べることができます。

0
David Gaskins

ChromeFirefoxとは少し異なる動作をすることがわかりました。特に、メニューの外でマウスをクリックすると閉じるメニューは、Chromeで検査するときに開いたままになります(およびFirebugで検査すると閉じる)。そのため、別のブラウザーで別の開発ツールを使用して、違いが生じるかどうかを確認することをお勧めします。

0
Greg

コンソールを開く:

JavaScriptベースのツールチップがある場合は、適切なセレクターを使用してコンソールで該当する要素を見つけます。以下のようにし、セレクターで適切な要素を見つけることができることを確認します。

$('your selector') 

上記のjavascriptを記述してEnterキーを押します。要素のリストがあります。

今、例えばライブラリがmouseenterでイベントを追加した場合、次のスクリプトを入力します。

$('your selector').mouseenter() 

Enterキーを押します。

このようにして、実際のマウスなしでマウスの動きイベントをシミュレートできます。実際のマウスポインターを使用して、デバッガーツールで問題を調査できます。

0
yogs