Nowości w Narzędziach deweloperskich: Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debugowanie CSS za pomocą Gemini

Narzędzia deweloperskie w Chrome zyskują nowy eksperymentalny panel pomocy AI, w którym możesz rozmawiać z Gemini i uzyskać pomoc w debugowaniu kodu CSS.

Wypróbuj je już teraz. W panelu Elementy kliknij prawym przyciskiem myszy element i wybierz Zapytaj AI lub kliknij odpowiedni przycisk  obok elementu. W narzędziach deweloperskich otworzy się nowy panel Pomoc AI.

Opcja menu „Zapytaj AI” i odpowiedni przycisk.

W nowym panelu pojawi się prośba o włączenie odpowiedniego ustawienia. Sprawdź, czy spełniasz wymagania, włącz przełącznik ustawienia i wróć do panelu Pomoc AI. Wybrany element zostanie potraktowany jako kontekst. Wpisz pytanie dotyczące elementu.

Nowy panel pomocy AI odpowiadający na prompta.

Więcej informacji o tym, jak najlepiej korzystać z nowego panelu, znajdziesz w artykule 5 ciekawych rzeczy, które możesz zrobić dzięki pomocy AI w Narzędziach deweloperskich. Zapoznaj się też z pomocą AI w zakresie stylizacji.

Zespół DevTools czeka na Twoją opinię. Możesz ją przesłać na stronie crbug.com/364805393.

Sterowanie funkcjami opartymi na AI na specjalnej karcie ustawień

Wszystkimi funkcjami AI możesz teraz zarządzać w jednym miejscu: na nowej karcie Ustawienia > Innowacje AI. Zawiera ważne kwestie, opisuje funkcje AI i umożliwia ich włączanie oraz wyłączanie.

Nowa karta innowacji w zakresie AI.

Więcej informacji znajdziesz w sekcji Ustawienia > Innowacje oparte na AI.

Statystyki konsoli są na wyciągnięcie ręki

Narzędzia deweloperskie nie wymagają już włączonej synchronizacji ustawień w przypadku funkcji opartych na AI. Dostęp do opublikowanych wcześniej statystyk konsoli i pomocy AI w zakresie stylizacji uzyskasz jednym kliknięciem.

Jeśli jesteś zalogowany(-a) w Chrome, włącz te funkcje w Ustawieniach > Innowacje oparte na AI.

Ulepszenia panelu wydajności

Ta wersja wprowadza szereg ulepszeń w panelu Wydajność.

Dodawanie adnotacji do wyników skuteczności i ich udostępnianie

Panel Skuteczność zyska nową kartę Adnotacje w rozwijanym pasku bocznym po lewej stronie. Ułatwi to tworzenie notatek do analizy śladów i współpracy podczas udostępniania wyników dotyczących skuteczności.

Możesz teraz oznaczać i łączyć zdarzenia strzałkami oraz wyróżniać zakresy czasu bezpośrednio na śladzie. Następnie możesz zapisać, udostępnić i przesłać z powrotem do panelu Skuteczność adnotacje do śladów.

Nowa karta adnotacji na pasku bocznym po lewej stronie oraz zdarzenie, zakres i połączenie z adnotacjami.

Statystyki wydajności w panelu Wydajność

Na nowej karcie Statystyki na pasku bocznym po lewej stronie panelu Skuteczność możesz teraz odkrywać przydatne statystyki. Statystyki są konsolidowane z raportu Lighthouse i panelu Statystyki wydajności, który wkrótce zostanie wycofany.

Karta Statystyki zawiera analizy z instrukcjami i sugestie dotyczące problemów z wydajnością, które mogą spowalniać działanie witryny. Aby skorzystać ze statystyk, otwórz kartę na pasku bocznym po lewej stronie panelu Skuteczność, rozwiń różne kategorie, a następnie najedź kursorem na poszczególne elementy i kliknij je. Panel Skuteczność wyróżni odpowiednie zdarzenia w śladzie.

Zespół Narzędzi deweloperskich czeka na Twoją opinię o przydatności statystyk, sposobach ich ulepszenia oraz o tym, jak korzystasz z nich w połączeniu z innymi narzędziami, takimi jak PageSpeed Insights i Lighthouse. Swoją opinię możesz przesłać na stronie crbug.com/371170842.

Łatwiejsze wykrywanie nadmiernych przesunięć układu

Ścieżka Przesunięcia układu ma nowy wygląd. Przesunięcia układu są teraz oznaczane (lepiej widocznymi) fioletowymi rombami i grupowane w klastry na podstawie ich bliskości na osi czasu. Zarówno zmiany, jak i ich klastry są wyświetlane w uporządkowanej tabeli z czasami, wynikami, elementami i potencjalnymi przyczynami na karcie Podsumowanie.

Zmiany w sekcji „Przesunięcia układu” i przekształcona karta „Podsumowanie” – przed i po aktualizacji.

Dodatkowo w widoku danych na żywo obok karty Interakcje pojawia się log Zmiany układu z wynikami i elementami.

