Nowości w DevTools w Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025

Narzędzia deweloperskie w Chrome będą w tym roku ważnym tematem na konferencji Google I/O. Będą to zarówno sesje na żywo, jak i nagrane.

Aby dowiedzieć się więcej o nowych funkcjach, obejrzyj te materiały:

Nie zapomnij też wziąć udziału w sesji Rachel Andrew Nowości w internecie, która odbędzie się 20 maja 2025 r. o godzinie 16:30 czasu PT.

Obejrzyj nasz najnowszy film, aby szybko zapoznać się z najważniejszymi informacjami:

Modyfikowanie i zapisywanie zmian w CSS w obszarze roboczym za pomocą Gemini

Kilka kliknięć wystarczy, aby Gemini zmodyfikował i naprawił CSS. Dzięki połączonemu folderowi obszaru roboczego możesz zapisać zmiany z powrotem w plikach źródłowych na komputerze.

Automatyczne przestrzenie robocze to funkcja eksperymentalna. Możesz połączyć istniejący folder źródłowy lub wypróbować wersję demonstracyjną.

Gdy folder obszaru roboczego jest połączony, w panelu Elementy kliknij Zapytaj AI, poproś Gemini o zmodyfikowanie CSS, kliknij Dalej, aby przetestować zmiany na żywo, a następnie rozwiń Niezapisane zmiany, kliknij Zastosuj w obszarze roboczym, sprawdź różnice i kliknij Zapisz wszystko.

Połącz folder obszaru roboczego i zapisz zmiany w plikach źródłowych

Możesz teraz automatycznie (lub ręcznie) połączyć folder obszaru roboczego, aby narzędzia deweloperskie mogły zapisywać zmiany w plikach JavaScript, HTML i CSS z powrotem w plikach źródłowych przechowywanych na komputerze.

Zobacz, jak to działa w przypadku JavaScriptu:

Problem z Chromium: 404170628.

Zapytaj Gemini o statystyki skuteczności

Teraz możesz rozpocząć czat z Gemini, aby analizować te statystyki skuteczności i podejmować na ich podstawie działania:

  • LCP według etapu
  • Wykrywanie żądań LCP
  • Prośby o zablokowanie renderowania
  • Przyczyny problemów związanych z przesunięciem układu
  • Czas oczekiwania w przypadku żądania dokumentu

Widok przed dodaniem przycisku „Zapytaj AI” do statystyk w panelu Skuteczność i po jego dodaniu.

Swoją opinię o tej funkcji możesz przesłać na stronie crbug.com/371170842.

Dodawanie adnotacji do wyników dotyczących skuteczności za pomocą Gemini

Możesz teraz poprosić Gemini o wygenerowanie adnotacji dotyczących zdarzeń w śladzie wydajności.

Kliknij dwukrotnie zdarzenie na ścieżce Główna, a następnie kliknij Wygeneruj etykietę obok pola wprowadzania. Gemini może sugerować etykietę na podstawie śladu stosu i kontekstu.

Dodawanie zrzutów ekranu do czatów z Gemini

W panelu Pomoc AI możesz teraz kliknąć przycisk Zrób zrzut ekranu, aby zrobić zrzut ekranu strony i przesłać go na czat z Gemini.

Zrzuty ekranu mogą dostarczać dodatkowego kontekstu wizualnego do promptów, np. możesz sprawdzić, czy wszystkie widoczne przyciski mają takie same odstępy.

Przed i po dodaniu przycisku „Zrób zrzut ekranu” do panelu „Pomoc AI”.

Nowe statystyki w panelu Wydajność

W tej wersji dodaliśmy do panelu Wydajność 2 nowe statystyki: Zduplikowany kod JavaScript i Starszy kod JavaScript.

Duplikat kodu JavaScript

Nowa sekcja Skuteczność > Statystyki > Zduplikowany JavaScript w śladzie Sieć będzie wyróżniać żądania dużych zduplikowanych modułów JavaScript w pakietach, jeśli znajdują się one na stronie.

Statystyka „Duplikat kodu JavaScript” w panelu Wydajność.

Aby sprawdzić zależności JavaScript, możesz też kliknąć Wyświetl mapę drzewa w sekcji statystyk.

Starszy kod JavaScript

Nowa sekcja Skuteczność > Statystyki > Starszy JavaScript będzie wyróżniać w ścieżce Sieć żądania dotyczące starszego JavaScriptu, jeśli występuje on na stronie. Może to być np. element polyfill lub przekształcenie, które umożliwiają starszym przeglądarkom korzystanie z nowych funkcji JavaScriptu. Jednak nowoczesne przeglądarki nie potrzebują wielu takich elementów.

Statystyka „Starsza wersja JavaScript” w panelu Wydajność.

Spekulacje obsługują teraz tagi reguł

W sekcji Aplikacja > Spekulacyjne wczytywanie w przypadku zestawów reguł wyświetlane są teraz tagi zamiast adresów URL, jeśli tagi są obecne.

Przed i po zastąpieniu adresu URL zestawu reguł tagiem.

Problem z Chromium: 393408589.

Lighthouse 12.6.0

Panel Lighthouse działa teraz w wersji 12.6.0.

Najważniejsza zmiana w tej wersji to przejście Lighthouse na audyty dotyczące statystyk wydajności. W kategorii Skuteczność w raporcie Lighthouse możesz teraz wypróbować statystyki.

Widok przed i po dodaniu opcji przełączania na statystyki w raporcie Lighthouse.

Zobacz też pełną listę zmian.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 40543651.

Różne wyróżnione informacje

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

  • Sieć: dodano analizowanie znanych formatów czasu serwera.
  • Możesz teraz odznaczać wiersze w tabelach, naciskając Cmd/Ctrl i klikając (problem w Chromium: 409474445).
  • Skuteczność > Statystyki > Korzystaj z efektywnych okresów ważności pamięci podręcznej ignoruje teraz zasoby z okresem ważności równym lub dłuższym niż 30 dni.

Ułatwienia dostępu

Ta wersja zawiera te ulepszenia dotyczące ułatwień dostępu:

  • Skuteczność: strzałki inicjatora w śladzie są teraz lepiej widoczne.
  • Elementy: możesz teraz przełączać widok drzewa ułatwień dostępu na pełną stronę za pomocą skrótu A (problem w Chromium: 40888478).

  • Czytniki ekranu odczytują teraz m.in.:

    • „Skopiowano do schowka” podczas kopiowania z bloków kodu.
    • „Zastosowano w obszarze roboczym” – gdy zastosujesz zmiany w obszarze roboczym na czacie pomocy AI.
    • „Generowanie etykiety”, gdy poprosisz AI o jej wygenerowanie w sekcji Skuteczność > Adnotacje.
    • Pamiętaj, że w czacie Asystenta AI znajdziesz sugerowane prompty.
    • Sprawdź szacowane oszczędności w przypadku odpowiednich statystyk w sekcji Skuteczność > Statystyki.

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.