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

Jecelyn Yeen

Edytor siatki CSS

Jest to bardzo oczekiwana funkcja. Możesz teraz wyświetlać podgląd siatki CSS i ją tworzyć w nowym edytorze siatki CSS.

Gdy do elementu HTML na stronie zastosowano atrybut display: grid lub display: inline-grid, obok niego w panelu Style pojawi się ikona. Kliknij ikonę, aby włączyć lub wyłączyć edytor siatki CSS. Możesz tu wyświetlić podgląd potencjalnych zmian za pomocą ikon na ekranie (np. justify-content: space-around) i utworzyć wygląd siatki jednym kliknięciem.

Problem w Chromium: 1203241

Obsługa const ponownych deklaracji w Konsoli

Konsola obsługuje teraz ponowne deklarowanie instrukcji const, a także ponowne deklarowanie let i class. Brak możliwości ponownego zadeklarowania był częstym problemem dla programistów stron internetowych, którzy używają konsoli do eksperymentowania z nowym kodem JavaScript.

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

Zapoznaj się z przykładem poniżej. const ponowne deklarowanie jest obsługiwane w różnych skryptach REPL (patrz zmienna a). Pamiętaj, że poniższe scenariusze nie są obsługiwane:

• const ponowne deklarowanie skryptów stron jest niedozwolone w skryptach REPL
• const ponowne zadeklarowanie w tym samym skrypcie REPL jest niedozwolone (patrz zmienna b)

Problem w Chromium: 1076427

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

Możesz teraz wyświetlać kolejność elementów źródłowych na ekranie, aby lepiej sprawdzać dostępność.

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 w kolejności wyświetlania na ekranie bardzo różnią się od kolejności w dokumencie HTML. Jest to poważny problem z dostępnością, ponieważ użytkownicy czytników ekranu będą mieli inne, prawdopodobnie mylące wrażenia niż użytkownicy widzący.

Problem z Chromium: 1094406

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

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

Otworzy się widok szczegółów elementu iframe w panelu Aplikacja, w którym możesz sprawdzić szczegóły dokumentu, stan zabezpieczeń i izolacji, zasady dotyczące uprawnień i inne informacje, aby rozwiązać potencjalne problemy.

Problem w Chromium: 1192084

Rozszerzona obsługa debugowania CORS

Błędy związane ze współdzieleniem zasobów między serwerami z różnych domen (CORS) są teraz widoczne na karcie Problemy. Błędy CORS mogą być spowodowane różnymi przyczynami. Kliknij każdy problem, aby dowiedzieć się więcej o potencjalnych przyczynach i rozwiązaniach.

Problem w Chromium: 1141824

Aktualizacje panelu Sieć

Zmiana nazwy etykiety XHR na Pobieranie/XHR

Etykieta XHR została zmieniona na Pobieranie/XHR. Ta zmiana wyjaśnia, że filtr obejmuje żądania sieciowe XMLHttpRequest i Fetch API.

Problem w Chromium: 1201398

Filtrowanie typu zasobu Wasm w panelu Sieć

Możesz teraz kliknąć nowy przycisk Wasm, aby filtrować żądania sieciowe Wasm.

Problem z Chromium: 1103638

Wskazówki dotyczące klienta użytkownika w przypadku urządzeń na karcie Warunki sieci

Wskazówki dotyczące klienta użytkownika są teraz stosowane w przypadku urządzeń w polu Klient użytkownika na karcie Stan sieci.

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

Problem w Chromium: 1174299

Zgłaszanie problemów z trybem zgodności na karcie Problemy

Narzędzia deweloperskie zgłaszają teraz problemy z trybem zgodności i ograniczonym trybem zgodności.

Tryb osobliwości i tryb osobliwości ograniczony to starsze tryby przeglądarki, które istniały przed wprowadzeniem standardów internetowych. Te tryby emulują zachowania układu z okresu przed wprowadzeniem 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 działa strona. Narzędzia deweloperskie podają sugestie dotyczące rozwiązania tego problemu.

Problem z Chromium: 622660

Uwzględnij w panelu Wydajność funkcję Oblicz przecięcia

Narzędzia deweloperskie wyświetlają teraz w wykresie płomieniowym funkcję Compute Intersections. Te zmiany pomogą Ci identyfikować zdarzenia obserwatorów przecięcia i debugować potencjalne obciążenie związane z wydajnością.

Problem w Chromium: 1199137

Lighthouse 7.5 w panelu Lighthouse

Panel Lighthouse działa teraz w wersji 7.5. W przypadku obrazów, dla których w CSS zdefiniowano aspect-ratio, ostrzeżenie „brak jawnej szerokości i wysokości” zostało usunięte. Wcześniej Lighthouse wyświetlał ostrzeżenia dotyczące obrazów, w przypadku których nie zdefiniowano szerokości i wysokości.

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

Problem w Chromium: 772558

Wycofanie menu kontekstowego „Uruchom ponownie ramkę” w stosie wywołań

Opcja Uruchom ponownie ramkę jest obecnie wycofana. Ta funkcja wymaga dalszego rozwoju, aby działać prawidłowo. Obecnie jest uszkodzona i często się zawiesza.

Problem w Chromium: 1203606

[Eksperymentalny] Monitor protokołów

Narzędzia deweloperskie w Chrome korzystają z protokołu narzędzi deweloperskich w Chrome (CDP), aby instrumentować, sprawdzać, debugować i profilować przeglądarki Chrome. Monitor protokołu umożliwia wyświetlanie wszystkich żądań i odpowiedzi CDP wysyłanych przez Narzędzia deweloperskie.

Dodaliśmy 2 nowe funkcje, które ułatwiają testowanie platformy CDP:

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

Problemy z Chromium: 1204004, 1204466

[Eksperymentalne] Rejestrator Puppeteer

Rejestrator Puppeteer generuje teraz listę kroków na podstawie Twoich interakcji z przeglądarką. Wcześniej Narzędzia deweloperskie generowały bezpośrednio skrypt Puppeteer. Dodaliśmy nowy przycisk Eksportuj, który umożliwia eksportowanie kroków jako skryptu Puppeteer.

Po nagraniu czynności możesz użyć nowego przycisku Odtwórz, aby je odtworzyć. Aby dowiedzieć się, jak rozpocząć nagrywanie, postępuj zgodnie z instrukcjami podanymi tutaj.

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

Problem w Chromium: 1199787

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 more_vert 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.