Wie kann ich ein HTML-Element überprüfen, das bei verlorenem Fokus aus dem DOM verschwindet?

Ich versuche, CSS-Eigenschaften von einer Eingabe in eine Tabellenzelle zu überprüfen. Die Eingabe wird beim Klicken angezeigt und verschwindet bei verlorenem Fokus, wie wenn ich versuche, sie zu überprüfen. Wie kann ich es tun, um den Fokus nicht zu verlieren, während ich zu einem anderen Fenster (dem Inspektor) wechsle?

Öffnen Sie im Chrome-Browser die Entwicklertools und wählen Sie die Registerkarte Elemente. Öffnen Sie dann das Kontextmenü des übergeordneten Knotens des Elements, das Sie untersuchen möchten. Klicken Sie im Kontextmenü auf Unterbrechen > Teilbaumänderungen .

Anschließend müssen Sie nur noch auf die Seite klicken, um zum Inspektor zu gelangen, ohne den Fokus oder das zu inspizierende Element zu verlieren.

Sie können das verschwindende Element erfassen, wenn Sie die JavaScript-Ausführung mit einer Tastenkombination anhalten, ohne die Maus zu bewegen. So geht's in Chrome:

1. Öffnen Sie die Entwicklertools und gehen Sie zu Quellen.

2. Beachten Sie die Verknüpfung zum Anhalten der Skriptausführung F8.

   

3. Interagieren Sie mit der Benutzeroberfläche, damit das Element angezeigt wird.

4. Hit F8.
5. Wie Sie Ihre Maus bewegen können, überprüfen Sie das DOM, was auch immer. Das Element bleibt dort.

Dieser Trick funktioniert auch in Firefox und anderen modernen Browsern.

Wenn alles andere fehlschlägt, geben Sie dies in die Konsole ein:

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

Dann haben Sie 5 Sekunden Zeit (oder ändern Sie den Wert in einen anderen Wert), damit alles angezeigt wird, was Sie debuggen möchten.

Keine der anderen Antworten funktionierte für mich - der DOM-Baum wurde ständig geändert (dh Dinge, die mir wichtig sind, verschwanden), kurz bevor das Skript angehalten wurde.

Sie sind sich nicht sicher, ob dies in Ihrer Situation funktioniert, aber normalerweise (und in jedem Fall erwähnenswert, da es ein großartiges Tool ist) können Sie in Chrome Developer Tools Elementzustände simulieren, und einer ist es auch :focus.

Gehen Sie dazu zur ElementsRegisterkarte in den Entwicklertools und stellen Sie sicher, dass Sie sich im StylesAbschnitt rechts befinden (dies sollte der Standardspeicherort sein, wenn Sie die Entwicklertools starten). Jetzt haben Sie neben den Stilen in der oberen rechten Ecke ein Symbol Toggle Element State. Wenn Sie darauf klicken können Sie simulieren :active, :hover, :focusund :visitedfür das Element ausgewählt Sie auf der linken Seite in der Code - Ansicht.

Klicken Sie in Chrome auf der Seite mit den Entwicklertools für die zu testende Seite auf das Optionsmenü und öffnen Sie die Einstellungen für die Einstellungen. Aktivieren Sie unter DevTools die Option "Emulieren einer fokussierten Seite".

Lassen Sie dann auf der Testseite die Elemente erscheinen. Dies hat dazu beigetragen, dass meine Popup-Suchergebnisse auf dem Bildschirm bleiben, damit ich damit arbeiten kann.

Keine echte Lösung, aber es funktioniert normalerweise (:

1. Fokussiere das Element
2. Klicken Sie mit der rechten Maustaste für das Kontextmenü
3. Gehen Sie zu den Entwicklertools

Ich hatte eine sehr schwierige Situation und von hier aus funktionierte keine Antwort (ich habe die Antworten nicht überprüft, indem ich den Container geändert habe, der der Körper für mich oder das ursprüngliche Ereignis ist, weil ich das nicht weiß). Ich habe endlich eine Problemumgehung gefunden, indem ich über die Kontrollereignis-Listener-Haltepunkte in Chrome Inspector gebrochen habe. Vielleicht ist das auch eine browserübergreifende Methode, um in komplizierten Situationen zu brechen, in denen sogar F8 oder ein Rechtsklick das Popup wieder ausblenden:

Fügen Sie das folgende Javascript in die Browser-Entwicklerkonsole ein:

// 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);

Ich habe eine schnellere Lösung, da ich nicht sehr gut mit Werkzeugen umgehen kann. Hier ist, was ich tue.

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

Wenn Sie Chrome DevTools öffnen und dann den Elementinspektor mithilfe von Tastaturkürzeln auslösen, sollte das Problem behoben sein.

Mac: Cmd+Opt+J und dannCmd+Opt+C

Windows: Ctrl+Shift+J und dannCtrl+Shift+C

[