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

Jecelyn Yeen

Funkcja podglądu: drzewo ułatwień dostępu na całej stronie

Nowe drzewo dostępności całej strony ułatwia przeglądanie drzewa dostępności całej strony i pomaga lepiej zrozumieć, jak treści w witrynie są wyświetlane przez technologie wspomagające.

W panelu Elementy otwórz panel Ułatwienia dostępu i zaznacz pole wyboru Włącz drzewo ułatwień dostępu na całej stronie. Następnie ponownie załaduj DevTools, a w panelu Elementy zobaczysz nowy przycisk ułatwień dostępu.

Możesz kliknąć tę ikonę, aby przełączyć się na widok drzewa ułatwień dostępu na całej stronie. Możesz rozwinąć węzły lub kliknąć, aby wyświetlić szczegóły w panelu Dostępność.

Wybierz węzeł i wróć do widoku drzewa DOM. Teraz wybrano odpowiedni węzeł DOM. To świetny sposób na zrozumienie mapowania między węzłem DOM a węzłem drzewa ułatwień dostępu. To działa również w przypadku drzewa DOM ⬌ widoku drzewa ułatwień dostępu.

Wcześniej drzewo ułatwień dostępu było dostępne w panelu Ułatwienia dostępu. Widok jest ograniczony i umożliwia przeglądanie tylko jednego węzła oraz jego przodków.

Nasz zespół nadal pracuje nad tą funkcją w wersji wstępnym. Czekamy na Twoją opinię, która pomoże nam w dalszym ulepszaniu usługi.

Drzewo ułatwień dostępu na całej stronie

Problem z Chromium: 887173

Bardziej precyzyjne zmiany na karcie Zmiany

Zmiany kodu na karcie Zmiany są automatycznie drukowane w czytelny sposób.

Wcześniej trudno było prześledzić rzeczywiste zmiany w zminifikowanym kodzie źródłowym, ponieważ cały kod był wyświetlany w jednej linii.

Karta Zmiany

Problemy z Chromium: 1238818, 1268754 , 1086491

Ustawianie dłuższego limitu czasu nagrywania sekwencji użytkownika

Możesz teraz dostosowywać ustawienia czasu oczekiwania w rejestratorze dla wszystkich kroków lub konkretnego kroku. Jest to przydatne zwłaszcza w przypadku stron z wolnymi żądaniami sieciowymi i długą animacją.

Na przykład nagrałem ścieżkę użytkownika na tej stronie demonstracyjnej, aby załadować i kliknąć element menu. Wczytywanie pozycji menu jest jednak powolne (trwa 6 sekund). Powtórzenie tego procesu nie powiodło się, ponieważ przekroczyło 5 sekund (domyślny limit czasu).

Aby rozwiązać ten problem, możesz użyć nowych ustawień Czas oczekiwania. Rozwiń krok, w którym klikamy element menu. Edytuj krok, klikając Dodaj limit czasu i ustaw go na 6000 milisekund (co odpowiada 6 sekundom).

Opcjonalnie możesz dostosować limit czasu w ustawieniach odtwarzania dla wszystkich kroków. Rozwiń Ustawienia powtarzania i zmień wartość Limit czasu.

ustawienia limitu czasu nagrywania przebiegu użytkownika;

Problem z Chromium: 1257499

Upewnij się, że strony mogą być przechowywane w pamięci podręcznej stanu strony internetowej za pomocą karty Pamięć podręczna stanu strony internetowej

Pamięć podręczna stanu strony internetowej (bfcache) to rodzaj optymalizacji przeglądarki, która umożliwia błyskawiczną nawigację w obu kierunkach.

Nowa karta Pamięć podręczna wstecz/wstecz pozwala testować strony, aby sprawdzić, czy są one zoptymalizowane pod kątem pamięci podręcznej wstecz i wstecz, oraz zidentyfikować problemy, które mogą uniemożliwiać ich kwalifikację.

Aby przetestować konkretną stronę, otwórz ją w Chrome, a potem w narzędziach deweloperskich kliknij Aplikacja > Pamięć podręczna wstecz i wstecz. Następnie kliknij przycisk Testuj pamięć podręczną stanu strony internetowej, a narzędzia dla programistów spróbują przejść do innej strony i z powrotem, aby sprawdzić, czy strona może zostać przywrócona z pamięci podręcznej stanu strony internetowej.

Jako deweloperzy internetowi musicie wiedzieć, jak optymalizować strony pod kątem pamięci podręcznej w przypadku wszystkich przeglądarek. Dzięki temu znacznie ułatwicie użytkownikom przeglądanie stron, zwłaszcza tym, którzy korzystają z wolniejszych sieci lub urządzeń.

Karta pamięci podręcznej stanu strony internetowej

Problem z Chromium: 1110752

Nowy filtr w panelu Właściwości

Jeśli chcesz skupić się na konkretnej właściwości w panelu Właściwości, możesz teraz wpisać jej nazwę lub wartość w nowym polu tekstowym Filtr.

Domyślnie właściwości, których wartość to null lub undefined, nie są wyświetlane. Aby wyświetlić wszystkie właściwości, zaznacz pole wyboru Pokaż wszystkie.

Dzięki tym ulepszeniom możesz szybciej docierać do interesujących Cię usług, co zwiększa Twoją produktywność.

Filtr panelu Właściwości

Problem w Chromium: 1269674

Emuluj funkcję mediów CSS „forced-colors”

