Nowości w Narzędziach deweloperskich: Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debugowanie kodu 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 Zadaj pytanie 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. Upewnij się, że spełniasz wymagania, włącz przełącznik ustawienia i wróć do panelu Pomoc AI. Użyje on wybranego przez Ciebie elementu jako kontekstu. 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.

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 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 analizowania ś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. Następnie 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 „Zmiany układu” oraz po reorganizacji karty „Podsumowanie”.

Ponadto widok danych na żywo zawiera log 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 łączenia.

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ść sprzętowa” 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, nie zapiszesz 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 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 kontroli 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 w przypadku 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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ędziech deweloperskich.