マウスをある領域に置いた場合にのみページに表示される要素を検査する必要がある場合があります。問題は、変更を確認するためにFirebugコンソールに向かってマウスを動かし始めると、マウスアウトイベントがトリガーされ、検査しようとしているすべての変更が消えることです。そのような場合の対処方法は?
基本的に私は次のいずれかを探しています:
ありがとう。
これもできると思います:
Firebugs Inspectモードを選択します
検査したい要素をポップアップするアイテムにカーソルを合わせてから、 Tab キーを数回押してFirebugをアクティブにします(Firebugがアクティブなコンポーネントだった時期を確認するのは難しいですが、試行錯誤のようなものはありませんでした。FirefoxesFind Toolbarがアクティブだったのを見て、 Shift + Tab Firebugに入るために後方に2回。
次に、L/R矢印キーを使用して要素を縮小/拡張し、U/D矢印キーを使用してFirebugsコンソールをナビゲートします
とにかく私のために働いた!
HTMLツールチップ(Firebug)
インスペクターまたはDOMで要素を選択します。 firebugの[スタイル]タブに移動し、タブの小さな矢印をクリックして[:hover](利用可能な[:active])を選択します。状態は「ホバー」のままであり、他の要素を選択してホバーさせることができます。
HTMLツールチップ(Firefox開発者ツール)
ボタンをクリックして3つのチェックボックスを表示します。これらのチェックボックスを使用して、選択した要素の:hover、:activeおよび:focus疑似クラスを設定できます
この機能は、HTMLビューのポップアップメニューからもアクセスできます。
ノードにこれらの擬似クラスのいずれかを設定すると、マークアップビューで、擬似クラスが適用されたすべてのノードの横にオレンジ色のドットが表示されます。
JQuery Tooltip
コンソールを開き、jQuery('.css-class').trigger('mouseover')
と入力します
Regular Javascript Tooltip
コンソールを開き、document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
と入力します
Firebugのスタイルパネルにはドロップダウンメニューがあり、_:active
または:hover
状態。
Jquery UIツールチップでは、最終的に要素の非表示に長い遅延を設定したため、削除する前に要素を調べる時間ができます。たとえば、これを使用してツールチップを検査しました。
$( document ).tooltip({ hide: {duration: 100000 } });
の代わりに:
$( document ).tooltip();
Mouseoutイベントハンドラーの先頭にブレークポイントを挿入できます。そのコードは、続行を許可するまで実行されません。実行が停止している間にDOMインスペクターなどを使用できます。
タイマーでデバッガーを開始することもできます。コンソールに次のコマンドを入力します。
setTimeout(function(){ debugger; }, 10000);
これにより、マウスを使用して、ページを検査するために必要な方法でページを表示するのに10秒かかります。デバッガーが起動すると、ページがフリーズし、DOMを変更したり、追加のマウスイベントに応答したりすることなく、開発者ツールタブで要素を探索できます。
要素を検査するためのFirebugのホットキーは Ctrl + Shift + C (Windows/Linux)。
すべてのリストについては、こちらをご覧ください Firebugのキーボードショートカット 。
bootstrapツールチップの場合:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
CSSメニューで:hover
を選択すると、一部のCSSコードのみを検査したい場合は良いかもしれませんが、JavaScriptを使用して検査したいものが変更された場合は機能しません。
この場合の簡単なハックは、Firebugを目的の場所に移動し、そこから何かをブラウザーウィンドウの外にドラッグアンドドロップするのとは別のウィンドウ(Firebugバーの右上隅)で開くことです。これで、Firebugウィンドウで何でも検査できます。マウスをブラウザウィンドウに戻さないでください。
Javascriptなどのイベントマウスオーバー。
これは今では非常に古い質問ですが、質問の「ブラウザをフリーズ」部分に直接答える答えを見つけました。
Ctrl + Alt +B。これは「mutate on mutate」です。つまり、firebugが有効になっている要素(Control + Shift + C)の上にマウスを移動すると、HTML属性が変更される代わりにブレークポイントにヒットし、簡単にナビゲートしてパスなどを調べることができます。
ChromeはFirefoxとは少し異なる動作をすることがわかりました。特に、メニューの外でマウスをクリックすると閉じるメニューは、Chromeで検査するときに開いたままになります(およびFirebugで検査すると閉じる)。そのため、別のブラウザーで別の開発ツールを使用して、違いが生じるかどうかを確認することをお勧めします。
コンソールを開く:
JavaScriptベースのツールチップがある場合は、適切なセレクターを使用してコンソールで該当する要素を見つけます。以下のようにし、セレクターで適切な要素を見つけることができることを確認します。
$('your selector')
上記のjavascriptを記述してEnterキーを押します。要素のリストがあります。
今、例えばライブラリがmouseenterでイベントを追加した場合、次のスクリプトを入力します。
$('your selector').mouseenter()
Enterキーを押します。
このようにして、実際のマウスなしでマウスの動きイベントをシミュレートできます。実際のマウスポインターを使用して、デバッガーツールで問題を調査できます。