Nowości w Narzędziach deweloperskich: Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debugowanie CSS z Gemini

W Narzędziach deweloperskich w Chrome znajdziesz nowy eksperymentalny panel pomocy AI, w którym możesz rozmawiać z Gemini i uzyskać pomoc w debugowaniu CSS.

Wypróbuj je już teraz. W panelu Elementy kliknij element prawym przyciskiem myszy i wybierz Zapytaj AI lub kliknij odpowiedni przycisk obok elementu. Narzędzia dla deweloperów otworzą nowy panel Pomoc AI.

Opcja „Zadaj pytanie AI” i odpowiadający jej przycisk.

W nowym panelu pojawi się prośba o włączenie odpowiedniego ustawienia. Sprawdź, czy spełniasz wymagania, włącz przełącznik ustawień i wróć do panelu Pomoc dotycząca AI. Użyje on wybranego przez Ciebie elementu jako kontekstu. Wpisz pytanie o element.

Nowy panel pomocy AI odpowiada na prompt.

Więcej informacji o tym, jak najlepiej korzystać z nowego panelu, znajdziesz w artykule 5 ciekawych zastosowań AI Assistance w Narzędziach deweloperskich oraz w artykule AI Assistance do stylizacji.

Zespół Narzędzi deweloperskich chętnie pozna Twoją opinię. Możesz zostawić go na stronie crbug.com/364805393.

sterować funkcjami AI na specjalnej karcie ustawień.

Teraz możesz zarządzać wszystkimi funkcjami AI w 1 miejscu: na nowej karcie Ustawienia > Innowacje AI. Zawiera ona ważne kwestie, opisuje funkcje AI oraz pozwala je pojedynczo włączać i wyłączać.

nowa karta Innowacje w zakresie AI;

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

Statystyki konsoli na wyciągnięcie ręki

W Narzędziach deweloperskich nie trzeba już włączać synchronizacji ustawień funkcji AI. Dzięki temu Statystyki w Konsoli oraz pomoc AI w stylowaniu są dostępne jednym kliknięciem.

Po zalogowaniu się w Chrome włącz te funkcje, klikając Ustawienia > Innowacje w zakresie AI.

Ulepszenia panelu wydajności

W tej wersji wprowadziliśmy szereg ulepszeń w panelu Skuteczność.

Dodawanie adnotacji i udostępnianie wyników dotyczących skuteczności

W panelu Skuteczność na rozwijanym pasku bocznym po lewej stronie znajduje się nowa karta Adnotacje, która upraszcza tworzenie notatek do eksploracji logu czasu i współpracy przy udostępnianiu wyników dotyczących skuteczności.

Teraz możesz oznaczać i łączyć zdarzenia za pomocą strzałek oraz wyróżniać zakresy czasu bezpośrednio na ścieżce. Następnie możesz zapisywać, udostępniać i przesyłać logi czasu z adnotacjami z powrotem do panelu Wydajność.

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

uzyskiwać statystyki wydajności bezpośrednio w panelu Wydajność,

Na nowej karcie Statystyki na lewym pasku bocznym w panelu Skuteczność znajdziesz teraz przydatne statystyki. Statystyki są konsolidowane z raportu Lighthouse i panelu Statystyki wydajności, który zostanie wycofany.

Na karcie Trendy znajdziesz analizę z instrukcjami i sugerowanie przydatnych statystyk dotyczących problemów z wydajnością, które mogą spowalniać działanie Twojej witryny. Aby skorzystać ze statystyk, otwórz kartę na lewym pasku bocznym panelu Skuteczność, rozwiń różne kategorie i najeżdżaj kursorem na elementy oraz je klikaj. W panelu Skuteczność zostaną wyróżnione odpowiednie zdarzenia w wyświetleniu.

Zespół DevTools czeka na Twoją opinię na temat przydatności tych informacji, sposobów na ich ulepszenie oraz doświadczeń z ich korzystania z innymi narzędziami, takimi jak PageSpeed Insights i Lighthouse. Podziel się swoją opinią na stronie crbug.com/371170842.

Łatwiejsze wykrywanie nadmiernej przemiany układu

Ścieżka Przesunięcia układu ma teraz nowy wygląd. Zmiany układu są teraz oznaczone (bardziej widocznymi) fioletowymi diamentami i zgrupowane w klastry na podstawie ich bliskości na osi czasu. Zarówno zmiany, jak i ich klastry mają uporządkowaną tabelę z czasami, wynikami, elementami i potencjalnymi przyczynami na karcie Podsumowanie.

Zmiany na ścieżce „Przesunięcia układu” przed aktualizacją i po jej zmodyfikowaniu na karcie „Podsumowanie”.

Dodatkowo w widoku danych na żywo obok karty Interakcje znajduje się dziennik Przesunięcia układu z wynikami i elementami.

