W Chrome 144 zespół wprowadził bardzo oczekiwaną funkcję na serwerze MCP Narzędzi deweloperskich w Chrome – nowy panel Warunki żądania oraz ulepszenia debugowania czcionek i zaadaptowanych arkuszy stylów.
To już koniec tej niezwykłej listy funkcji, które wprowadziliśmy w 2025 roku. Chcesz sprawdzić, czy nie umknęło Ci żadne z nich? Następnie zapoznaj się z najważniejszymi informacjami lub przejrzyj poprzednie wydania artykułu Co nowego w narzędziach deweloperskich.
Aktualizacje serwera MCP w Narzędziach deweloperskich
Wprowadziliśmy różne poprawki na serwerze MCP Narzędzi deweloperskich i wydaliśmy wersję 0.12.1. Ta wersja wprowadza nową, kluczową funkcję automatycznego łączenia, która umożliwia ponowne wykorzystanie istniejącej sesji przeglądarki. Dzięki automatycznemu połączeniu możesz rozpocząć debugowanie w Chrome, a następnie skierować narzędzia DevTools MCP na tę samą instancję Chrome, aby kontynuować pracę.
Więcej informacji o automatycznym połączeniu z Narzędziami deweloperskimi MCP znajdziesz w tym poście na blogu. Pełną listę zmian i poprawek błędów znajdziesz w publicznej historii zmian w GitHubie.
Ograniczanie wykorzystania sieci w przypadku poszczególnych żądań sieciowych
Panel Blokowanie żądań sieciowych został zmieniony na Warunki żądania. Oprócz blokowania żądań ten panel umożliwia teraz również ograniczanie poszczególnych żądań.
Otwórz panel, klikając ⋮ > Więcej narzędzi > Warunki żądania. Zaznacz pole wyboru Włącz blokowanie i ograniczanie, aby włączyć blokowanie żądań. Kliknij przycisk +, aby dodać nowy wzorzec tekstu. Aby odrzucić wszystkie reguły, kliknij ikonę .
Dowiedz się, jak ograniczać poszczególne żądania sieci w zaktualizowanej dokumentacji.
Edytowanie reguł @font-face i @font-feature-values
@font-face i @font-feature-values są teraz wyświetlane w panelu Style i można je tam edytować.
Zaadoptowane arkusze stylów w panelu Elementy
W panelu Elementy są teraz widoczne zaadaptowane arkusze stylów w korzeniach cienia i korzeniach dokumentu. Ułatwia to osobom pracującym z arkuszami stylów utworzonymi w JavaScript znajdowanie arkuszy stylów wpływających na ich elementy i debugowanie stylów, zwłaszcza gdy nie są one stosowane w nieoczekiwany sposób.
Nowości w Narzędziach deweloperskich w 2025 r.
Innowacje w zakresie AI
Zaczęło się od statystyk konsoli, a obecnie innowacje AI stanowią integralną część narzędzi deweloperskich w Chrome. Głównym centrum debugowania z pomocą AI jest panel Pomoc AI. Dzięki sugestiom kodu w panelach Konsola i Źródła oraz automatycznym adnotacjom od Gemini w śladach wydajności Narzędzia deweloperskie oferują kompleksowy zestaw narzędzi opartych na AI, które usprawniają przepływy pracy.
- Kompleksowe poprawki stylów: poproś Gemini o rozwiązanie problemów z CSS i, w połączeniu z obszarami roboczymi, zapisz te zmiany bezpośrednio w plikach źródłowych na dysku.
- Zadawanie pytań o wydajność: możesz teraz omawiać pełny ślad wydajności z pomocą AI, szczegółowo analizować dowolne statystyki dotyczące wydajności lub używać Gemini do dodawania adnotacji do śladu.
- Debugowanie wizualne: panel pomocy AI stał się multimodalny, co umożliwia przesyłanie obrazów lub robienie zrzutów ekranu, aby pomóc Gemini zrozumieć i debugować wizualne usterki.
Wyniki
Przeprojektowaliśmy panel Wydajność, aby ułatwić debugowanie wydajności i uczynić je bardziej przydatnym. Na przykład zarejestrowany ślad zawiera teraz wyselekcjonowane informacje, które pomagają szybciej identyfikować wąskie gardła i poruszać się po śladach. Inne ulepszenia:
- Statystyki umożliwiające podjęcie działań: wprowadziliśmy obszerny zestaw statystyk wydajności, które pomagają identyfikować konkretne problemy, takie jak LCP według fazy, przyczyny przesunięć układu i opóźnienia w żądaniach dokumentów.
- Kontekst rzeczywisty: zintegrowaliśmy dane zgromadzone i dane CrUX bezpośrednio z panelem Wydajność, co pozwala weryfikować wyniki laboratoryjne na podstawie doświadczeń prawdziwych użytkowników.
- Kontekst platformy: Angular w wersji 20 i React w wersji 19.2 korzystają teraz z interfejsu Extensibility API. Zrozumienie wąskich gardeł głównego wątku staje się łatwiejsze dzięki bezpośredniemu wglądowi w drzewo komponentów. Dziękujemy zespołom Angular i React za współpracę.
- Ulepszona współpraca: udostępnianie śladów stało się łatwiejsze dzięki możliwości dodawania do nich adnotacji oraz opcjom eksportowania treści zasobów i map źródłowych, co zapewnia współpracownikowi lub Tobie w przyszłości wszystkie potrzebne informacje.
Platforma internetowa
Narzędzia deweloperskie nadążały za rozwojem platformy internetowej, dodając specjalne narzędzia do najnowszych specyfikacji CSS i ulepszając funkcje, które już były dostępne.
Dodaliśmy szczegółowe śledzenie złożonych łańcuchów zmiennych CSS, dostępność Baseline w etykietkach narzędzi właściwości, a niedawno wprowadziliśmy obsługę debugowania złożonych animacji wejścia za pomocą reguły @starting-style i edytora wizualnego dla nowego układu display: masonry.
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ą wykrywać problemy w witrynie, zanim zauważą je użytkownicy.
Skontaktuj się 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 „Nowości w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.