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 Ułatwienia dostępu.

Wybierz węzeł i przełącz się z powrotem na widok 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 tylko przeglądanie pojedynczego węzła oraz jego przodków.

Nasz zespół nadal pracuje nad tą funkcją w wersji testowej. Czekamy na Twoją opinię na temat kolejnych ulepszeń.

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 estetycznym formacie.

Wcześniej trudno było prześledzić rzeczywiste zmiany zminifikowanego kodu źródłowego, ponieważ cały kod był widoczny w jednym wierszu.

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 powolnym żądaniem sieciowym i długim animacją.

Na przykład zarejestrowałem wzorzec przeglądania witryny na tej stronie demonstracyjnej, aby wczytać i kliknąć pozycję menu. Wczytywanie elementów 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 czasu oczekiwania dotyczące rejestrowania wzorca użytkownika

Problem z Chromium: 1257499

Sprawdź, czy strony mogą być buforowane na karcie 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/wprzód pozwala testować strony, aby sprawdzić, czy są one zoptymalizowane pod kątem pamięci podręcznej wstecz/wprzód, i zidentyfikować problemy, które mogą uniemożliwiać ich zakwalifikowanie.

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 o wartościach 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 się 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 linijki strony można było włączyć tylko po kliknięciu 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

W edytorze Flexbox dodano 2 nowe przyciski do obsługi row-reverse i column-reverse w elemencie flex-direction.

Edytor Flexbox

Problem z Chromium: 1263866

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

Skróty klawiszowe umożliwiające ponowne odtworzenie XHR w panelu Sieć

W panelu Sieć wybierz żądanie XHR i na klawiaturze naciśnij R, aby je powtórzyć. 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 rozwinięcia 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, na który wskazuje atrybut aria-labelledby, jest używany w kilku elementach.

Więcej informacji o zmianach znajdziesz w artykule Co nowego w Lighthouse 9.0.

​Audyt w Lighthouse pod kątem „Wszystkie elementy możliwe do zaznaczenia musi mieć unikalny identyfikator” z 2 elementami, oba z tym samym identyfikatorem.

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 ważnych 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

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

  • prawidłowe wyświetlanie diagramu kaskady żądań sieciowych; Wcześniej styl był uszkodzony. (1275501)
  • Zaznaczenie kodu nie działało podczas wyszukiwania dokumentów 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ługuj dowolne znaki (np. ,, .) w zapytaniach w wyszukiwaniu w sieci. (1267196)

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

Panel eksperymentalny interfejsu Reporting API został wprowadzony w wersji Chrome 96, aby ułatwić Ci monitorowanie raportów generowanych na stronie i ich stanu.

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

Dowiedz się, jak korzystać z interfejsu API do raportowania, aby monitorować naruszenia zabezpieczeń, wycofane wywołania interfejsu API i nie tylko.

Panel interfejsu API do raportowania

Problem z Chromium: 1200732

Pobieranie kanałów podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. 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, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.