Widok danych na żywo przed dodaniem do niego dziennika „Zmiany układu” i po jego dodaniu.

Problem z Chromium: 369100729.

Wykrywanie nieskomponowanych animacji

Ścieżka Animacje zawiera teraz przydatne informacje o nieskomponowanych animacjach:

  • Nadaje animacjom nazwy zgodnie z odpowiednimi właściwościami CSS, jeśli takie istnieją.
  • Oznacza nieskomponowane animacje czerwonymi trójkątami na ścieżce.
  • Wyświetla przyczynę niepowodzenia kompozycji na karcie Podsumowanie.

Animacje nazw przed i po zmianie na ścieżce, oznaczenie tych, które nie zostały połączone, oraz wyświetlenie przyczyny niepowodzenia.

Więcej informacji znajdziesz w artykule Korzystanie tylko z właściwości kompozytora i zarządzanie liczbą warstw.

Problem z Chromium: 41006273.

Równoczesność sprzętu przenosi się do sekcji Czujniki

Ustawienie Hardware concurrency (Współbieżność sprzętowa) zostało przeniesione z panelu Performance (Wydajność) do bardziej odpowiedniego miejsca – panelu Sensors (Czujniki).

Widok przed i po przeniesieniu ustawienia „Współbieżność sprzętowa” do panelu Czujniki.

Problem w Chromium: 371463665.

Ignorowanie skryptów anonimowych i skupianie się na kodzie w zrzutach stosu

Ślady wywołań w konsoli prawidłowo wykrywają, ignorują, zwijają i (w przypadku rozwinięcia) wyszarzają ramki pochodzące z plików na liście ignorowanych. Wcześniej nazwa funkcji w rozwiniętym śledzeniu nie była wyszarzana.

Możesz też włączyć nowe : Ustawienia > Lista ignorowanych > Anonimowe skrypty z funkcji eval lub konsoli, aby ustawić Narzędzia deweloperskie tak, aby ignorowały anonimowe skrypty bez adresu URL źródła.

Przed i po ulepszeniu listy ignorowanych w śladach stosu.

Dodatkowo, gdy klikniesz prawym przyciskiem myszy i wybierzesz Zapisz jako..., dziennik konsoli nie zapisze tekstu Pokaż więcej/mniej.

Problemy z Chromium: 40279542, 40945570, 345248263.

Elementy > Style: obsługa trybów pisania sideways-* w przypadku nakładek siatki i słów kluczowych CSS

Karta Elementy > Style obsługuje teraz te funkcje:

Problemy z Chromium: 40280717, 40706051, 40501131.

Audyty Lighthouse dla stron innych niż HTTP w trybie okresu i migawki

Lighthouse może teraz generować raporty dotyczące stron innych niż HTTP w trybach przedziału czasu i migawki.

Przed i po włączeniu kontroli strony bez protokołu HTTP w trybach zakresu czasu i migawki.

Ułatwienia dostępu

Ta wersja zawiera następujące ulepszenia ułatwień dostępu:

  • W sekcji Źródła > Edytor karty z otwartymi plikami można teraz zamykać, zaznaczając przycisk X i naciskając Enter lub spację.
  • W sekcji Wydajność możesz teraz wybrać wpis w śladzie i nacisnąć spację, aby otworzyć menu kontekstowe.
  • W sekcji Skuteczność na pasku bocznym po lewej stronie znajduje się karta Statystyki, do której można przejść za pomocą klawiatury.

Problem z Chromium: 372411090.

Różne wyróżnione informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Ustawienia ograniczania są teraz prawidłowo synchronizowane między panelami Wydajność i Sieć (370332090).
  • W sekcji Aplikacja > Usługi działające w tle > Spekulacyjne wczytywanie > Reguły znajduje się teraz przycisk {} ładnego formatowania podobny do tego w sekcji Źródła > Edytor (40279147).
  • Wyrażenia na żywo: naciśnięcie klawisza Tab po wybraniu opcji autouzupełniania powoduje teraz wyjście z pola edycji zamiast wcięcia tekstu (349939551).
  • Elementy > Style: anchor() i anchor-size() obsługują nową składnię, w której można zmieniać kolejność argumentów i pomijać kierunek anchor-size() (343516786). Dodatkowo stałe renderowanie zastępcze (365802559).
  • Sieć: poprawiono podgląd GraphQL (369931288).
  • Wydajność: raportuje teraz przyrostowy postęp wczytywania i przetwarzania śladów.
  • WebAuthn dynamicznie aktualizuje dane logowania zmodyfikowane przez metody signal* (368467199).
  • WebAssembly: ostrzeżenie w konsoli informuje teraz, czy dla modułu WebAssembly dostępnych jest wiele symboli debugowania i który z nich jest używany (40879198, 369515221).
  • Nakładka Podstawowe wskaźniki internetowe zostanie usunięta z karty Renderowanie 328487897.
  • Funkcje oparte na generatywnej AI nie wymagają już synchronizacji ustawień Chrome.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.