Nowości w Narzędziach deweloperskich (Chrome 92)

Edytor siatki CSS

Jest to bardzo oczekiwana funkcja. Teraz możesz wyświetlać podgląd siatki CSS i wprowadzać w niej zmiany za pomocą nowego edytora.

Gdy element HTML na stronie ma zastosowany styl display: grid lub display: inline-grid, obok niego w panelu Styli pojawia się ikona. Kliknij ikonę, aby włączyć lub wyłączyć edytor siatki CSS. Tutaj możesz wyświetlić podgląd potencjalnych zmian za pomocą ikon na ekranie (np. justify-content: space-around) i za pomocą jednego kliknięcia zmienić wygląd siatki.

Problem z Chromium: 1203241

Obsługa deklaracji const w Konsoli

Konsola obsługuje teraz ponowne deklarowanie instrukcji const, oprócz istniejących ponownych deklaracji let i class. Brak możliwości ponownego zadeklarowania był częstym problemem dla programistów internetowych, którzy korzystają z Konsoli do eksperymentowania z nowym kodem JavaScript.

Dzięki temu deweloperzy mogą kopiować i wklejać kod do konsoli DevTools, aby sprawdzić, jak działa, lub eksperymentować, wprowadzać drobne zmiany w kodzie i powtarzać ten proces bez odświeżania strony. Wcześniej w Narzędziach deweloperskich występował błąd składni, jeśli kod ponownie zadeklarował wiązanie const.

Zapoznaj się z przykładem poniżej. const jest obsługiwana w ramach oddzielnych skryptów REPL (patrz zmienna a). Pamiętaj, że te scenariusze nie są obsługiwane:

• const ponowna deklaracja skryptów strony jest niedozwolona w skryptach REPL
• ponowna deklaracja const w tym samym skrypcie REPL jest niedozwolona (patrz zmienna b)

Problem z Chromium: 1076427

Przeglądarka kolejności źródłowej

Aby ułatwić sprawdzanie ułatwień dostępu, możesz teraz wyświetlać na ekranie kolejność elementów źródłowych.

Kolejność treści w dokumencie HTML jest ważna z punktu widzenia optymalizacji pod kątem wyszukiwarek i dostępności. Nowsze funkcje CSS umożliwiają deweloperom tworzenie treści, które wyglądają na ekranie zupełnie inaczej niż w dokumencie HTML. Jest to poważny problem z ułatwieniami dostępu, ponieważ użytkownicy czytników ekranu mieliby inne, prawdopodobnie mylące wrażenia niż użytkownicy z dobrym wzrokiem.

Problem z Chromium: 1094406

Nowy skrót do wyświetlania szczegółów ramki

Aby wyświetlić szczegóły iframe, kliknij prawym przyciskiem myszy element iframe w panelu Elementy i wybierz Pokaż szczegóły ramki.

W panelu aplikacji wyświetlą się szczegóły iframe’a, dzięki którym możesz sprawdzić szczegóły dokumentu, stan zabezpieczeń i izolacji, zasady dotyczące uprawnień i inne informacje, aby debugować potencjalne problemy.

Problem z Chromium: 1192084

Ulepszona obsługa debugowania CORS

Błędy mechanizmu CORS są teraz widoczne na karcie Problemy. Błędy CORS mogą być spowodowane różnymi przyczynami. Kliknij, aby rozwinąć każdy problem i dowiedzieć się więcej o jego przyczynach i rozwiązaniach.

Problem z Chromium: 1141824

Aktualizacje panelu sieci

Zmień nazwę etykiety XHR na Pobranie/XHR

Etykieta XHR została zmieniona na Pobieranie/XHR. Ta zmiana sprawia, że łatwiej zauważyć, że ten filtr obejmuje zarówno żądania sieciowe XMLHttpRequest, jak i interfejs Fetch API.

Problem z Chromium: 1201398

Filtrowanie typu zasobu Wasm w panelu Sieć

Aby filtrować żądania sieciowe Wasm, możesz teraz kliknąć nowy przycisk Wasm.

