Google hat kürzlich eine bedeutende Aktualisierung der Chrome v137-Entwicklerwerkzeuge (Chrome DevTools) veröffentlicht, die die Integration des Gemini AI-Hilfsprogramms umfasst und Entwicklern bisher unerreichte Möglichkeiten der Leistungsanalyse und Fehlerbehebung bietet. Von der intelligenten Beschriftung der Leistungsverfolgung bis hin zur Änderung und Speicherung von CSS, verbessern die neuen Funktionen der Chrome v137 die Produktivität der Entwicklung enorm. AIbase fasst die neuesten Informationen zusammen und erläutert die Höhepunkte dieser Aktualisierung sowie deren Anwendungsmöglichkeiten im Detail.
Intelligente Beschriftung mit Gemini: Intuitivere Leistungsanalyse
Die Chrome v137-Entwicklerwerkzeuge führen die Funktion „Gemini intelligente Beschriftung“ ein. Entwickler können durch Doppelklicken auf Events in der Hauptspur (Main Track) der Leistungsverfolgung und Klicken auf den „Beschriftung generieren“-Button, dem Gemini auf Basis der Stapelspur und des Kontextes automatisch Labels zuweisen lässt. Diese Funktion vereinfacht den Prozess der Leistungsanalyse stark und hilft Entwicklern komplexe Leistungsdaten schneller zu verstehen. Außerdem können Entwickler in der Registerkarte „Annotations“ Labels für Zeitintervalle hinzufügen, Ereignisse verknüpfen und sogar ihre Beschriftungen teilen, um die Teamarbeit zu verbessern.
AI-gesteuerte CSS-Fehlerbehebung: Einfach ändern und speichern
Die neue Version der Entwicklerwerkzeuge ermöglicht es Entwicklern, über das Gemini-intelligente Hilfsprogramm CSS direkt zu ändern und zu beheben. Durch Klicken auf „Ask AI“ im „Elements“-Panel und Eingabe der gewünschten CSS-Änderungen kann Gemini Code generieren und in Echtzeit Vorschauen anzeigen. Verbunden mit der experimentellen automatisierten Arbeitsbereichsfunktion können Entwickler die geänderten CSS-, JavaScript- oder HTML-Dateien direkt in lokale Quelldateien speichern, was die Fehlerbehebung enorm beschleunigt. AIbase glaubt, dass diese Funktion die Arbeit der Frontend-Entwicklung stark verkürzen wird.
Neue Einsichten im Leistungspanel: Versteckte Probleme entdecken
Das Leistungspanel von Chrome v137 bietet zwei entscheidende Einsichten: wiederholtes JavaScript und traditionelles JavaScript. Diese helfen Entwicklern redundantes und veraltetes Codematerial zu identifizieren, um die Ladezeit und die Laufzeitperformance einer Website zu optimieren. Zudem können Entwickler mit einem Klick eine Konversation mit Gemini starten, um Leistungsproblembereiche eingehender zu analysieren und gezielte Optimierungsvorschläge zu erhalten.
Visuelle Unterstützung und Screenshots: Debugging mit mehr Kontext
Um die Intuitivität des Debuggings zu steigern, bietet Chrome v137 im AI-hilfebereich eine Screenshotfunktion. Entwickler können durch Anklicken des „Foto schießen“-Buttons Seitenfotos machen und sie als Kontext an Gemini senden, um Layout- oder Stilprobleme wie etwa die Konsistenz der Buttonabstände zu analysieren. Diese Funktion bietet beim visuellen Debugging einen reichhaltigen Kontextunterstützung.
Gemini fördert das Entwicklerökosystem
Die Aktualisierung der Chrome v137-Entwicklerwerkzeuge markiert die tiefgreifende Integration von AI in Entwicklerwerkzeuge. Gemini vereinfacht nicht nur komplexe Aufgaben durch intelligente Beschriftung und CSS-Änderung, sondern bietet Entwicklern auch umfassendere Debuggingunterstützung durch Leistungsinsights und Screenshotfunktionen. AIbase ist der Meinung, dass mit der weiteren Integration lokaler AI-Modelle wie Gemini Nano die Chrome DevTools zum „Super-Assistenten“ der Frontend-Entwickler werden könnten und die Effizienz der Webentwicklung auf ein neues Level heben werden.
Schlussbemerkung
Die Aktualisierung der Chrome v137-Entwicklerwerkzeuge bringt mit Gemini AI innovative Funktionen wie intelligente Beschriftung, automatische CSS-Änderungen und Einsichten zur Leistungsoptimierung, die Entwicklern eine effizientere und intuitivere Debuggingerfahrung bieten.