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

Paul Bakaus
Paul Bakaus

Mit dem neuen Kontextmenü des DOM-Steuerfelds können Sie Knoten effizient bearbeiten. Sie können Fehler für Service-Worker direkt über den Bereich „Ressourcen“ beheben. In der Farbauswahl kannst du aus allen Material Design-Farbtönen wählen. Blackbox-JS-Bibliotheken einfacher analysieren.

Neues, verbessertes Kontextmenü des DOM-Bereichs

das neue DOM-Kontextmenü.

Wir haben die am häufigsten verwendeten Aktionen im DOM-Steuerfeld analysiert und festgestellt, dass das Kontextmenü für das Klicken mit der rechten Maustaste übersichtlich gestaltet und neu organisiert werden sollte.

Es ist jetzt viel einfacher, Elemente schnell auszublenden oder zu löschen, einen bestimmten Status wie :aktiv oder :hover auszulösen oder die HTML-Datei zu bearbeiten. Wenn Sie ein Touchpad verwenden und nicht mit der rechten Maustaste klicken möchten, klicken Sie stattdessen auf die drei kleinen Punkte neben dem ausgewählten Element.

Service Worker über den Bereich „Ressourcen“ debuggen

Service Worker sind fantastisch, sobald sie eingerichtet sind, aber es kann schwierig sein, sich am Anfang damit vertraut zu machen. Das Problem wurde noch dadurch verschärft, dass zum Beheben der Probleme die Entwicklertools verlassen und chrome://serviceworker-internals/ in einem neuen Browserfenster geöffnet werden musste.

Service Worker in Ressourcen

Das ist jetzt vorbei. Sie können jetzt Fehler in Service Workern für die aktuelle Domain direkt über das Steuerfeld „Ressourcen“ beheben. Sie ist noch in der Entwicklung, doch 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 Sie direkt mit auffälligen Primärfarben loslegen können. Wenn Sie eine vollständige Seite entwerfen möchten, benötigen Sie unbedingt vollständigen Zugriff auf alle Material Design-Farbtöne. Deshalb haben wir sie integriert.

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

Blackbox-JavaScript-Bibliotheken jetzt einfacher in den Einstellungen verwalten

JavaScript Blackboxing gibt es schon eine Weile, aber es war nicht sehr einfach zu finden. Mit dieser Funktion können Sie ein Script auf einer Seite als Blackbox behandeln, um sich nur auf den von Ihnen erstellten Code zu konzentrieren und den gesamten Wrapper-Code auszublenden.

Wir haben sie jetzt in die Einstellungen verschoben. Probieren Sie es aus:

Blackbox

Das Beste vom Rest

  • Sie haben keinen Zugriff auf Rendering-Ein-/Aus-Schaltflächen? Die Rendering-Einstellungen wurden in das Hauptmenü der DevTools verschoben (unter „Weitere Tools“). Neben den üblichen Verdächtigen (z.B. dem FPS-Messgerät) wurde auch „Druckmedien emulieren“ dorthin verschoben.
  • Sie haben keine Lust mehr, „chrome://inspect“ in die Omnibox einzugeben? Geräte prüfen finden Sie jetzt auch im neuen Hauptmenü unter „Weitere Tools“.
  • Du hast versehentlich einen dieser Tabs der Leiste geschlossen, z. B. „Rendering“ oder „Suche“? Sie können sie jetzt über das neue Menü links wieder öffnen.

Wie immer könnt ihr uns über Twitter oder die Kommentare unten eure Meinung mitteilen und Fehler unter crbug.com/new melden.

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