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

Jecelyn Yeen

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ń.

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 drukowane.

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

ustawienia czasu oczekiwania dotyczące rejestrowania przepływu użytkownika

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, a następnie w Narzędziach deweloperskich wybierz 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ń.

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 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ść.

Filtr panelu Właściwości

Problem w Chromium: 1269674

Emuluj funkcję multimediów CSS wymuszonych kolorów

Funkcja multimediów CSS force-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.

Funkcja multimediów wymuszonych kolorów w CSS

Problem w Chromium: 1130859

Pokazuj linijki w poleceniu najechanym kursorem

Możesz teraz 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 po kliknięciu pola wyboru Ustawienia > Pokaż linijki.

Pokazuj linijki w poleceniu najechanym kursorem

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.

Edytor Flexbox

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).

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 klikanie plików naraz.

Otwórz kartę wyszukiwania, naciskając Esc > menu 3-kropkowe > Wyszukiwanie. 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ąć/zwinąć pliki wyszukiwania:

  • 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.

Audyt Lighthouse dotyczący wszystkich elementów możliwych do zaznaczenia musi mieć unikalny „id” z 2 elementami, oba z tym samym identyfikatorem

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.

Panel interfejsu API do raportowania

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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