Die DevTools (in jedem Browser) sind ein unschätzbares Entwicklungswerkzeug für CSS-Entwickler. Wenn Sie die Stile eines beliebigen Elements sehen (und damit spielen) möchten, ist eine schnelle Inspektion nur wenige Klicks entfernt.
Klicken Sie mit der rechten Maustaste auf etwas und wählen Sie „Element untersuchen“ oder öffnen Sie die DevTools und verwenden Sie deren Auswahlwerkzeuge, um das zu erhalten, was Sie benötigen.
Aber… manchmal kann es schwierig oder unmöglich sein, das Element, das Sie untersuchen möchten, in den DevTools anzusprechen. Die DOM-Ereignisse, die für die Arbeit mit den DevTools selbst erforderlich sind, können stören.
Nehmen wir an, ich habe ein Element beim mouseenter-Ereignis eines bestimmten anderen Elements eingefügt und es dann bei mouseleave wieder entfernt.
Egal wie sehr ich mich bemühe, ich kann dieses neu hinzugefügte Element nicht für die Inspektion ansprechen.
Die Chrome DevTools können einen :hover-Stil simulieren, aber das hilft uns hier nicht wirklich weiter. Es löst kein DOM-Ereignis aus, es simuliert nur den CSS-Zustand.
Der Trick ist, einen Debugger genau dann auszulösen, wenn Sie ihn brauchen
Eine debugger;-Anweisung pausiert, wenn die DevTools geöffnet sind, das DOM quasi. Es werden keine weiteren Ereignisse ausgelöst und die Skriptausführung wird vollständig angehalten.
Aber… Sie können die DevTools trotzdem benutzen!
Das ist Ihre Gelegenheit, das sonst unmöglich auszuwählende Ding auszuwählen und zu tun, was Sie tun müssen. Sie können diese debugger;-Anweisung direkt in Ihren Code einfügen, wo Sie sie brauchen (denken Sie daran, dass die DevTools geöffnet sein müssen, damit sie funktioniert). Oder (Tim Holman hat mir den Trick gezeigt) Sie können sie direkt von der Konsole mit setTimeout() auslösen.
setTimeout(function() {
debugger;
}, 3000);
debugger; ausgelöst und Sie können wie gewohnt inspizieren.Ich habe das ausprobiert und es funktioniert in Chrome, Firefox, Edge und Safari, also ist es ein ziemlich browserübergreifend DevTools-freundlicher Trick. Nur Chrome und Safari erlauben es Ihnen, Elemente im Debugger-Modus per Maus auszuwählen. In Edge oder Firefox müssen Sie sich möglicherweise manuell durch den Elements-Tab durcharbeiten, um das zu finden, was Sie brauchen.
Es gibt auch eine Pause-Schaltfläche im Quellen-Panel mit der Bezeichnung „Skriptausführung pausieren“. Ihre Tastenkombination ist F8 (auf meinem Mac)… Wenn Sie also in irgendeiner Situation F8 drücken, wird die Skriptausführung ebenfalls pausiert.
Ich benutze auch F8. Aber es funktioniert nur, wenn ein Skript ausgeführt wird, was normalerweise der Fall ist, da es von einer anderen
setTimeout-Schleife auf der Seite stattfindet.Sie haben mich gerettet… Vielen Dank
Man kann auch das Eltern-Element über „Element untersuchen“ hervorheben, dann mit der rechten Maustaste auf das HTML klicken und „Unterbrechen bei“ -> „Untermodifikationen“ auswählen. Dann, wenn sich etwas ändert, pausiert der Code die Ausführung und Sie können tun, was immer Sie wollen!
Wir brauchen ein Plugin zum Auslösen echter Tastaturereignisse und einen Status für Barrierefreiheitstests. Wie zum Beispiel visueller Vergleich zwischen dem Hover-Zustand und dem Fokus-Zustand.
Ich würde normalerweise einfach einen Haltepunkt am Anfang des
mouseleave-Handlers setzen (klicken Sie einfach auf die linke Spalte der Codezeile im Quellen-Panel). Das tut dasselbe wie derdebugger-Aufruf, bedeutet aber, dass Sie das nicht in Ihren Quellcode einfügen müssen.Guter Tipp aber. Der
setTimeout-Trick ist gut, wenn der Code, der die Änderung auslöst, ein drittanbieter-minifizierter Skript ist.Sie könnten mit der rechten Maustaste auf das Body-Element klicken und dann „Unterbrechen bei…“ und dann „Untermodifikationen“ auswählen
Prägnantere Version des Snippets
Sie können mit der rechten Maustaste klicken, während die DevTools geöffnet sind, und dann mit der Maus in den DevTools-Bereich fahren, während das kontextsensitive Menü noch geöffnet ist.
Dadurch wird der Browser so getrickst, dass er sich so verhält, als ob sich die Maus noch an derselben Position befindet wie beim Rechtsklick. Es ist keinerlei zusätzlicher Code erforderlich und er verhält sich weiterhin so, egal was Sie tun, solange Sie die Maus nicht wieder in den Hauptanzeigebereich bewegen, nachdem das kontextsensitive Menü geschlossen wurde.
Es verhält sich in Chrome jedenfalls so. Ich bin mir bei anderen Browsern nicht sicher.