Untersuchen Sie das Element, das onblur entfernt wurde
Lesezeit: 4 Minuten
Ich habe also ein Element, das mit Javascript dynamisch zur Seite hinzugefügt wird. Nachdem es hinzugefügt wurde, wird ihm der Fokus gewährt.
Ich möchte das Element in Chrome-Entwicklungstools untersuchen, aber das Problem ist, dass es einen onblur-Ereignishandler hat, der es aus dem DOM entfernt. Wenn ich also auf die Entwicklerwerkzeuge klicke, um das Element auszuwählen, wird es entfernt. Ein Beispiel ist hier zu sehen:
In dem Beispiel möchte ich das Eingabeelement untersuchen können, das angezeigt wird, wenn auf die Schaltfläche geklickt wird.
Setzen Sie einen Haltepunkt auf die $elt.remove(); Linie.
– geb
18. Juni 2014 um 14:07 Uhr
@blgt Also das ist definitiv generell möglich, aber was wäre, wenn mein Javascript sehr sehr lang wäre und es minimiert würde. Wenn Sie eine Antwort posten, werde ich sie auswählen, wenn keine bessere Lösung von jemand anderem präsentiert wird.
– dieser Idiot
18. Juni 2014 um 14:08 Uhr
Ich habe es zum Laufen gebracht, indem ich mit der rechten Maustaste auf den übergeordneten Knoten im Baum ohne Fokus und dann geklickt habe
-> Break on… -> Subtree Modifications
Beachten Sie, dass eine Seitenaktualisierung dies nicht löscht. Daher müssen Sie den Inspektor möglicherweise schließen und erneut öffnen, wenn Sie vergessen haben, wo Sie Ihren Haltepunkt gesetzt haben
Sie finden solche Breakpoints auch in DOM Breakpoints im rechten Bereich.
– Justin McCandless
23. Januar 2018 um 23:23 Uhr
Um den übergeordneten Knoten überhaupt zu finden, musste ich auch einen zeitgesteuerten Haltepunkt über die Konsole setzen. (1) setTimeout(() => {debugger;}, 3000 (2) Sie haben 3 Sekunden, um das Ding erscheinen zu lassen (3) Die Ausführung ist eingefroren, sodass Sie den DOM-Baum im Inspektor durchsuchen können, um den Knoten zu finden.
– mgalgs
14. Juni 2021 um 19:44 Uhr
Klicken Sie mit der rechten Maustaste auf den Knoten im Elementbaum -> Break on… -> Node Removal.
Der Debugger bricht jetzt ab, bevor der Knoten entfernt wird.
Die Frage war, wie man zu dem Punkt kommt, an dem man dazu in der Lage ist. z.B. In der Geige von OP verlieren Sie den Fokus (wodurch das Element entfernt wird), wenn Sie mit der rechten Maustaste in den Elementbaum klicken.
– geb
18. Juni 2014 um 15:31 Uhr
@blgt Wenn die Entwicklertools bereits geöffnet sind und Sie den übergeordneten Knoten erweitern, bevor Sie auf die Schaltfläche in der Geige klicken, können Sie mit der rechten Maustaste auf den Textfeldknoten klicken und die Unterbrechung beim Entfernen des Knotens einrichten. Funktioniert bei mir.
– darthmaim
18. Juni 2014 um 18:21 Uhr
@darthmaim Welche Chrome-Version verwendest du? Ich kann nicht replizieren (Chrome 35.0 unter Win8)
– geb
18. Juni 2014 um 21:16 Uhr
@blgt War Chrome 35 auf dem Mac bei der Arbeit, hier zu Hause unter Windows 7 kann ich es auch nicht replizieren.
– darthmaim
19. Juni 2014 um 16:13 Uhr
Dies ist die akzeptierte Antwort, funktioniert aber anscheinend nicht unter Windows (wie hier) – ich denke, das sollte in der Antwort klar angegeben werden.
– IARI
22. November 2020 um 15:59 Uhr
Jamie
All diese Antworten haben bei mir nicht wirklich funktioniert.
Zum Zeitpunkt des Schreibens (Chrome 92) können Sie die verwenden Rendering Einstellungen in den Chrome-Entwicklertools:
Open Chrome Dev Tools > Click the kebab menu > More tools dropdown > Rendering > Check emulate a focused page
Dadurch bleibt der Fokus aktiviert, während Sie in Chrome Dev Tools herumspielen 🎉
Edit: 23.03.2022 – in Chrome 99 ist das immer noch so
Das ist genau das, wonach ich gesucht habe. Es ist eine dauerhafte Lösung, die genau das tut, was ich will
– Jeremy Friesen
6. Oktober 2021 um 16:00 Uhr
Dies ist die beste Antwort. Vielen Dank!
– gabrieoliveira
5. November 2021 um 15:28 Uhr
Zuhair Taha
Der Trick, den ich gerne verwende, ist
Öffnen Sie das Quellenfenster
Zeigen Sie den Tooltip an
Verwenden Sie die Tastenkombination, um die Skriptausführung anzuhalten. (Bewegen Sie den Mauszeiger über das Pause-Symbol, um die Tastenkombination herauszufinden.)
Wenn die Skriptausführung angehalten wird, gehen Sie zurück zum Bedienfeld „Elemente“ und sehen Sie sich die QuickInfo wie gewohnt an
Qsteuer
Eine andere Möglichkeit besteht darin, die Chrome-Entwicklungstools zu öffnen, das betreffende Element im Browser-Ansichtsfenster zu fokussieren und dann zu drücken F8 Dadurch wird verhindert, dass JS ausgeführt wird (ohne den Fokus zu verlieren), und das Element bleibt auch dann bestehen, wenn es den Fokus verliert, bis Sie JS erneut aktivieren. Auf diese Weise können Sie das Element im DOM-Baum untersuchen und von dort aus fortfahren.
Aktivieren Sie JS, indem Sie auf klicken F8 wieder.
James
Wie wäre es, wenn Sie einfach den Klick von der Konsole simulieren?
Öffnen Sie Ihre f12-Tools auf der Website, erhalten Sie die Element-ID und machen Sie Ihre eigenen $("#the_button").click(). Die Konsole behält den Fokus bei, sodass Ihr Element nicht verschwimmt. Sie können dann zur Registerkarte “Elemente” gehen und sich das CSS ansehen.
drüber
“aber was wäre, wenn mein Javascript sehr, sehr lang wäre und minimiert wurde” <- In diesem Fall könnten Sie Folgendes versuchen (verwenden Sie F12 zum Auslösen):
$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
// Or in vanilla JS:
window.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })
Setzen Sie einen Haltepunkt auf die
$elt.remove();
Linie.– geb
18. Juni 2014 um 14:07 Uhr
@blgt Also das ist definitiv generell möglich, aber was wäre, wenn mein Javascript sehr sehr lang wäre und es minimiert würde. Wenn Sie eine Antwort posten, werde ich sie auswählen, wenn keine bessere Lösung von jemand anderem präsentiert wird.
– dieser Idiot
18. Juni 2014 um 14:08 Uhr