Hier erfahren Sie mehr über Anwendungsfälle für die KI-Unterstützung in Chrome-Entwicklertools und wie sie Ihren Debugging-Workflow in Bezug auf Stil, Leistung und mehr unterstützen kann.

Dokumentation lesen

… für das Styling

Sie erhalten eine detaillierte Erklärung des Layouts Ihres Elements und wie Sie es mit Prompts wie diesen ändern können:

How is this element laid out?

Ist es ein Flex-Element? Ist es absolut positioniert? Ist es Teil eines Rasters? Die KI-Unterstützung kann das Layout von Elementbäumen zusammenfassen und Codebeispiele zur Änderung bereitstellen.

Eine Animation funktioniert nicht? So fragen Sie den KI-Assistenten nach Ihrem animierten Element:

Why is my animation not working?

Die KI-Unterstützung prüft unter anderem relevante CSS-Eigenschaften und Ereignis-Listener, um herauszufinden, was das Problem sein könnte, und bietet Codebeispiele zur Behebung.

DEMO

Sie haben gerade kein Projekt, bei dem Sie die KI-Unterstützung für das Styling testen können? Im DevTools-Hangar testen

Finden Sie die richtigen Prompts, um rechteckige Räder, kaputte Standlichter und einen qualmenden Motor zu reparieren, damit das DevTools-Flugzeug wieder fliegen kann.

Demo ansehen 

… für Netzwerk

Anfrage- und Antwortheader enthalten oft wichtige Informationen, die auf den ersten Blick nicht offensichtlich sind. Sie können den KI-Assistenten bitten, Ihnen Folgendes zu erklären: 

Does this request have any notable headers?

Haben Sie schon einmal das Gefühl gehabt, dass eine bestimmte Anfrage einfach zu lange dauert, aber nicht genau wussten, warum? Sie können den KI-Assistenten bitten, sich die Angelegenheit anzusehen:

Why is this request taking so long?

Die KI-Unterstützung prüft die aufgezeichneten Zeiten und informiert Sie, wenn etwas nicht stimmt.

… für die Leistung

Es kann schwierig sein, die Ursache für eine träge Website zu finden. Sie können die Spitzen in Ihren Leistungsprofilen nicht nachvollziehen? Mit KI-gestützter Unterstützung können Sie die Anrufabläufe vereinfachen:

Anything to improve in this call tree?

… für Quellen

Es ist selten, dass Sie den gesamten Code Ihrer Website geschrieben haben. Sie können nicht nachvollziehen, warum eine bestimmte Ressource geladen wird und wofür sie verwendet wird? KI-gestützte Unterstützung kann Ihnen bei Folgendem helfen:

What is this file used for?

Ganz gleich, ob es sich um ein Analyseskript, ein Social-Media-Widget oder eine A/B-Testbibliothek handelt – die KI-Unterstützung wird das Problem finden.