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

Jecelyn Yeen

Chrome 100

Oto setna wersja Chrome. Narzędzia deweloperskie w Chrome nadal będą zapewniać niezawodne narzędzia dla programistów tworzących aplikacje internetowe. Aby uczcić te wydarzenia, kliknij kartę Nowości.

Jak zwykle możesz obejrzeć najnowszy film z serii „Co nowego w Narzędziach deweloperskich”, klikając obraz.

Wyświetlanie i edytowanie reguł @supports w panelu Style

Reguły at-rules CSS @supports możesz teraz wyświetlać i edytować w panelu Style. Te zmiany ułatwiają eksperymentowanie z regułami at w czasie rzeczywistym. Otwórz tę stronę demonstracyjną, sprawdź element <div class=”box”> i zobacz reguły @supports w pliku Style. Aby edytować deklarację reguły, kliknij ją.

Wyświetlanie i edytowanie reguł @supports at

Problemy z Chromium: 1222574, 1222573.

Ulepszenia panelu Dyktafonu

Domyślne obsługiwanie typowych selektorów

Podczas określania unikalnego selektora podczas nagrywania panel Dyktafon automatycznie preferuje elementy o tych atrybutach:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

Wymienione powyżej atrybuty to popularne selektory używane w automatyzacji testów.

Na przykład rozpocznij nowe nagrywanie na tej stronie demonstracyjnej. Wpisz adres e-mail i obserwuj wartość selektora.

Ponieważ element e-mail ma zdefiniowany atrybut data-testid, jest on automatycznie używany jako selektor zamiast atrybutów id lub class.

Domyślne obsługiwanie typowych selektorów

Dostosowywanie selektora nagrywania

Jeśli nie używasz selektorów wspólnych, możesz dostosować selektor nagrania.

Na przykład ta strona demonstracyjna używa atrybutu data-automate jako selektora. Rozpocznij nowe nagrywanie i jako atrybut selektora wpisz data-automate. Wpisz adres e-mail i obserwuj wartość selektora ([data-automate=email-address]).

Dostosowywanie selektora nagrania

Wynik wyboru selektora niestandardowego

Zmienianie nazwy nagrania

Teraz możesz zmienić nazwę nagrania w panelu Nagrywarka, klikając przycisk edycji (ikona ołówka) obok tytułu nagrania.

Zmienianie nazwy nagrania

Podgląd właściwości klasy lub funkcji po najechaniu kursorem

Podczas debugowania możesz teraz najechać kursorem na klasę lub funkcję w panelu Źródła, aby wyświetlić podgląd ich właściwości. Wcześniej wyświetlała tylko nazwę funkcji i link do jej lokalizacji w kodzie źródłowym.

Podgląd właściwości klasy lub funkcji po najechaniu kursorem

Problem z Chromium: 1049947

Częściowo widoczne klatki w panelu Wydajność

Na karcie Ramki w rejestracji wydajności na osi czasu pojawiła się nowa kategoria ramek „Częściowo wyświetlane ramki”.

Wcześniej linia czasu Klatki wizualizowała wszystkie klatki z opóźnionym działaniem głównego wątku jako „utracone klatki”. Czasami jednak niektóre klatki mogą nadal generować aktualizacje wizualne (np. przewijanie) na podstawie wątku kompozytora.

Powoduje to dezorientację użytkowników, ponieważ zrzuty ekranu tych „utraconych klatek” nadal odzwierciedlają zmiany wizualne.

Nowa kategoria „Klatki częściowo wyświetlane” ma na celu bardziej intuicyjne wskazanie, że niektóre treści nie są wyświetlane w odpowiednim czasie w klatce, ale problem nie jest na tyle poważny, aby całkowicie zablokować aktualizacje wizualne.

Częściowo widoczne klatki w panelu Wydajność

Problem z Chromium: 1261130

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

  • Zaktualizowaliśmy ciągi znaków klienta użytkownika iPhone’a na urządzeniach emulowanych. Wszystkie wersje iPhone’a od 5 w górę mają ciąg znaków user-agenta z iPhone OS 13_2_3. (1289553)
  • Teraz możesz zapisać fragment kodu bezpośrednio jako plik JavaScript. Wcześniej trzeba było ręcznie dodawać rozszerzenie pliku .js. (1137218)
  • Panel Źródła wyświetla teraz prawidłowo nazwy zmiennych zakresu podczas debugowania za pomocą mapy źródeł. Wcześniej panel Źródła wyświetlał zminifikowane nazwy zmiennych zakresu, mimo że podano mapę źródła. (1294682)
  • Panel Źródła prawidłowo przywraca pozycję przewijania po załadowaniu strony. Wcześniej pozycja nie była przywracana prawidłowo, co powodowało niedogodności podczas debugowania. (1294422)

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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 omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.