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

Jecelyn Yeen

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

Nowe drzewo ułatwień dostępu na całej stronie ułatwia zapoznanie się z całostronicowym drzewem ułatwień dostępu i ułatwia zrozumienie, w jaki sposób Twoje treści internetowe są podatne na technologie wspomagające 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 ponownie załaduj Narzędzia deweloperskie. W panelu Elementy pojawi się nowy przycisk ułatwień dostępu.

Możesz go kliknąć, aby przełączyć się na widok drzewa ułatwień dostępu na całą stronę. 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 do widoku drzewa DOM. Teraz wybrany jest 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 ⬌ widok 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 – umożliwia zbadanie tylko jednego węzła i jego elementów nadrzędnych.

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

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

Problem z Chromium: 887173

Dokładniejsze zmiany na karcie Zmiany

Kod na karcie Zmiany zostanie automatycznie wydrukowany.

Wcześniej trudno było śledzić rzeczywiste zmiany zminimalizowanego kodu źródłowego, ponieważ cały kod wyświetla się w jednym wierszu.

Karta Zmiany

Problemy z Chromium: 1238818, 1268754 , 1086491

Ustaw dłuższy limit czasu na rejestrowanie przepływu użytkowników

Teraz w Dyktafonie możesz dostosować ustawienia Limitu czasu dla wszystkich lub tylko poszczególnych kroków. Jest to szczególnie przydatne w przypadku stron z wolnym żądaniem sieciowym i długą animacją.

Na przykład nagrałem przepływ użytkowników na tej stronie demonstracyjnej, aby ją wczytać i kliknąć w menu. Wczytywanie elementów menu jest jednak powolne (zajmuje 6 sekund). Ponowne odtworzenie tego procesu użytkownika nie powiodło się, ponieważ trwa dłużej niż 5 sekund (domyślny limit czasu).

Aby rozwiązać ten problem, możesz użyć nowych ustawień Limitu czasu. Rozwiń krok, który klikamy na pozycji menu. Edytuj ten krok, korzystając z opcji Dodaj limit czasu i ustawiając go na 6000 milisekund (co odpowiada 6 s).

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

ustawienia limitu czasu dla rejestrowania przepływów użytkowników

Problem z Chromium: 1257499

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

Pamięć podręczna stanu strony internetowej to optymalizacja przeglądarki, która umożliwia błyskawiczną nawigację wstecz i do przodu.

Nowa karta Pamięć podręczna stanu strony internetowej może pomóc Ci przetestować, czy strony są zoptymalizowane pod kątem buforowania strony internetowej, a także zidentyfikować ewentualne problemy, które mogą uniemożliwiać korzystanie z nich.

Aby przetestować konkretną stronę, otwórz ją w Chrome, a następnie w Narzędziach deweloperskich wybierz Aplikacja > Pamięć podręczna stanu strony internetowej. Następnie kliknij przycisk Testuj pamięć podręczną stanu strony internetowej, a Narzędzia deweloperskie spróbują przejść do innej strony i z powrotem, aby ustalić, czy stronę można przywrócić z pamięci podręcznej stanu strony internetowej.

Deweloperzy muszą wiedzieć, jak zoptymalizować strony pod kątem buforowania stron internetowych we wszystkich przeglądarkach, ponieważ znacznie poprawia to komfort przeglądania stron, zwłaszcza tych korzystających z wolniejszych sieci lub urządzeń.

Karta pamięci podręcznej stanu strony internetowej

Problem z Chromium: 1110752

Nowy filtr panelu Właściwości

Jeśli w panelu Właściwości chcesz skupić się na konkretnej 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ści null lub undefined nie są wyświetlane. Zaznacz pole wyboru Pokaż wszystkie, aby wyświetlić wszystkie właściwości.

Te ulepszenia pozwalają szybciej docierać do interesujących Cię miejsc i w ten sposób zwiększać Twoją produktywność.

Filtr panelu Właściwości

Problem z Chromium: 1269674

Emuluj funkcję multimediów wymuszania kolorów CSS

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 wymuszona jest na stronie ograniczona paleta kolorów wybrana przez użytkownika.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie w menu Emuluj funkcję multimediów CSS „Wymuszone kolory”.

Funkcja multimediów typu wymuszone kolory CSS

Problem z Chromium: 1130859

Pokaż linijki po najechaniu kursorem

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

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

Pokaż linijki po najechaniu kursorem

Problem z Chromium: 1270562

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

Do edytora Flexbox dodano 2 nowe przyciski umożliwiające obsługę row-reverse i column-reverse w języku 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 do ponownego odtwarzania XHR w panelu Network

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

odtwórz ponownie XHR

Problem z Chromium: 1050021

Skrót klawiszowy do rozwijania wszystkich wyników wyszukiwania

Na karcie Wyszukiwanie dodano 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 po kliknięciu pojedynczego pliku.

Aby otworzyć kartę wyszukiwania, naciśnij Esc > menu z 3 kropkami > Szukaj. Wpisz wyszukiwany ciąg znaków (np. funkcję) i naciśnij Enter, by wyświetlić listę wyników wyszukiwania. Przejdź do wyników wyszukiwania i użyj następującego skrótu, aby rozwinąć lub zwinąć pliki wyszukiwania:

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

Zapoznaj się ze skrótami klawiszowymi, aby dowiedzieć się więcej o skrótach klawiszowych w Narzędziach deweloperskich w Chrome.

Problem z Chromium: 1255073

Panel Lighthouse 9 w panelu Lighthouse

W panelu Lighthouse działa teraz Lighthouse 9. Lighthouse wyświetli teraz listę wszystkich elementów o tym samym identyfikatorze.

Częstym problemem jest nieunikalny identyfikator elementu. 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.

Audyt w Lighthouse dla „Wszystkich elementów, które można zaznaczyć” musi mieć unikalny „identyfikator” obejmujący 2 elementy, oba o tym samym identyfikatorze.

Problem z Chromium: 772558

Ulepszony panel Źródła

Wprowadzono liczne ulepszenia stabilności w panelu Źródła po uaktualnieniu do nowej wersji CodeMirror 6. Oto kilka ważnych ulepszeń:

  • Znacznie szybsze otwieranie dużych plików (np.WASM, JavaScript).
  • Koniec z losowym przewijaniem się przy przechodzeniu przez kod
  • Ulepszone sugestie autouzupełniania w przypadku źródeł z możliwością edytowania (np. fragmentów kodu, lokalnego zastąpienia)

Problem z Chromium: 1241848

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • Prawidłowe wyświetlanie diagramu kaskadowego żądań sieciowych. Wcześniej ten styl był uszkodzony. (1275501).
  • Podświetlenie kodu było uszkodzone podczas wyszukiwania w dokumentach z bardzo długimi wierszami w panelu Źródła. Problem został już rozwiązany. (1275496)
  • Koniec ze powielaniem karty Ładunek w żądaniach sieciowych. (1273972)
  • Naprawiliśmy brakujące szczegóły dotyczące przesunięcia układu w sekcji Podsumowanie w panelu Skuteczność. (1259606)
  • Obsługa dowolnych znaków (np. ,, .) w zapytaniach w ramach wyszukiwania w sieci. (1267196)

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

Eksperymentalny panel interfejsu API do raportowania został wprowadzony w Chrome 96, aby ułatwić monitorowanie raportów generowanych na stronie i ich stanu.

Sekcja Punkty końcowe jest teraz dostępna. Znajdziesz w nim 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 inne działania.

Panel interfejsu API do raportowania

Problem z Chromium: 1200732

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59