DevTools Digest – Effiziente Elementbearbeitung, Debugging von Service Workern und Material Design-Sattierungen

Paul Bakaus
Paul Bakaus

Mit dem neuen Kontextmenü des DOM-Bereichs können Sie Knoten effizient bearbeiten. Fehler in Service-Workern können direkt über das Steuerfeld „Ressourcen“ behoben werden. Wählen Sie in der Farbauswahl aus allen Material Design-Farben aus. Blackbox JS-Bibliotheken einfacher machen.

Das neue, verbesserte Kontextmenü des DOM-Steuerfelds

das neue DOM-Kontextmenü.

Wir haben die am häufigsten verwendeten Aktionen im DOM-Steuerfeld analysiert und sind zu dem Schluss gekommen, dass das Kontextmenü mit der rechten Maustaste übersichtlich sein sollte.

Es ist jetzt viel einfacher, ein Element schnell auszublenden oder zu löschen, einen bestimmten Status wie :active oder :hover auszulösen oder seinen HTML-Code zu bearbeiten. Wenn du ein Touchpad verwendest und nicht mit der rechten Maustaste klicken möchtest, klicke stattdessen auf die drei kleinen Punkte neben dem ausgewählten Element.

Fehler bei Service Workern über das Steuerfeld „Ressourcen“ beheben

Service Worker sind nach der Einrichtung fantastisch, aber es kann schwierig sein, sich frühzeitig damit zu befassen. Dies wurde dadurch verschärft, dass für die Fehlerbehebung die Entwicklertools verlassen und chrome://serviceworker-internals/ in einem neuen Browserfenster geöffnet werden mussten.

Service Worker in Ressourcen

Das ist nicht mehr der Fall. Sie können jetzt direkt über das Steuerfeld „Ressourcen“ Fehler an Service Workern für die aktuelle Domain beheben. Es ist zwar noch in der Entwicklung, aber bereits eine erhebliche Verbesserung gegenüber dem vorherigen Status quo.

Alle Farben: Material Design-Farbtöne in der Farbauswahl

Vor ein paar Wochen haben wir der Farbauswahl die Material Design-Palette hinzugefügt, damit du sofort kräftige Primärfarben erhältst. Um eine ganze Seite zu entwerfen, benötigen Sie zwangsläufig vollständigen Zugriff auf alle Material Design-Farben, die wir integriert haben.

Um die Farbtöne aufzurufen, drücken Sie lange auf eine der Primärfarben und klicken Sie stattdessen auf eine der Farbtöne.

Einfachere Blackbox-JavaScript-Bibliotheken in den Einstellungen

JavaScript Blackboxing gibt es schon eine Weile, es war aber nicht so einfach zu finden. Mit dieser Funktion können Sie für ein Skript auf einer Seite Blackboxes ausführen, um sich nur auf den von Ihnen erstellten Code zu konzentrieren (und den gesamten Wrapping-Code auszublenden).

Sie finden sie jetzt in den Einstellungen. Probieren Sie es aus:

Blackbox-Bild

Das Beste vom Rest

  • Sie haben keinen Zugriff auf die Ein-/Aus-Schaltflächen für das Rendering? Einstellungen für das Rendering wurden in das Hauptmenü der Entwicklertools verschoben (unter „Weitere Tools“). Zusätzlich zu den üblichen Verdächtigen (z.B. dem fps-Messtool) haben wir auch die Option „Druckmedien emulieren“ dorthin verschoben.
  • Sie möchten nicht ständig chrome://Inspect in die Omnibox eingeben? Die Funktion Geräte prüfen befindet sich jetzt auch im neuen Hauptmenü unter „Weitere Tools“.
  • Haben Sie versehentlich einen dieser geschlossenen Tabs wie „Rendering“ oder „Suchen“ geschlossen? Sie können sie jetzt mit dem neuen Menü auf der linken Seite wieder öffnen.

Wie immer kannst du uns über Twitter deine Meinung mitteilen oder die Kommentare unten nutzen. Programmfehler kannst du unter crbug.com/new melden.

Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team