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

Podgląd funkcji: drzewo ułatwień dostępu na całej stronie

Nowe drzewo ułatwień dostępu na całej stronie ułatwia zapoznanie się z pełnym omówieniem drzewa ułatwień dostępu, które pomaga lepiej zrozumieć, jak Twoje treści internetowe są udostępniane technologii wspomagającej osoby z niepełnosprawnością.

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 załaduj ponownie 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 się z powrotem na widok drzewa DOM. Zostanie wybrany odpowiedni węzeł DOM. To świetny sposób na zrozumienie mapowania między węzłem DOM a jego węzłem drzewa ułatwień dostępu. Działa to również w przypadku drzewa DOM ⬌ Ułatwienia dostępu w widoku drzewa

Wcześniej drzewo ułatwień dostępu było dostępne w panelu Ułatwienia dostępu. Widok jest ograniczony. Umożliwia on tylko badanie pojedynczego węzła i jego elementów nadrzędnych.

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

Problem z Chromium: 887173

Bardziej precyzyjne zmiany na karcie Zmiany

Zmiany w kodzie na karcie Zmiany są automatycznie drukowane.

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

Problemy z Chromium: 1238818, 1268754 , 1086491

Ustawianie dłuższego czasu oczekiwania na rejestrowanie przepływu użytkownika

Teraz możesz dostosować ustawienia Limitu czasu w Dyktafonie w przypadku wszystkich kroków lub tylko konkretnego kroku. Jest to szczególnie przydatne w przypadku stron z powolnym żądaniem sieciowym i długim animacją.

Na przykład zarejestrowałem wzorzec przeglądania na tej stronie demonstracyjnej, aby wczytać i kliknąć pozycję menu. Wczytywanie elementów menu jest jednak powolne (zajmuje 6 sekund). Ponowne odtworzenie tego procesu użytkownika nie powiodło się, ponieważ trwa on ponad 5 sekund (domyślny limit czasu).

Możemy to naprawić za pomocą nowych ustawień Limitu czasu. Rozwiń krok, który klikamy w menu. Zmodyfikuj krok, korzystając z opcji Dodaj czas oczekiwania i ustaw go na 6000 milisekund (co równa 6 s).

Opcjonalnie możesz ustawić Limit czasu w Ustawieniach ponownego odtwarzania w przypadku wszystkich kroków. Rozwiń Ustawienia ponownego odtwarzania i zmień wartość Limit czasu.

Problem w Chromium: 1257499

Sprawdź, czy strony mogą być buforowane na karcie Pamięć podręczna stanu strony internetowej

Pamięć podręczna stanu strony internetowej (lub bfcache) to optymalizacja przeglądarki, która umożliwia natychmiastowe przejście do przodu i do tyłu.

Nowa karta Pamięć podręczna stanu strony internetowej pomoże Ci przetestować strony pod kątem optymalizacji pamięci podręcznej stanu strony internetowej oraz zidentyfikować problemy, które uniemożliwiają ich stosowanie.

Aby przetestować konkretną stronę, otwórz ją w Chrome i w Narzędziach deweloperskich kliknij Aplikacja > Pamięć podręczna stanu strony internetowej. Następnie kliknij przycisk Przetestuj pamięć podręczną stanu strony internetowej, a Narzędzia deweloperskie spróbują otworzyć inną stronę lub wrócić do poprzedniej strony, aby sprawdzić, czy stronę można przywrócić z pamięci podręcznej stanu strony internetowej.

Osoby tworzące strony internetowe powinny wiedzieć, jak zoptymalizować strony pod kątem pamięci podręcznej stanu strony internetowej we wszystkich przeglądarkach, ponieważ znacznie poprawia to komfort przeglądania stron – zwłaszcza tych korzystających z wolniejszych sieci lub urządzeń.

Problem z Chromium: 1110752

Nowy filtr panelu Właściwości

Jeśli w panelu Właściwości chcesz skoncentrować się na konkretnej właściwości, możesz 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 dotrzeć do właściwości, na których Ci zależy, a tym samym zwiększyć Twoją produktywność.

Problem w Chromium: 1269674

Emuluj funkcję multimediów CSS wymuszonych kolorów

Funkcja multimediów CSS forced-colors służy do wykrywania, czy klient użytkownika włączył wymuszony tryb kolorów (np. tryb wysokiego kontrastu systemu Windows), w którym wymusza na stronie wybraną przez użytkownika ograniczoną paletę kolorów.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie i przejdź do menu Emuluj funkcję multimediów CSS.

Problem w Chromium: 1130859

Pokazuj linijki w poleceniu najechanym kursorem

Teraz możesz otworzyć menu poleceń i uruchomić polecenie Pokaż linijki po najechaniu kursorem. Linijki strony ułatwiają mierzenie szerokości i wysokości elementu.

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

Problem z Chromium: 1270562

Obsługa tych elementów: 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.

Problem w 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ć

Wybierz żądanie XHR w panelu Sieć i naciśnij R na klawiaturze, aby ponownie odtworzyć XHR. Wcześniej można było ponownie odtwarzać XHR tylko w menu kontekstowym (kliknij prawym przyciskiem myszy > Odtwórz ponownie 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 klikanie plików naraz.

Otwórz kartę wyszukiwania, naciskając Esc > menu z 3 kropkami > Wyszukiwarka. Wpisz wyszukiwany ciąg (np. funkcję) i naciśnij Enter, aby zobaczyć listę wyników wyszukiwania. Zaznacz wyniki wyszukiwania i użyj następującego skrótu, aby rozwinąć lub zwinąć wyszukiwanie plików:

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

Przejdź do skrótów klawiszowych, aby zapoznać się ze skrótami klawiszowymi w Narzędziach deweloperskich w Chrome.

Problem z Chromium: 1255073

Latarnia morska 9 w panelu Lighthouse

W panelu Lighthouse działa teraz Lighthouse 9. Lighthouse wyświetli teraz wszystkie elementy o tym samym identyfikatorze.

Nieunikalny identyfikator elementu to typowy problem 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 zmianach znajdziesz w artykule Co nowego w Lighthouse 9.0.

​

Problem w Chromium: 772558

Ulepszony panel Źródła

Mnóstwo ulepszeń stabilności w panelu Źródła w związku z tym, że wprowadziliśmy w nim 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 źródeł, które można edytować (np. fragmenty kodu, lokalne zastąpienia)

Problem z Chromium: 1241848

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Prawidłowo wyświetla się diagram kaskadowy żądań sieciowych. Poprzednio 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 musisz już duplikować karty Ładunek w żądaniach sieciowych. (1273972)
• Usunięto brakujące szczegóły przesunięć układu w sekcji Podsumowanie w panelu Skuteczność. (1259606).
• Obsługuj dowolne znaki (np. ,, .) w zapytaniach w wyszukiwaniu w sieci. (1267196)

[Funkcja eksperymentalna] Punkty końcowe w panelu interfejsu API do raportowania

W Chrome 96 wprowadziliśmy eksperymentalny panel interfejsu API do raportowania, który ułatwia monitorowanie raportów wygenerowanych na stronie i ich stanu.

Sekcja Punkty końcowe jest teraz dostępna. Znajdziesz w nim omówienie 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.

Problem z Chromium: 1200732

Pobierz kanały 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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.