Funkcja forced-colors w CSS służy do wykrywania, czy agent użytkownika ma włączony tryb wymuszonych kolorów (np. tryb wysokiego kontrastu w Windows), w którym stosuje wybraną przez użytkownika ograniczoną paletę kolorów na stronie.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw menu Emuluj funkcję mediów CSS forced-colors.

Funkcja mediów CSS forced-colors

Problem z Chromium: 1130859

Polecenie pokazywania linijek pod kursorem myszy

Możesz teraz otworzyć menu poleceń i uruchomić polecenie Pokaż linijki po najechaniu kursorem. Linijki na stronie ułatwiają pomiar szerokości i wysokości elementu.

Wcześniej można było włączyć linijki strony tylko za pomocą pola wyboru Ustawienia > Pokaż linijki.

Polecenie pokazywania linijek pod kursorem myszy

Problem z Chromium: 1270562

Obsługa row-reverse i column-reverse w edytorze Flexbox

Do edytora Flexbox dodaliśmy 2 nowe przyciski, aby umożliwić obsługę elementów row-reverse i column-reverse w sekcji flex-direction.

Edytor Flexbox

Problem z Chromium: 1263866

Nowe skróty klawiszowe do odtwarzania XHR i rozwijania wszystkich wyników wyszukiwania

Skróty klawiszowe do odtwarzania XHR w panelu Sieć

W panelu Sieć wybierz żądanie XHR i na klawiaturze naciśnij R, aby odtworzyć żądanie XHR. Wcześniej można było odtworzyć XHR tylko za pomocą menu kontekstowego (kliknięcie prawym przyciskiem myszy > Powtórz XHR).

powtórz XHR

Problem z Chromium: 1050021

Skrót klawiszowy do rozwijania wszystkich wyników wyszukiwania

Na karcie Szukaj dodaliśmy nowy skrót, który umożliwia rozwijanie i zwijanie wszystkich wyników wyszukiwania. Wcześniej można było rozwijać i zwijać wyniki wyszukiwania tylko przez kliknięcie jednego pliku naraz.

Otwórz kartę wyszukiwania, klikając Esc > menu z 3 kropkami > Szukaj. Wpisz ciąg wyszukiwania (np. funkcję) i naciśnij Enter, aby wyświetlić listę wyników wyszukiwania. Skoncentruj się na wynikach wyszukiwania i użyj tego skrótu, aby rozwinąć lub zwinąć pliki wyszukiwania:

  • Windows / Linux – Ctrl + Shift + { lub }
  • MacOS – Cmd + Options + { lub }

Aby zapoznać się ze skrótami klawiszowymi w Narzędziach deweloperskich w Chrome, przejdź do sekcji Skróty klawiszowe.

Problem z Chromium: 1255073

Lighthouse 9 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 9. Lighthouse będzie teraz wyświetlać wszystkie elementy o tym samym identyfikatorze.

Nieunikalny identyfikator elementu jest częstym problemem związanym z ułatwieniami dostępu. Na przykład identyfikator, do którego odwołuje się atrybut aria-labelledby, jest używany w kilku elementach.

Więcej informacji o aktualizacjach znajdziesz w artykule Nowości w Lighthouse 9.0.

​Weryfikacja Lighthouse dotycząca kryterium „Wszystkie elementy, które można zaznaczyć, muszą mieć unikalny identyfikator” (ID) z 2 elementami o tym samym identyfikatorze

Problem z Chromium: 772558

Ulepszony panel Źródła

Wiele ulepszeń stabilności w panelu Źródła, ponieważ został on zaktualizowany do wersji CodeMirror 6. Oto kilka istotnych ulepszeń:

  • znacznie szybsze otwieranie dużych plików (np. WASM, JavaScript);
  • koniec z losowym przewijaniem podczas przechodzenia przez kod;
  • Ulepszone sugestie autouzupełniania dla edytowalnych źródeł (np. fragmentów i przesłonek lokalnych)

Problem z Chromium: 1241848

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • prawidłowe wyświetlanie diagramu kaskady żądań sieciowych; Wcześniej styl był uszkodzony. (1275501)
  • Podświetlanie kodu było nieprawidłowe podczas wyszukiwania w dokumentach z bardzo długimi wierszami w panelu Źródła. Problem został już rozwiązany. (1275496)
  • Nie ma już duplikatów karty Payload w żądaniach sieciowych. (1273972)
  • Naprawiliśmy brakujące szczegóły zmian układu w sekcji Podsumowanie w panelu Skuteczność. (1259606)
  • Obsługa dowolnych znaków (np. ,, .) w zapytaniach wyszukiwania w sieci. (1267196)

[Eksperymentalnie] Punkty końcowe w panelu interfejsu Reporting API

Eksperymentalna karta interfejsu Reporting API została wprowadzona w Chrome 96, aby ułatwić Ci monitorowanie raportów generowanych na Twojej stronie i ich stanu.

Sekcja Punkty końcowe jest już dostępna. Udostępnia ona przegląd wszystkich punktów końcowych skonfigurowanych w nagłówku Reporting-Endpoints.

Dowiedz się, jak używać interfejsu Reporting API do monitorowania naruszeń bezpieczeństwa, wycofanych wywołań interfejsu API i innych kwestii.

Panel interfejsu API do raportowania

Problem z Chromium: 1200732

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.

Co nowego w Narzędziach deweloperskich

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