Poznaj przypadki użycia pomocy AI w Narzędziach deweloperskich w Chrome i dowiedz się, jak może ona ułatwiać debugowanie stylów, wydajności i innych aspektów.

Czytanie dokumentów

… do stylizacji

Aby uzyskać szczegółowe informacje o układzie elementu i o sposobie jego modyfikacji, korzystaj z promptów takich jak ten:

How is this element laid out?

Czy jest to element elastyczny? Czy jest ona umieszczona absolutnie? Czy jest to część siatki? Pomoc AI może podsumować układ drzew elementów i zaproponować przykłady kodu, które pokazują, jak go zmodyfikować.

Masz animację, która nie działa? Zapytaj asystenta AI o animowany element:

Why is my animation not working?

Asystent AI sprawdzi odpowiednie właściwości CSS, detektory zdarzeń i inne elementy, aby znaleźć problem i zaproponować przykłady kodu, które pomogą go rozwiązać.

DEMO

Nie masz projektu, w którym mógłbyś przetestować pomoc AI w stylizacji? Wypróbuj to w Hangarze w Narzędziach deweloperskich.

Znajdź odpowiednie prompty, aby naprawić prostokątne koła, uszkodzone światła pozycyjne i dymiący silnik, aby samolot DevTools mógł znów latać.

Wyświetl demo

… dla sieci

Nagłówki żądań i odpowiedzi często zawierają ważne informacje, które nie są oczywiste na pierwszy rzut oka. Poproś asystenta AI o wyjaśnienie tych kwestii: 

Does this request have any notable headers?

Czy zdarzyło Ci się, że wykonanie określonego zadania trwało zbyt długo, ale nie wiedziałeś/-aś, dlaczego? Poproś o pomoc asystenta AI:

Why is this request taking so long?

Pomoc AI analizuje zarejestrowane czasy i poinformuje, jeśli coś jest nie tak.

… w celu poprawy wydajności

Znalezienie głównej przyczyny powolnego działania witryny może być trudne. Nie wiesz, co powoduje szczyty w profilach skuteczności? Asystent AI może uprościć drzewa połączeń:

Anything to improve in this call tree?

… w przypadku źródeł

Rzadko zdarza się, aby kod używany w witrynie został napisany przez Ciebie – nie rozumiesz, dlaczego wczytuje się określony zasób i do czego służy? Pomoc AI może Ci pomóc:

What is this file used for?

Niezależnie od tego, czy jest to skrypt analityczny, widżet społecznościowy czy biblioteka testów A/B, AI Assistant pomoże Ci znaleźć potrzebne informacje.