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:

http://jsfiddle.net/MSZEx/

HTML:

<div id="container">
    <button id="the_button">Click me to show field</button>
</div>

Javascript:

$("#the_button").click(function() {
    $elt = $("<input>").attr("type", "text").attr("id", "text_field");
    $("#container").append($elt);
    $elt.focus();
    $elt.blur(function() {
       $elt.remove(); 
    });
});

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

Benutzer-Avatar
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

Benutzer-Avatar
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

Geben Sie hier die Bildbeschreibung ein

Benutzer-Avatar
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.

Benutzer-Avatar
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.

Benutzer-Avatar
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; })

in dieser Geige

Wie in dieser SU-Frage vorgeschlagen

Ich weiß nicht, ob es in Chrome funktioniert, aber in Firefox, wenn Sie bereits eine Konsole geöffnet haben.

  • In einigen Szenarien ist dies die einzige Lösung

    – weit

    5. August 2021 um 13:46 Uhr

1187350cookie-checkUntersuchen Sie das Element, das onblur entfernt wurde

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy