コンテンツが変化し続ける場合、FirebugまたはChrome Dev Toolsを使用して動的なWebページを検査する

DOM構造をあまりにも頻繁に変更するWebアプリをDOMで検査したい場合、FirebugとChromeインスペクターがそれらの変更を反映して、実際にそれらを検査できません。

1つの要素に焦点を合わせ、それをよりよく見たい場合、その要素を削除すると、通常はその要素を検査できません。

特定のポイントでWebページを「フリーズ」する方法や、それらのツールのみでインスペクタでDOMの変更をフリーズする方法はありますか？

ChromeとChromiumでは、開発者ツールの[要素/インスペクター]タブでノードを右クリックし、サブツリーの変更、属性の変更、ノードの削除を選択できます。これらのブレークポイントに条件を追加することはできませんが、特定の変数が指定された値を保持しているときにのみブレークするなど、私が見つけた最良のオプションです。

Firefoxでは、[デバッガ]タブの右側にある[ペインを展開]ボタンをクリックすると、ブレークできるイベントが見つかります。

サブツリーの変更を中断することは、DOMが変更される場所がわからない場合に非常に便利です。本体ノード（またはそれ以上）にその条件を設定するだけで、本体ノードの下のDOMを変更するスクリプトを即座に停止します。これは、検査するノードがまだ存在しない場合でも非常に役立ちますが、変更される親でブレークできるように、挿入先を知っています。

DOMは基本的に、実際の変更が発生する直前の状態（ノードが挿入されるなど）でフリーズされ、スクリプトデバッガーは変更をトリガーした行に座っています。

問題の1つは、ブラウザーウィンドウにオーバーレイが表示され、右クリックして他の要素を選択して検査することさえできないことです。[要素]タブで他のノードを選択するか、最初にツールウィンドウの左上にある[ページ上の要素を選択して検査]アイコンをクリックして、他のノードを検査することもできます。

あなたが特定の要素を持っているとき、DOMがどのように見えるかを調べるために探している場合は:focused、:hover、:active、または:visited、あなたはまた、要素]タブで右クリックメニューを通じてそれらの状態を強制することができます。