Nowości w Narzędziach deweloperskich: Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debugowanie CSS za pomocą Gemini

Narzędzia programistyczne Chrome zyskują nowy eksperymentalny panel Pomoc 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. Narzędzia dla deweloperów otworzą nowy panel Pomoc AI.

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

Nowy panel wyświetli prośbę o włączenie odpowiedniego ustawienia. Sprawdź, czy spełniasz wymagania, włącz przełącznik ustawienia i wróć do panelu Pomoc AI. Jako kontekst zostanie użyty wybrany przez Ciebie element. Wpisz pytanie dotyczące elementu.

Nowy panel asystenta AI odpowiadający 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ół DevTools czeka na Twoją opinię. Możesz zostawić go na stronie crbug.com/364805393.

Sterowanie funkcjami AI na specjalnej karcie ustawień

Teraz możesz zarządzać wszystkimi funkcjami AI w 1 miejscu: na nowej karcie Ustawienia > Innowacje AI. Zawiera on listę ważnych kwestii, opis funkcji AI oraz umożliwia ich włączanie i wyłączanie pojedynczo.

nowa karta Innowacje w zakresie AI;

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

Statystyki konsoli są w zasięgu kliknięcia

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.

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

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

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

Panel Skuteczność zawiera nową kartę Adnotacje w rozwijanym pasku bocznym po lewej stronie, która upraszcza proces tworzenia notatek na potrzeby eksplorowania śladów i współpracy podczas udostępniania informacji o skuteczności.

Teraz możesz oznaczać i łączyć zdarzenia za pomocą strzałek oraz wyróżniać zakresy czasu bezpośrednio na ścieżce. Możesz zapisać, udostępnić i przesłać opatrzone adnotacjami ścieżki 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ść,

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

Karta Statystyki ma na celu umożliwienie analizy i podanie przydatnych informacji o problemach z wydajnością, które mogą spowolnić działanie witryny. Aby korzystać ze statystyk, otwórz kartę na pasku bocznym po lewej stronie w panelu Skuteczność, rozwiń różne kategorie, a następnie najedź kursorem na elementy i kliknij je. 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. Swoją opinię możesz wyrazić na stronie crbug.com/371170842.

Łatwiej wykrywać nadmierne przesunięcia 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ą na karcie Podsumowanie uporządkowaną tabelę z czasami, wynikami, elementami i potencjalnymi przyczynami.

Przed i po aktualizacji ścieżki „Zmiana układu” oraz po reorganizacji karty „Podsumowanie”.

Dodatkowo widok danych na żywo zawiera dziennik Zmiany układu z wynikami i elementami obok karty Interakcje.

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

Problem z Chromium: 369100729.

Wykrywanie nieskomponowanych animacji

Na ścieżce Animacje znajdziesz teraz przydatne informacje o nieskomponowanych animacjach:

  • 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.
  • Na karcie Podsumowanie znajdziesz powód niepowodzenia procesu tworzenia kompozycji.

nazwy animacji przed i po na ścieżce, oznaczenie nieskompilowanych animacji oraz wyświetlenie przyczyny błędu;

Więcej informacji znajdziesz w artykule Trzymaj się właściwości tylko dla kompozytora i zarządzaj liczbą warstw.

Problem z Chromium: 41006273.

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

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

Stan przed i po przeniesieniu ustawienia „Zgodność ze sprzętem” do panelu „Czujniki”.

Problem z Chromium: 371463665.

Ignorowanie skryptów anonimowych i skupienie 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, tekst Pokaż więcej/mniej nie zostanie zapisany.

Problemy z Chromium: 40279542, 40945570, 345248263.

Elementy > Style: obsługa trybów pisania 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.

Stan przed i po włączeniu audytu strony niebędącej stroną HTTP 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żesz zamknąć karty z otwartymi plikami, najeżdżając na przycisk X i naciskając 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 najciekawsze momenty

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).
  • W sekcji Aplikacja > Usługi w tle > Załadowania spekulatywne > Reguły znajduje się teraz przycisk {} z ładnym wydrukiem, podobny do tego w sekcji Źródła > Edytor (40279147).
  • Wyrażenia na żywo: po wybraniu opcji autouzupełniania naciśnięcie klawisza Tab powoduje teraz zamknięcie pola edycji zamiast wcięcia tekstu (349939551).
  • Elementy > Style: funkcje 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ąd GraphQL (369931288).
  • Wydajność: teraz raportuje przyrostowy postęp wczytywania i przetwarzania ścieżek.
  • WebAuthn teraz dynamicznie aktualizuje dane logowania zmodyfikowane przez metody signal* (368467199).
  • WebAssembly: w Konsoli wyświetla się teraz ostrzeżenie, które informuje, czy dla modułu WebAssembly dostępne są 2 symbole debugowania i który z nich jest używany (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.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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 Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.