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ć deweloperom niezawodne narzędzia do tworzenia aplikacji w internecie. 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świetlaj i edytuj @supports w regułach w panelu Style

Reguły CSS @supports możesz teraz wyświetlać i edytować w panelu Style. Te zmiany ułatwiają eksperymentowanie z regułami w czasie rzeczywistym. Otwórz stronę demonstracyjną, sprawdź element <div class=”box”> i zobacz reguły @supports w panelu 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 możesz rozpocząć 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 nagrywania

Wynik wyboru selektora niestandardowego

Zmienianie nazwy nagrania

Teraz możesz zmienić nazwę nagrania w panelu Nagrywarka za pomocą przycisku 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 źródle.

Wyświetlanie podglądu właściwości klasy/funkcji po najechaniu kursorem

Problem z Chromium: 1049947

Częściowo widoczne klatki w panelu Wydajność

Na karcie Ramki w rejestrze wydajności pojawiła się nowa kategoria „Ramki częściowo wyświetlane”.

Wcześniej linia czasu Klatki przedstawiała jako „utracone klatki” wszystkie klatki z opóźnionym działaniem głównego wątku. Jednak w niektórych przypadkach niektóre ramki mogą nadal powodować aktualizacje wizualne (np. przewijanie) wywoływane przez wątek 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 prezentowane klatki w panelu Wydajność

Problem z Chromium: 1261130

Inne wyróżnione informacje

Oto kilka istotnych poprawek w tej wersji:

  • Zaktualizowano ciągi znaków klientów użytkownika iPhone'a dla emulowanych urządzeń. 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łowe 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)

Pobierz kanały podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

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

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.