5 coole Dinge, die Sie mit der KI-Unterstützung in den Entwicklertools tun können

Matthias Rohmer
Matthias Rohmer

Veröffentlicht: 21. Oktober 2024

Letzte Woche haben wir ein ganz neues Steuerfeld in DevTools eingeführt: Mit der KI-Unterstützung können Sie direkt in DevTools Probleme mit dem Styling mit Gemini beheben.

Möchten Sie wissen, was es kann? Hier sind fünf tolle Möglichkeiten, wie Sie mit dieser neuen Funktion das Design Ihrer Seite einfacher gestalten können – vom Verstehen von Layouts bis hin zum Flugzeug-Fixieren.

Bildschirmaufzeichnung dazu, wie KI-Unterstützung dazu beiträgt, mithilfe von CSS-Animationen einen Laufschrifteffekt zu implementieren

1. Layouts

Beim Erstellen von Websites müssen Sie nicht immer bei null anfangen. Oftmals müssen Sie auf vorhandenem Code aufbauen, mit dem Sie nicht vertraut sind – und im schlimmsten Fall auch niemand in Ihrem Umfeld.

Sie können die KI nach dem Layout eines Elements fragen und bis zum letzten Knoten nachvollziehen, warum es so angezeigt wird. Außerdem erfahren Sie, warum dieses overflow: hidden; auf einem Element tatsächlich einen bestimmten Grund hat. 👀

Prompt zum Ausprobieren

Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.

2. Paarprogrammierung

CSS ist mittlerweile wirklich leistungsstark. Bei so vielen Möglichkeiten ist es ganz normal, dass man manchmal verwirrt ist: Brauche ich align-items? Oder justify-items? Oder justify-self oder align-content?

Manchmal wissen Sie wirklich, was Sie tun möchten, können aber einfach nicht den richtigen Satz von CSS-Eigenschaften erhalten. Wenn Sie das nächste Mal in dieser Situation sind, erklären Sie der KI Ihr Problem und lassen Sie die Lösung für Sie finden.

Die KI-Unterstützung untersucht Ihren vorhandenen Code und vergleicht ihn mit dem, was Sie erreichen möchten. Dabei werden Ihnen die erforderlichen Korrekturen vorgeschlagen, die Sie prüfen, anwenden und in Ihre Codebasis kopieren können.

3. Berater für Barrierefreiheit

Es ist wichtig, dass Ihre Website barrierefrei ist und sich mit Hilfstechnologien einfach nutzen lässt. Berücksichtige die Barrierefreiheit schon zu Beginn der Entwicklung und nicht nur im Nachhinein. Halte dich während des gesamten Entwicklungsprozesses an die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG).

Mit der KI-Unterstützung erhalten Sie Tipps dazu, wo ein <div> durch ein semantisch sinnvolleres HTML-Element ersetzt werden könnte, wie ein zusätzliches aria-*-Attribut hilfreich sein kann oder wie der Farbkontrast verbessert werden kann.

Aufforderung zum Ausprobieren

What about color contrast in this element?

4. Bericht bearbeiten

Trends kommen und gehen: Es gab Farbverläufe, Schatten und harte Ränder, gefolgt von einem flachen Design, das in die heutige Designära mit leuchtenden Neonfarben auf dunklen Hintergründen überging.

Schaltflächen, wie sie in Bootstrap von Version 1 bis 5 entworfen wurden.
Bootstrap-Schaltflächenstil über die Zeit, von Version 1 bis 5, von oben nach unten.

Aber ist es nicht manchmal ermüdend, wie einheitlich das Web manchmal aussieht? Wenn Sie sich mal so richtig austoben möchten, können Sie die KI bitten, das Internet ein wenig spaßiger zu gestalten – so wie in einem Themenpark.

Vorschlag zum Ausprobieren

This element looks a little boring. Can you make it look like a pirates theme park ride?

5. Flugzeugmechaniker werden

Die KI-Unterstützung kann Ihnen bereits bei vielen Dingen helfen, z. B. beim Erklären von Stilproblemen, beim Beheben von Problemen, bei der Beratung zur Barrierefreiheit und beim Ändern vorhandener Stile. Und es gibt noch mehr! Können Sie glauben, dass KI-Assistenten sogar bei der Reparatur von Flugzeugen helfen? Es sind keine Vorkenntnisse erforderlich. Ziehen Sie Ihre Arbeitskleidung an und legen Sie los im Chrome DevTools-Hangar!

Der Chrome Devtools Hangar – eine interaktive Spielwiese für KI-Unterstützung.

Und teilt uns gern eure eigenen Erfahrungen in unserem öffentlichen Issue Tracker mit.