Nowości w DevTools w Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025

Na tegorocznej konferencji Google I/O narzędzia deweloperskie w Chrome będą miały bardzo silną reprezentację. Będzie to mieszanka sesji na żywo i nagrywanych.

Aby dowiedzieć się więcej o ciekawych nowych funkcjach, zapoznaj się z tymi materiałami:

Nie zapomnij też obejrzeć sesji „Co nowego w internecie”, którą poprowadzi Rachel Andrew 20 maja 2025 r. o 16:30 czasu PT.

Obejrzyj nasz najnowszy film, aby poznać nasze najnowsze osiągnięcia:

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

Kilkoma kliknięciami możesz teraz zlecić Gemini modyfikowanie i poprawianie kodu CSS, a dzięki połączonemu folderowi obszaru roboczego możesz zapisywać zmiany w plikach źródłowych na komputerze.

Automatyczne workspace’y to funkcja eksperymentalna. Możesz połączyć istniejący folder źródłowy lub skorzystać z demonstracji.

Po połączeniu folderu obszaru roboczego w panelu Elementy kliknij Zapytaj AI, poproś Gemini o zmodyfikowanie kodu 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.

Łączenie folderu obszaru roboczego i zapisywanie zmian w plikach źródłowych

Teraz możesz automatycznie (lub ręcznie) połączyć folder workspace, aby umożliwić DevTools zapisywanie zmian w kodzie JavaScript, HTML i CSS z powrotem w plikach źródłowych na komputerze.

Zobacz, jak to działa w przypadku kodu JavaScript:

Problem z Chromium: 404170628.

Zapytaj Gemini o statystyki dotyczące skuteczności

Wystarczy kliknąć przycisk, aby rozpocząć czat z Gemini i zbadać te statystyki dotyczące skuteczności:

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

Widok przed i po dodaniu do statystyk w panelu Skuteczność przycisku „Zadaj pytanie AI”.

Swoją opinię na temat tej funkcji możesz przekazać na stronie crbug.com/371170842.

Dodawanie adnotacji do wyników analizy za pomocą Gemini

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

Kliknij dwukrotnie zdarzenie na ścieżce Główna, a następnie obok pola wejściowego kliknij Wygeneruj etykietę. Gemini może zaproponować etykietę na podstawie ścieżki wywołania 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 do czatu z Gemini.

Zrzuty ekranu mogą służyć do przekazywania dodatkowego kontekstu wizualnego promptów, np. do sprawdzania, czy wszystkie widoczne przyciski mają taką samą odległość.

Stan przed i po dodaniu do panelu „Asystent AI” przycisku „Zrób zrzut ekranu”.

Nowe statystyki w panelu Wydajność

Ta wersja zawiera 2 nowe statystyki w panelu Wydajność: Duplikat kodu JavaScript i Stary kod JavaScript.

Duplikat kodu JavaScript

Nowa sekcja Wydajność > Statystyki > Duplikat JavaScriptu w sekcji Sieć będzie wyróżniać żądania dotyczące dużych, powielonych modułów JavaScriptu w Twoich pakietach, jeśli występują one na stronie.

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

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

Starsza wersja kodu JavaScript

Nowa sekcja Skuteczność > Statystyki > Starsze wersje JavaScriptu wyróżnia w sekcji Sieć żądania dotyczące starszych wersji JavaScriptu, jeśli są obecne na stronie, np. elementy polyfill i przekształcenia, 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 > Wstępne wczytywanie w przypadku zestawów reguł (jeśli są obecne) tagi są teraz wyświetlane zamiast adresów URL.

Adres URL reguły przed i po zastąpieniu go tagiem.

Problem z Chromium: 393408589.

Lighthouse 12.6.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 12.6.0.

Najważniejszą zmianą w tej wersji jest przejście narzędzia Lighthouse na audyt statystyk wydajności. W kategorii Skuteczność w raporcie Lighthouse możesz teraz wypróbować statystyki.

Stan przed i po dodaniu opcji przełączania się na statystyki w raporcie Lighthouse

Zobacz też pełną listę zmian.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 40543651.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Sieć: dodano analizę znanych formatów czasów serwera.
  • Teraz możesz odznaczać wiersze w tabelach za pomocą kombinacji Cmd lub Ctrl + kliknięcie (problem w Chromium: 409474445).
  • Opcja Wydajność > Statystyki > Użyj efektywnego czasu trwania pamięci podręcznej ignoruje teraz zasoby z czasem życia równym lub dłuższym niż 30 dni.

Ułatwienia dostępu

Ta wersja zawiera te ułatwienia dostępu:

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

  • Czytniki ekranu mówią teraz między innymi o:

    • „Skopiowano do schowka” podczas kopiowania z bloków kodu.
    • „Zastosuj do obszaru roboczego” podczas stosowania zmian w obszarze roboczym w czacie Pomocy AI.
    • „Generowanie etykiety” – gdy poprosisz AI o jej wygenerowanie w sekcji Wydajność > Adnotacje.
    • Pamiętaj, że w czacie Asystent AI wyświetlają się prompty.
    • Przeczytaj szacowane oszczędności w ramach odpowiednich statystyk w sekcji Wydajność > Statystyki.

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 Nowości w Narzędziach deweloperskich.