フォーカスが失われたときにDOMから消えるHTML要素を検査するにはどうすればよいですか？

入力からテーブルセルへのCSSプロパティを検査しようとしています。入力を調べようとすると、クリックするとフォーカスが失われ、フォーカスが失われると入力が消えます。別のウィンドウ（インスペクター）に移動しているときにフォーカスを失わないようにするにはどうすればよいですか？

Chromeブラウザで、デベロッパーツールを開き、[ 要素]タブを選択してから、検査する要素の親ノードのコンテキストメニューを開き、コンテキストメニューで[ ブレークオン ] > [ サブツリーの変更 ]をクリックします。

その後、ページをクリックするだけで、フォーカスを失ったり、検査する要素を失うことなく、インスペクターにアクセスできます。

マウスを動かさずにキーボードショートカットでJavaScriptの実行を一時停止すると、消える要素をキャプチャできます。Chromeでこれを行う方法は次のとおりです。

1. 開発者ツールを開き、ソースに移動します。

2. スクリプトの実行を一時停止するショートカットに注意してください— F8。

   

3. UIを操作して、要素を表示します。

4. ヒットF8。
5. マウスを動かしたり、DOMを調べたりする方法。要素はそのまま残ります。

このトリックは、Firefoxやその他の最新のブラウザでも機能します。

他のすべてが失敗した場合は、コンソールに次のように入力します。

setTimeout(() => { debugger; }, 5000)

次に、デバッグするものをすべて表示するために5秒（または値を他の値に変更）します。

他の回答のどれも私のために働いていない- DOMツリーが（私が消失気にすなわちものを）修正取得保管右のスクリプトが一時停止する前に。

これがあなたの状況でうまくいくかどうかはわかりませんが、Chromeデベロッパーツールでは通常（そして、この点についてはすべてのケースで言及する価値があります）、要素の状態をシミュレートできます:focus。

これを行うにElementsは、開発者ツールのタブに移動Stylesし、右側のセクションにいることを確認します（これは、開発者ツールを起動したときのデフォルトの場所です）。右上のスタイルの下にアイコンがありますToggle Element State。あなたはそれをクリックすると、シミュレートすることができ:active、:hover、:focusおよび:visited要素のために、あなたのコードビューで、左側に選択しました。

テスト中のページの開発者ツールページのChromeで...オプションメニューをクリックし、設定の設定を開きます... DevToolsで[フォーカスされたページのエミュレート]を有効にします

次に、テストページで要素を表示します。これは、ポップアップ検索結果を画面に表示するように焦点を合わせているため、うまく機能しました。

実際のソリューションではありませんが、通常は機能します（：

1. 要素に焦点を合わせる
2. 右クリックでコンテキストメニュー
3. 下に移動して開発者ツール

私は非常に困難な状況にあり、ここから回答が機能しませんでした（私にとっては本文であるコンテナー、または元のイベントを変更する回答を確認していなかったため、それを知りませんでした）。私はついにChrome Inspectorのコントロールイベントリスナーのブレークポイントを介してブレークすることで回避策を見つけました。多分それはまた、F8やマウスの右クリックでもポップアップを非表示にする複雑な状況を壊すクロスブラウザーの方法でもあります。

次のJavascriptをブラウザ開発者コンソールに貼り付けます。

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

ツールの使い方があまり得意ではないので、すぐに修正しました。

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Chrome DevToolsを開いてから、キーボードショートカットを使用して要素インスペクターをトリガーすると、問題が解決するはずです。

Mac： Cmd+Opt+JそしてCmd+Opt+C

Windows： Ctrl+Shift+JそしてCtrl+Shift+C

[