In Chrome und Chromium können Sie mit der rechten Maustaste auf einen Knoten auf der Registerkarte Elemente / Inspector der Entwicklerwerkzeuge klicken und festlegen, dass die Teilbaumänderung, die Attributänderung und der Knoten entfernt werden. Obwohl Sie keine Bedingungen für diese Haltepunkte hinzufügen können, z. B. nur, wenn eine bestimmte Variable einen bestimmten Wert enthält, sind dies die besten Optionen, die ich gefunden habe.
In Firefox werden die Ereignisse, die Sie unterbrechen können, durch Klicken auf die Schaltfläche zum Erweitern von Fenstern auf der rechten Seite der Registerkarte Debugger gefunden.
Die Änderung der Teilbaumstruktur ist sehr nützlich, wenn Sie nicht wissen, wo das DOM geändert wird. Setzen Sie diese Bedingung einfach auf den Body-Knoten (oder höher) und das Skript, das das DOM unter dem Body-Knoten ändert, wird sofort angehalten. Dies ist auch sehr nützlich, wenn ein Knoten, den Sie untersuchen möchten, noch nicht vorhanden ist. Sie wissen jedoch, wo der Knoten eingefügt wird, damit Sie den übergeordneten Knoten ändern können.
Das DOM wird im Wesentlichen in dem Zustand eingefroren, in dem es sich befindet, kurz bevor die tatsächliche Änderung eintritt (wenn ein Knoten eingefügt wird), wobei sich der Skript-Debugger auf der Zeile befindet, die die Änderung ausgelöst hat.
Ein Problem besteht darin, dass das Browserfenster eine Überlagerung erhält, die jegliche Interaktion mit dem Browser verhindert, selbst wenn Sie mit der rechten Maustaste klicken und andere zu inspizierende Elemente auswählen. Es ist weiterhin möglich, andere Knoten zu überprüfen, indem Sie sie auf der Registerkarte Elemente auswählen oder indem Sie im linken oberen Bereich des Werkzeugfensters auf das Symbol "Element auf der Seite auswählen, um es zu untersuchen" klicken.
Wenn Sie schauen, zu untersuchen, was die DOM aussieht, wenn bestimmte Elemente :focused, :hover, :active, oder :visitedkönnen Sie auch die Staaten durch das Rechtsklick - Menü in der Registerkarte Elemente erzwingen.