Dane przed i po dodaniu do widoku danych na żywo dziennika „Zmiany układu”.

Problem z Chromium: 369100729.

Wykrywaj nieskomponowane animacje

Ścieżka Animacje zawiera teraz przydatne informacje na temat nieskomponowanych animacji:

  • Nazwa animacji jest zgodna z odpowiednią właściwością CSS (jeśli taka istnieje).
  • Nieskomponowane animacje są oznaczone czerwonymi trójkątami na ścieżce.
  • Pokazuje przyczynę błędu komponowania na karcie Podsumowanie.

Nazwy animacji na ścieżce przed i po, oznaczanie animacji nieskomponowanych oraz pokazywanie przyczyny niepowodzenia.

Więcej informacji znajdziesz w sekcji Zachowaj właściwości tylko z kompozytorem i zarządzaj liczbą warstw.

Problem z Chromium: 41006273.

Równoczesność sprzętu zostanie przeniesiona do czujników

Ustawienie Równoczesne działanie sprzętu zostanie przeniesione z panelu Wydajność do bardziej odpowiedniego miejsca – panelu Czujniki.

Informacje o przeniesieniu ustawienia „Równoczesność sprzętu” do panelu Czujniki i przed przeniesieniem.

Problem z Chromium: 371463665.

Ignoruj anonimowe skrypty i skoncentruj się na kodzie w zrzutach stosu

Ścieżki sterowania w Konsoli prawidłowo wykrywają, ignorują, zwijają i (jeśli są rozwinięte) przyciemniają ramki pochodzące z plików na liście ignorowanych. Wcześniej nazwa funkcji nie była wyszarzona w rozwiniętym śladzie.

Możesz też włączyć nowe Ustawienia > Lista ignorowanych > Anonimowe skrypty z eval lub konsoli, aby ustawić DevTools tak, aby ignorowały anonimowe skrypty bez adresu URL źródłowego.

Lista ignorowanych elementów w śladach stosu przed i po poprawie.

Dodatkowo, gdy klikniesz prawym przyciskiem myszy i Zapisz jako… w dzienniku konsoli, nie zapiszesz tekstu Pokaż więcej/mniej.

Problemy z Chromium: 40279542, 40945570, 345248263.

Elementy > Style: obsługa trybów pisania w języku sideways-* w przypadku nakładek siatki i słów kluczowych w całym CSS.

Karta Elementy > Style obsługuje teraz te funkcje:

Problemy z Chromium: 40280717, 40706051, 40501131.

Audyty Lighthouse stron niebędących stronami HTTP w trybach okresu i migawki

Lighthouse może teraz generować raporty dotyczące stron niebędących stronami HTTP w trybach zakresu czasowego i migawki.

Przed włączeniem kontroli strony innej niż HTTP i po jej włączeniu w trybach zakresu czasu i migawki.

Ułatwienia dostępu

Ta wersja zawiera następujące ułatwienia dostępu:

  • W sekcji Źródła > Edytor można teraz zamykać karty z otwartymi plikami. Aby to zrobić, zaznacz przycisk X i naciśnij Enter lub spację.
  • W sekcji Wydajność możesz teraz wybrać wpis w wyświetleniu i nacisnąć spację, aby otworzyć menu kontekstowe.
  • W sekcji Skuteczność karta Statystyki na pasku bocznym po lewej stronie jest dostępna za pomocą klawiatury i można ją przełączać za pomocą przycisków.

Problem z Chromium: 372411090.

Inne wyróżnione informacje

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Ustawienia ograniczania przepustowości są teraz prawidłowo synchronizowane między panelami Wydajność i Sieć (370332090).
  • Aplikacja > Usługi w tle > Ładowania spekulacyjne > Reguły ma teraz przycisk Stylizowany na {}, podobny do przycisku Źródła > Edytor (40279147).
  • Aktywne wyrażenia: naciśnięcie Tab po wybraniu opcji autouzupełniania zamyka pole edycji zamiast wprowadzenia wcięcia tekstu (349939551).
  • Elementy > Style: anchor() i anchor-size() obsługują nową składnię, w której możesz zmieniać kolejność argumentów i pomijać kierunek anchor-size() (343516786). Dodatkowo naprawiono renderowanie zastępcze (365802559).
  • Sieć: poprawiono podglądy GraphQL (369931288).
  • Wydajność: teraz raportuje przyrostowy postęp wczytywania i przetwarzania logów.
  • WebAuthn: teraz 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 (40879198, 369515221).
  • Nakładka Podstawowe wskaźniki internetowe została usunięta z karty Wyświetlanie 328487897.
  • Funkcje generatywnej AI nie wymagają już synchronizacji ustawień Chrome.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.