7

WebサイトのFirebug/Dev Toolsを使用して、消失する要素をどのようにデバッグしますか？

mouseleave/outで消えるdivがあります。このdivをデバッガーで調べたいのですが、firebug / debuggerウィンドウに行く途中で、調べたいdivが消えてしまいます。

誰かがこれを達成するためのトリックを持っていますか？

編集：-表示とはマークされていません：なしですが、DOMから削除されています。それがなくなった場合、これを見つけるのは少し難しいです:-)

4

5 に答える 5

5

mouseoutで消えるノードの例については、このjsFiddleを参照してください。

他の回答のいくつかは、iFramedコンテンツを処理/キャッチしないことに注意してください。これらの2つの方法は...

OPが言ったように、これらの要素をキャッチする最も簡単な方法は、firebugのBreakOnMutate関数を使用することです。

ここに画像の説明を入力してください

もう1つの簡単な方法は、ファイルを保存することです。

  1. マウスで適切な要素にカーソルを合わせながら...

  2. を押しControlSます。「名前を付けて保存」機能は、生成されたコードを保存します。
    jsFiddleなど、オーバーライドするサイトの場合 は、を押してから（Windowsマシンではとにかく）を押します。ControlSAltFA

  3. 保存したコードを開くと、そこにつかの間の要素が表示されます。iFramedコンテンツは_filesサブフォルダーにあります。

于 2011-07-19T01:13:49.647 に答える
5

DevToolsを使用して消失要素をデバッグするには、要素を選択し、コンテキストメニューで[中断... ]を選択することで、サブツリーと属性の変更またはノードの削除を簡単に中断できます（以下を参照）。

ブレークオン：サブツリーと属性の変更またはノードの削除

または、DOM要素にアタッチされたイベントに関するデバッグ情報を表示できるビジュアルイベントまたはビジュアルイベント2を試すこともできます。参照：DOMノードでイベントリスナーを見つける方法は？

于 2016-02-08T15:54:38.307 に答える
2
  1. Firebugを開きます。
  2. マークアップでdivを見つけます。

Ctrl + Fを使用して検索すると、追加のポイントが得られます。

于 2011-07-15T20:59:49.900 に答える
2

Ctrl + Shift + Cは、要素の検査のショートカットキーの組み合わせです。FireBugWikiから。

于 2011-07-15T21:00:40.670 に答える
1

要素を右クリックしてコンテキストメニューを表示し、[要素の検査]をクリックします。

更新：要素がDOMから削除され、非表示にされていないという事実に対処するため。

http://jsfiddle.net/x3v3q/

$('#mydiv').mouseout(function(){
    alert('hi');    
});


$('*').unbind();

jQueryを使用すると、ページ上のすべての要素のすべてのイベントのバインドを解除できます。jsfiddleコードを実行すると、「unbind」がコメント化されたときに機能することがわかります。ただし、「unbind」を実行すると、要素からすべてのイベントハンドラーが削除されます。

ファイアバグコンソールからバインド解除を実行する場合、要素を削除する前に、右クリックして[要素の検査]を実行するか、他の提案の1つを使用して要素を検査できます。

ページにjQueryがロードされていない場合は、FireQueryプラグインをインストールし、「jquerify」を押して、まだロードされていないページにjQueryを挿入できます。https://addons.mozilla.org/en-US/firefox/addon/firequery/を参照してください

お役に立てば幸いです...

于 2011-07-15T21:05:44.393 に答える