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

Jecelyn Yeen

Funkcja w wersji testowej: drzewo ułatwień dostępu na całej stronie

Nowy pełnostronicowy drzewo dostępności ułatwia przeglądanie pełnostronicowego drzewa dostępności i pomaga lepiej zrozumieć, jak treści internetowe są udostępniane technologiom wspomagającym.

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 Narzędzia deweloperskie. W panelu Elementy pojawi się nowy przycisk ułatwień dostępu.

Możesz ją kliknąć, 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 z powrotem na widok drzewa DOM. Odpowiedni węzeł DOM zostanie zaznaczony. To świetny sposób na zrozumienie mapowania między węzłem DOM a węzłem drzewa ułatwień dostępu. Działa to też w przypadku widoku drzewa DOM ↔ 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 eksplorowanie pojedynczego węzła i jego przodków.

Nasz zespół nadal pracuje nad tą funkcją w wersji przedpremierowej. Chętnie poznamy Twoją opinię, abyśmy mogli wprowadzić dalsze ulepszenia.

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

Problem z Chromium: 887173

Bardziej precyzyjne zmiany na karcie Zmiany

Zmiany w kodzie na karcie Zmiany są automatycznie formatowane.

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

Karta Zmiany

Problemy z Chromium: 1238818, 1268754 , 1086491

Ustawianie dłuższego limitu czasu nagrywania wzorca przeglądania

Możesz teraz dostosować ustawienia limitu czasu w rejestratorze dla wszystkich lub konkretnego kroku. Jest to przydatne zwłaszcza w przypadku stron z wolnymi żądaniami sieciowymi i długimi animacjami.

Na przykład na tej stronie demonstracyjnej zarejestrowałem wzorzec przeglądania, aby załadować i kliknąć element menu. Jednak wczytywanie pozycji menu jest powolne (trwa 6 sekund). Powtórzenie tego przepływu użytkownika nie powiodło się, ponieważ trwało dłużej niż 5 sekund (domyślny limit czasu).

Możemy to naprawić za pomocą nowych ustawień Limit czasu. Rozwiń krok, w którym klikamy element menu. Edytuj krok, klikając Dodaj limit czasu i ustawiając go na 6000 milisekund (co odpowiada 6 sekundom).

Opcjonalnie możesz dostosować limit czasu we wszystkich krokach w ustawieniach powtórki. Rozwiń Ustawienia ponownego odtwarzania i edytuj wartość Czas oczekiwania.

ustawienia limitu czasu nagrywania wzorca przeglądania,

Problem z Chromium: 1257499

Sprawdzanie, czy strony mogą być przechowywane w pamięci podręcznej 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/dalej pomoże Ci przetestować strony, aby upewnić się, że są zoptymalizowane pod kątem pamięci podręcznej wstecz/dalej, i wykryć problemy, które mogą uniemożliwiać ich kwalifikowanie się do tej funkcji.

Aby przetestować konkretną stronę, otwórz ją w Chrome, a następnie w Narzędziach deweloperskich kliknij Aplikacja > Pamięć podręczna wstecz/dalej. Następnie kliknij przycisk Test back/forward cache (Testuj pamięć podręczną stanu strony internetowej). Narzędzia deweloperskie spróbują przejść do innej strony i wrócić, aby sprawdzić, czy można przywrócić stronę z pamięci podręcznej stanu strony internetowej.

Jako deweloperzy stron internetowych musimy wiedzieć, jak optymalizować strony pod kątem pamięci podręcznej typu „wstecz/do przodu” we wszystkich przeglądarkach, ponieważ znacznie ułatwi to użytkownikom przeglądanie stron – zwłaszcza w przypadku wolniejszych sieci i 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ć nazwę lub wartość tej właściwości w nowym polu tekstowym Filtr.

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

Dzięki tym ulepszeniom możesz szybciej przechodzić do interesujących Cię usług, a tym samym zwiększać swoją produktywność.

Filtr w panelu Właściwości

Problem w Chromium: 1269674

Emulowanie funkcji mediów CSS forced-colors

Funkcja CSS forced-colors służy do wykrywania, czy agent użytkownika ma włączony tryb wymuszonych kolorów (np. tryb wysokiego kontrastu w systemie Windows), w którym na stronie jest wymuszana wybrana przez użytkownika ograniczona paleta kolorów.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a potem otwórz menu Emuluj funkcję multimedialną CSS forced-colors.

Funkcja multimedialna CSS forced-colors

Problem w Chromium: 1130859

Polecenie Pokazuj linijki 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 za pomocą pola wyboru Ustawienia > Pokaż linijki.

Polecenie Pokazuj linijki pod kursorem myszy

Problem w Chromium: 1270562

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

W edytorze Flexbox dodaliśmy 2 nowe przyciski, które obsługują row-reverse i column-reverse w flex-direction.

Edytor Flexbox

Problem w Chromium: 1263866

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

Skróty klawiszowe do ponownego odtwarzania XHR w panelu Sieć

Wybierz żądanie XHR w panelu Sieć i naciśnij R na klawiaturze, aby ponownie odtworzyć XHR. Wcześniej można było powtórzyć XHR tylko za pomocą menu kontekstowego (kliknij prawym przyciskiem myszy > Powtórz XHR).

powtórz XHR,

Problem w 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, klikając po jednym pliku naraz.

Otwórz kartę wyszukiwania, klikając Esc > menu 3 kropki > Wyszukaj. Wpisz ciąg wyszukiwania (np. funkcję) i naciśnij Enter, aby wyświetlić listę wyników wyszukiwania. Skup 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 poznać skróty klawiszowe w Narzędziach deweloperskich w Chrome, zapoznaj się z tym artykułem.

Problem w Chromium: 1255073

Lighthouse 9 w panelu Lighthouse

Panel Lighthouse działa teraz w wersji 9. Lighthouse będzie teraz wyświetlać listę wszystkich elementów o tym samym identyfikatorze.

Nieunikalny identyfikator elementu to częsty problem związany z ułatwieniami dostępu. Na przykład identyfikator, do którego odwołuje się atrybut aria-labelledby, jest używany w wielu elementach.

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

​Audyt Lighthouse „Wszystkie elementy, które można zaznaczyć, muszą mieć unikalny atrybut `id`”, pokazujący 2 elementy, z których każdy ma ten sam atrybut `id`

Problem w Chromium: 772558

Ulepszony panel Źródła

Wprowadziliśmy wiele ulepszeń stabilności w panelu Źródła, ponieważ zaktualizowaliśmy go do CodeMirror 6. Oto kilka najważniejszych ulepszeń:

  • Znacznie szybsze otwieranie dużych plików (np. WASM, JavaScript)
  • Koniec z losowym przewijaniem podczas przechodzenia przez kod
  • Ulepszone sugestie autouzupełniania w przypadku źródeł, które można edytować (np. fragmenty kodu, lokalne zastąpienia)

Problem w Chromium: 1241848

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

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

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

W Chrome 96 wprowadziliśmy eksperymentalny panel Reporting API, który pomaga monitorować raporty generowane na stronie i ich stan.

Sekcja Punkty końcowe jest teraz dostępna. Zawiera 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 zdarzeń.

Panel Reporting API

Problem w Chromium: 1200732

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.

Co nowego w Narzędziach deweloperskich

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