Problem z Chromium: 1103638

Wskazówki dotyczące klienta użytkownika na karcie Stan sieci

Wskazówki dotyczące klienta użytkownika są teraz stosowane na urządzeniach w polu Klient użytkownika na karcie Warunki sieci.

Wskazówki dotyczące klienta użytkownika to nowe rozszerzenie interfejsu Client Hints API, które umożliwia deweloperom dostęp do informacji o przeglądarce użytkownika w sposób ergonomiczny i chroniący prywatność.

Problem z Chromium: 1174299

Zgłaszanie problemów z trybem Quirks na karcie Problemy

Narzędzie DevTools raportuje teraz problemy z trybem Quirks i trybem ograniczonego Quirks.

Tryb osobliwości i Tryb ograniczonych osobliwości to starsze tryby przeglądarki sprzed powstania standardów internetowych. Te tryby emulują zachowania układu sprzed standardu, które często powodują nieoczekiwane efekty wizualne.

Podczas debugowania problemów z układem deweloperzy mogą sądzić, że są one spowodowane błędami w kodzie CSS lub HTML napisanym przez użytkownika, podczas gdy prawdziwym problemem jest tryb zgodności, w którym znajduje się strona. Narzędzia deweloperskie podają sugestie dotyczące rozwiązania problemu.

Problem z Chromium: 622660

Dodawanie w panelu Wydajność funkcji Oblicz przecięcia

Na karcie DevTools w widoku wykresu słupkowego teraz wyświetla się opcja Oblicz przecięcia. Te zmiany pomogą Ci zidentyfikować zdarzenia intersection observers i przeprowadzić debugowanie ich potencjalnego obciążenia wydajności.

Problem z Chromium: 1199137

Lighthouse 7.5 w panelu Lighthouse

Panel Lighthouse korzysta teraz z wersji 7.5. Ostrzeżenie „Brak wyraźnie określonej szerokości i wysokości” zostało usunięte w przypadku obrazów z definicją aspect-ratio w CSS. Wcześniej Lighthouse wyświetlał ostrzeżenia dotyczące obrazów bez zdefiniowanej szerokości i wysokości.

Pełną listę zmian znajdziesz w informacjach o wersji.

Problem z Chromium: 772558

Wycofane menu kontekstowe „Restart frame” w zestawie wywołań

Opcja Restart frame (Restart frame) została wycofana. Ta funkcja wymaga dalszego rozwoju, aby działać prawidłowo. Obecnie jest uszkodzona i często się zawiesza.

Problem z Chromium: 1203606

[Eksperymentalnie] Monitor protokołów

Narzędzia deweloperskie w Chrome korzystają z protokołu Chrome DevTools (CDP) do instrumentowania, sprawdzania, debugowania i profilowania przeglądarek Chrome. Monitor protokołu umożliwia wyświetlanie wszystkich żądań i odpowiedzi CDP wysyłanych przez DevTools.

Dodano 2 nowe funkcje ułatwiające testowanie CDP:

• Nowy przycisk Zapisz umożliwia pobieranie nagranych wiadomości jako plików JSON.
• nowe pole, które umożliwia bezpośrednie wysyłanie nieprzetworzonego polecenia CDP;

Problemy z Chromium: 1204004, 1204466

[Experimental] Puppeteer Recorder

Narzędzie Puppeteer recorder generuje teraz listę kroków na podstawie interakcji z przeglądarką, podczas gdy wcześniej narzędzia DevTools generowały bezpośrednio skrypt Puppeteer. Dodano nowy przycisk Eksportuj, który umożliwia eksportowanie kroków jako skryptu Puppeteer.

Po nagraniu czynności możesz je odtworzyć, korzystając z nowego przycisku Odtwórz. Aby dowiedzieć się, jak rozpocząć nagrywanie, postępuj zgodnie z tymi instrukcjami.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Z czasem planujemy ulepszać i rozszerzać funkcje Dyktafonu.

Problem z Chromium: 1199787

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.