web-dev-qa-db-ja.com

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

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

htmlcssdom
87
Rogelio

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

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

89
Rogelio

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

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

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

    Pause script execution

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

  4. ヒット F8。
  5. マウスを動かしたり、DOMを調べたりする方法は何でも。要素はそこにとどまります。

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

65
mxxk

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

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

その後、5秒以内に（または値を他の値に変更して）デバッグしたいものを表示します。

他の答えは私にはうまくいきませんでした-DOMツリーは変更され続けました（つまり、気になるものが消えました）rightスクリプトが一時停止する前に。

29
Nick Farina

これがあなたの状況で機能するかどうかはわかりませんが、通常（そしてこの点で素晴​​らしいツールであるため言及する価値があるすべての場合）Chrome開発者ツールでは要素の状態をシミュレートできます。 :focus。

これを行うには、Developer ToolsのElementsタブに移動し、右側のStylesセクションにいることを確認します（これは、Developer Toolsを起動したときのデフォルトの場所です）。これで、右上隅にあるスタイルをアイコン化するだけで_Toggle Element State。クリックすると、:active、:hover、:focusおよび:visitedは、コードビューの左側で選択した要素です。

enter image description here

11
Dumba F.

In Chromeテスト中のページの開発者ツールページで...オプションメニューをクリックし、設定の設定を開きます...

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

7
user10864281

実際の解決策ではありませんが、通常は動作します（：

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

Inspecting focusable input

7
Dmitry Vyprichenko

次の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);
1
EdC

私はツールの使用があまり得意ではないので、より迅速に修正します。

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();
0
Himanshu Pant