Bardziej niezawodne i wydajne Narzędzia deweloperskie w Chrome
W tej wersji zespół Narzędzi deweloperskich w Chrome skupił się na doskonałości produktu. Obejmowało to rozwiązanie wielu znanych problemów, od długotrwałych błędów wizualnych, kwestii związanych z użytecznością i niespójności w projekcie po problemy z wydajnością i funkcjonalnością. Ogólnie zmniejszyliśmy liczbę otwartych zgłoszeń o 27%.
Rozwiązaliśmy wreszcie problemy, które istniały od lat, ale wprowadziliśmy też ulepszenia w nowych funkcjach, np. w panelu Skuteczność i pomocy AI. W rezultacie znacznie poprawiliśmy komfort pracy deweloperów.
W tle podjęliśmy ogromny wysiłek, aby zwiększyć zakres testów, zbadać złożone przypadki niepowodzeń, przenieść testy na bardziej stabilne platformy i rozwiązać wykryte po drodze błędy. Udało nam się zmniejszyć liczbę problemów związanych z testami o 54%.
Mamy nadzieję, że zauważysz te liczne drobne poprawki i ulepszenia w różnych panelach, dzięki którym codzienne debugowanie i prace programistyczne będą łatwiejsze, bardziej niezawodne i wydajne.
Przesyłanie obrazów w ramach pomocy AI dotyczącej stylizacji
Aby zapewnić dodatkowy kontekst wizualny w promptach, możesz teraz nie tylko automatycznie robić zrzuty ekranu, ale też przesyłać dowolne obrazy na czaty z Gemini w panelu Pomoc AI.
Rozpocznij rozmowę w panelu Elementy, wybierając element DOM i klikając Zapytaj AI. Element zostanie określony jako kontekst rozmowy. Następnie w polu wpisywania kliknij Dodaj obraz.
Dodawanie nagłówków żądań do tabeli w panelu Sieć
W panelu Sieć możesz teraz kliknąć prawym przyciskiem myszy nazwę kolumny w tabeli żądań i wybrać wiele nagłówków żądań, aby dodać je jako kolumny.
Problem w Chromium: 397481040.
Najważniejsze informacje z konferencji Google I/O 2025
Jeśli jeszcze tego nie zrobisz, wypróbuj nowe, najważniejsze funkcje Narzędzi deweloperskich w Chrome, które zostały zaprezentowane na Google I/O 2025. Oto niektóre z nich:
- Źródła: połącz folder obszaru roboczego i zapisz zmiany w plikach źródłowych.
- Zasilane przez Gemini:
Sprawdź też nowe statystyki wydajności: Duplikat kodu JavaScript i Starsza wersja tagu JavaScript.
Różne wyróżnione informacje
Oto niektóre z wielu ważnych poprawek i ulepszeń w tej wersji:
- Aplikacja: dodaliśmy okno potwierdzenia, które wyświetla się przed wyczyszczeniem magazynów obiektów IndexedDB, ponieważ jest to działanie nieodwracalne (crbug.com/326987147).
- Źródła: punkty logowania i odznaki warunkowych punktów przerwania obok wierszy kodu wyświetlają teraz po najechaniu kursorem etykietkę z odpowiednim komunikatem logowania lub warunkiem (crbug.com/40266230).
Skuteczność:
- Statystyka Przyczyny przesunięcia układu zawiera teraz linki do zdjęć bez określonych wymiarów (crbug.com/416449602).
- Statystyka Wykrywanie żądań LCP pokazuje teraz opóźnienie w wczytywaniu obrazu po najstarszym punkcie początkowym.
- Ograniczanie: naprawiliśmy nieaktualny format ustawień ograniczania, które niektórzy użytkownicy mieli zapisane lokalnie.
- Dziennik zdarzeń: filtrowanie zostało przyspieszone (crbug.com/40783421).
Animacje: wycofaliśmy z użycia zrzuty ekranu podglądu, ponieważ kliknięcie grupy animacji w celu wyświetlenia podglądu zapewnia podobne i lepsze wrażenia (crbug.com/330179643).
Ułatwienia dostępu:
- Dodano etykiety aria do paska bocznego Źródła > Punkty przerwania DOM, jeśli jest on widoczny.
- Naprawiono nawigację za pomocą klawiszy Shift + Tab w polu tekstowym Wyrażenie na żywo w Konsoli (crbug.com/408398435, crbug.com/420344137).
- Ustawienia obsługują teraz skróty powiększania, pomniejszania i resetowania: Cmd/Ctrl + +/-/0 (crbug.com/41484555).
- Elementy > Style: ikony wskazówek i ostrzeżeń CSS (crbug.com/40706851) oraz zegar kątowy można teraz zaznaczać za pomocą klawiatury (crbug.com/401212624, crbug.com/401213524).
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.
- Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
- Zgłoś problem z Narzędziami deweloperskimi, klikając Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
- Wyślij tweeta do @ChromeDevTools.
- Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.
Co nowego w Narzędziach deweloperskich
Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.
- Narzędzia deweloperskie w Chrome (MCP) dla agenta AI
- Debugowanie drzewa zależności sieciowych za pomocą Gemini
- Eksportowanie czatów z Gemini
- Trwała konfiguracja ścieżki w panelu Wydajność
- Filtrowanie żądań sieciowych z ochroną IP
- Elementy > Karta Układ dodaje obsługę układu murarskiego
- Lighthouse 12.8.2
- Inne ważne informacje
- Debugowanie większej liczby statystyk za pomocą Gemini
- Emulowanie nagłówka „Save-Data” w sekcji „Warunki sieci”
- Wyświetlanie stanu linii bazowej w etykiecie właściwości CSS
- Zastępowanie typów urządzeń we wskazówkach dotyczących klienta użytkownika
- Lighthouse 12.8.0
- Inne ważne informacje
- Bardziej niezawodne i wydajne Narzędzia deweloperskie w Chrome
- Przesyłanie obrazów w ramach pomocy AI dotyczącej stylizacji
- Dodawanie nagłówków żądań do tabeli w Panelu sieci
- Najważniejsze informacje z konferencji Google I/O 2025
- Inne ważne informacje
- Ulepszenia panelu wydajności
- Źródła połączone w trybie preconnect w statystykach „Drzewo zależności sieciowych”
- Czas odpowiedzi serwera i przekierowania w statystyce „Opóźnienie żądania dokumentu”
- Przekierowania w podsumowaniu żądań sieciowych
- Mniej szumu w śladzie wydajności
- Wycofana opcja „Wyłącz próbki JavaScriptu”
- Parametr dokładności geolokalizacji w sekcji Czujniki
- Ulepszenia panelu Elementy
- Łatwiejsze debugowanie złożonych wartości CSS
- Obsługa funkcji@w Elementach > Style
- Ulepszenia panelu Sieć
- Filtr has-request-header
- Direct Sockets w izolowanych aplikacjach internetowych
- Inne ważne informacje
- Ułatwienia dostępu
- Wersja na Google I/O 2025
- Modyfikowanie i zapisywanie zmian w CSS w obszarze roboczym za pomocą Gemini
- Połącz folder obszaru roboczego i zapisz zmiany w plikach źródłowych
- Zapytaj Gemini o statystyki dotyczące wydajności
- Dodawanie adnotacji do wyników dotyczących skuteczności za pomocą Gemini
- Dodawanie zrzutów ekranu do czatów z Gemini
- Nowe statystyki w panelu Wydajność
- Duplikat kodu JavaScript
- Starszy kod JavaScript
- Spekulacje obsługują teraz tagi reguł
- Lighthouse 12.6.0
- Inne ważne informacje
- Ułatwienia dostępu
- Ulepszenia panelu wydajności
- Nowe statystyki dotyczące wyników
- Kliknij, aby wyróżnić
- Czasy serwera w sekcji Podsumowanie żądań sieciowych
- Filtrowanie plików cookie w sekcji „Prywatność i bezpieczeństwo”
- Rozmiary w kB w tabelach na wszystkich panelach
- Autouzupełnianie obsługuje kształt narożnika i kształt narożnika * w sekcji Elementy > Style
- Eksperymentalna: wyróżnianie problemów z elementami i atrybutami w DOM
- Lighthouse 12.5.0
- Inne ważne informacje
- Ulepszenia panelu wydajności
- Linki do pochodzenia i skryptu w przypadku wywołań profilu i funkcji w sekcji Skuteczność
- Obsługa danych z pola LCP według etapu
- Informacje o drzewie zależności sieciowych
- Czas trwania zamiast czasu całkowitego i własnego w podsumowaniu
- Wyróżnienie najbardziej obciążającego stosu
- Ulepszone stany puste w przypadku różnych paneli
- Widok drzewa ułatwień dostępu w panelu Elementy
- Lighthouse 12.4.0
- Inne ważne informacje
- Panel Prywatność i bezpieczeństwo
- Ulepszenia panelu wydajności
- Skalibrowane gotowe ustawienia ograniczania wykorzystania procesora
- Wybieranie różnych wydarzeń związanych ze skutecznością w tym samym czacie z AI
- Wyróżnianie danych własnych i danych firm zewnętrznych na stronie Skuteczność
- Dane pól w etykietkach i statystykach narzędzia do oznaczania
- Statystyki dotyczące wymuszonego przeformatowania
- Statystyka „Optymalizuj rozmiar DOM”
- Rozszerzanie śledzenia wydajności za pomocą console.timeStamp
- Ulepszenia panelu Elementy
- Wartości stylów animacji w czasie rzeczywistym
- Obsługa pseudoklasy :open i różnych pseudoelementów
- Kopiowanie wszystkich wiadomości z konsoli
- Jednostki bajtów w panelu Pamięć
- Inne ważne informacje
- Trwała historia czatu z AI
- Ulepszenia panelu wydajności
- Statystyki wyświetlania obrazów
- Klasyczna i nowoczesna nawigacja za pomocą klawiatury
- Ignorowanie nieistotnych skryptów na wykresie płomieniowym
- Znacznik osi czasu i podświetlanie zakresu po najechaniu kursorem
- Zalecane ustawienia ograniczania
- Znaczniki czasu w nakładce
- Śledzenie stosu wywołań JS w sekcji Podsumowanie
- Ustawienia plakietki przeniesione do menu w sekcji Elementy
- Nowy panel „Nowości”
- Lighthouse 12.3.0
- Inne ważne informacje
- Debugowanie żądań sieciowych, plików źródłowych i śladów wydajności za pomocą Gemini
- Wyświetlanie historii czatu z AI
- Zarządzanie miejscem na dane rozszerzenia w sekcji Aplikacja > Pamięć
- Usprawnienia wydajności
- Fazy interakcji w danych na żywo
- Informacje o blokowaniu renderowania na karcie Podsumowanie
- Obsługa zdarzeń scheduler.postTask i strzałek inicjatora
- Ulepszenia panelu Animacje i karty Elementy > Style
- Przechodzenie z sekcji Elementy > Style do sekcji Animacje
- Aktualizacje w czasie rzeczywistym na karcie Obliczone
- Emulacja ciśnienia obliczeniowego w aplikacji Czujniki
- Obiekty JS o tej samej nazwie zgrupowane według źródła w panelu Pamięć
- Nowy wygląd ustawień
- Panel Statystyki wydajności został wycofany i usunięty z Narzędzi deweloperskich
- Inne ważne informacje
- Debugowanie CSS za pomocą Gemini
- Kontrolowanie funkcji opartych na AI na specjalnej karcie ustawień
- Ulepszenia panelu wydajności
- Dodawanie adnotacji do wyników skuteczności i udostępnianie ich
- Statystyki wydajności bezpośrednio w panelu Wydajność
- Łatwiejsze wykrywanie nadmiernych zmian układu
- Wykrywanie nieskomponowanych animacji
- Równoczesność sprzętu przeniesiona do sekcji Czujniki
- Ignorowanie skryptów anonimowych i skupianie się na kodzie w zrzutach stosu
- Elementy > Style: obsługa trybów pisania sideways-* w przypadku nakładek siatki i słów kluczowych CSS
- Audyty Lighthouse dla stron innych niż HTTP w trybach okresu i migawki
- Ulepszenia ułatwień dostępu
- Inne ważne informacje
- Ulepszenia panelu Sieć
- Nowe filtry sieciowe
- Eksporty HAR domyślnie nie zawierają już danych poufnych
- Ulepszenia panelu Elementy
- Wartości autouzupełniania dla właściwości text-emphasis-*
- Przewijanie przepełnień oznaczonych plakietką
- Ulepszenia panelu wydajności
- Rekomendacje w danych na żywo
- Nawigacja po menu nawigacyjnym
- Ulepszenia panelu Pamięć
- Nowy profil „Odłączone elementy”
- Ulepszone nazewnictwo zwykłych obiektów JS
- Wyłączanie dynamicznego motywu
- Eksperyment w Chrome: udostępnianie procesów
- Lighthouse 12.2.1
- Inne ważne informacje
- Rejestrator obsługuje eksportowanie do Puppeteer w Firefoksie
- Ulepszenia panelu wydajności
- Obserwacje dotyczące danych na żywo
- Żądania wyszukiwania na ścieżce Sieć
- Wyświetlanie śladów stosu wywołań performance.mark i performance.measure
- Używanie danych adresów testowych w panelu autouzupełniania
- Ulepszenia panelu Elementy
- Wymuszanie większej liczby stanów w przypadku określonych elementów
- Elementy > Style teraz automatycznie uzupełniają więcej właściwości siatki
- Lighthouse 12.2.0