Wie kann man in den Chrome Developer Tools ein Dropdown-Menü dauerhaft offen halten?
- Grundlegendes Verhalten der Dropdowns in den Developer Tools
- Möglichkeiten zum Offenhalten der Dropdowns
- Alternative Ansätze für eine bessere Übersicht
- Verwendung von Drittanbieter-Tools oder Erweiterungen
- Zusammenfassung
Beim Entwickeln oder Debuggen mit den Chrome Developer Tools kann es hilfreich sein, ein Dropdown-Menü in den DevTools dauerhaft geöffnet zu lassen. Standardmäßig schließen sich Dropdowns oft automatisch, sobald man den Fokus verliert oder eine Aktion ausgeführt wird. Dies kann die Arbeit erschweren, wenn man Werte vergleichen oder Einstellungen über längere Zeit prüfen möchte. Im Folgenden wird erläutert, welche Möglichkeiten es gibt, um Dropdown-Menüs in den Chrome Developer Tools dauerhaft offen zu halten.
Grundlegendes Verhalten der Dropdowns in den Developer Tools
Die Dropdown-Menüs in den Chrome Developer Tools sind so gestaltet, dass sie kontextabhängig erscheinen und normalerweise nach der Auswahl oder einem Klick außerhalb der Auswahlbox automatisch geschlossen werden. Dieses Verhalten ist sinnvoll, um die Oberfläche übersichtlich zu halten. Allerdings ist dies in bestimmten Szenarien hinderlich, insbesondere wenn man komplexere Werte oder Styles vergleichen möchte.
Möglichkeiten zum Offenhalten der Dropdowns
Leider bietet Chrome derzeit keine native Einstellung, um Dropdowns in den Developer Tools dauerhaft offen zu halten. Allerdings gibt es einige Workarounds, die je nach Einsatzzweck hilfreich sein können. Beispielsweise kann man durch das Einfrieren der DevTools-Oberfläche mit Tastenkombinationen wie Shift+Click oder durch das Anheften von bestimmten Bereichen den Fokus aufrechterhalten. Ebenfalls kann man einzelne Panels oder Dropdowns durch Ablösen in separate Fenster öffnen, sodass sie nicht automatisch schließen beim Wechseln zwischen Elementen.
Alternative Ansätze für eine bessere Übersicht
Falls es darum geht, mehrere Werte oder Stile gleichzeitig im Auge zu behalten, kann man in den Chrome Developer Tools auch das Feature Angeheftete Panels oder Watch Expressions verwenden. Diese zeigen bestimmte Werte oder CSS-Eigenschaften permanent an und erfordern kein dauerhaft offenes Dropdown-Menü. Zusätzlich kann man mit dem Inspektor und manuellen Änderungen im Stylesheet die gewünschten Informationen statisch anzeigen lassen.
Verwendung von Drittanbieter-Tools oder Erweiterungen
Falls der native Funktionsumfang der Chrome Developer Tools nicht ausreicht, kann man auch auf externe Tools oder Browser-Erweiterungen zurückgreifen, die ein anderes Verhalten bei Dropdowns ermöglichen oder zusätzliche Bedienhilfen bereitstellen. Einige Entwickler-Extensions bieten beispielsweise erweiterte Inspect-Features oder eine verbesserte UI, um schnell mehrere Elemente und Werte gleichzeitig sichtbar zu haben.
Zusammenfassung
Ein Dropdown-Menü in den Chrome Developer Tools dauerhaft offen zu halten, ist direkt über eine native Einstellung nicht möglich. Dennoch lassen sich durch das Ablösen von Panels, Vermeidung des Fokusverlusts oder die Nutzung von angehefteten Bereichen und Watch Expressions ähnliche Effekte erzielen. Wer häufig mit komplexen Dropdowns arbeiten muss, sollte diese alternativen Techniken ausprobieren oder auf spezialisierte Erweiterungen zurückgreifen.