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

Jecelyn Yeen

Edytor siatki CSS

To bardzo wyczekiwana funkcja. Teraz możesz wyświetlać podgląd i tworzyć siatki CSS za pomocą nowego edytora siatek CSS.

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

Problem z Chromium: 1203241

Obsługa ponownych deklaracji const w Konsoli

Konsola obsługuje teraz ponowne deklarowanie instrukcji const, a także dotychczasowe ponowne deklaracje let i class. Brak możliwości ponownego deklarowania 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 zobaczyć, jak działa, lub eksperymentować, wprowadzać niewielkie zmiany w kodzie i powtarzać 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.

Zobacz przykład poniżej. constPonowna deklaracja jest obsługiwana w oddzielnych skryptach 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

Teraz możesz wyświetlić kolejność elementów źródłowych na ekranie, aby lepiej sprawdzić ułatwienia dostępu.

Kolejność treści w dokumencie HTML jest ważna dla optymalizacji witryn pod kątem wyszukiwarek (SEO) i ułatwień dostępu. Nowsze funkcje CSS umożliwiają deweloperom tworzenie treści, które wyglądają na ekranie zupełnie inaczej niż w dokumencie HTML. Jest to duży problem z ułatwieniami dostępu, 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 debugować potencjalne problemy.

Problem z Chromium: 1192084

Ulepszona obsługa debugowania CORS

Błędy współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS) są teraz widoczne na karcie Problemy. Błędy CORS mogą być spowodowane różnymi przyczynami. Kliknij, aby rozwinąć każdy problem i poznać jego potencjalne przyczyny oraz rozwiązania.

Problem z Chromium: 1141824

Aktualizacje panelu Sieć

Zmiana nazwy etykiety XHR na Fetch/XHR

Etykieta XHR została zmieniona na Fetch/XHR. Ta zmiana wyraźniej pokazuje, że ten filtr obejmuje żądania sieciowe XMLHttpRequest i Fetch API.

Problem z 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

Interfejs User-Agent Client Hints dla urządzeń na karcie Warunki sieciowe

Interfejs User-Agent Client Hints jest teraz stosowany do urządzeń w polu Klient użytkownika na karcie Warunki sieci.

Interfejs User-Agent Client Hints to nowe rozszerzenie interfejsu API wskazówek dotyczących klienta, 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 osobliwości na karcie Problemy

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

Tryb osobliwości i tryb prawie zgodny ze standardami to starsze tryby przeglądarki, które powstały przed wprowadzeniem standardów internetowych. Te tryby emulują zachowania układu z czasów sprzed wprowadzenia standardów, co często powoduje 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, jak go rozwiązać.

Problem z Chromium: 622660

Uwzględnij obliczanie przecięć w panelu Wydajność

Narzędzia deweloperskie pokazują teraz obliczanie przecięć na wykresie płomieniowym. Te zmiany pomogą Ci zidentyfikować zdarzenia Intersection Observer i debugować potencjalne problemy z wydajnością.

Problem z Chromium: 1199137

Lighthouse 7.5 w panelu Lighthouse

W panelu Lighthouse działa teraz Lighthouse 7.5. Ostrzeżenie „brak bezpośrednio określonej szerokości i wysokości” zostało usunięte w przypadku obrazów z atrybutem aspect-ratio zdefiniowanym w kodzie 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 „Uruchom ponownie ramkę” w stosie wywołań

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

Problem z Chromium: 1203606

[Funkcja eksperymentalna] Monitor protokołu

Narzędzia deweloperskie w Chrome korzystają z protokołu narzędzi deweloperskich w Chrome (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 Narzędzia deweloperskie.

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

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

Problemy z Chromium: 1204004, 1204466

[Funkcja eksperymentalna] Rejestrator Puppeteer

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

Po nagraniu kroków możesz użyć nowego przycisku Odtwórz, aby je odtworzyć. 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 Chrome Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają 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 poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi.

• Prześlij nam 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 na YouTube dotyczących nowości w Narzędziach deweloperskich lub filmów na YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.