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

Jecelyn Yeen

Chrome 100

Oto setna wersja Chrome! Narzędzia deweloperskie w Chrome będą nadal zapewniać deweloperom niezawodne narzędzia do tworzenia stron internetowych. Aby uczcić te osiągnięcia, poświęć chwilę na klikanie elementów na karcie Nowości.

Jak zwykle możesz obejrzeć najnowszy film o nowościach w Narzędziach deweloperskich, klikając obraz.

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

W panelu Style możesz teraz wyświetlać i edytować reguły CSS @supports. Dzięki tym zmianom łatwiej będzie Ci eksperymentować z regułami w czasie rzeczywistym. Otwórz tę stronę demonstracyjną, zbadaj element <div class=”box”> i wyświetl reguły @supports w panelu Style. Aby edytować deklarację reguły, kliknij ją.

Wyświetlanie i edytowanie reguł @supports

Problemy z Chromium: 1222574, 1222573

Ulepszenia panelu Dyktafonu

Domyślna obsługa typowych selektorów

Podczas określania unikalnego selektora w trakcie nagrywania panel Dyktafon automatycznie preferuje teraz elementy z tymi atrybutami:

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

Powyższe atrybuty to typowe selektory używane w automatyzacji testów.

Na przykład rozpocznij nowe nagranie na tej stronie demonstracyjnej. Wpisz adres e-mail i sprawdź 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ślna obsługa typowych selektorów

Dostosowywanie selektora nagrania

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

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

Dostosowywanie selektora nagrania

Wynik wyboru selektora niestandardowego

Zmienianie nazwy nagrania

Możesz teraz zmienić nazwę nagrania w panelu Dyktafon, klikając przycisk edycji (ikonę ołówka) obok tytułu nagrania.

Zmienianie nazwy nagrania

Wyświetlanie podglądu 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 jej właściwości. Wcześniej wyświetlała tylko nazwę funkcji i link do jej lokalizacji w kodzie źródłowym.

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

Problem w Chromium: 1049947

Częściowo widoczne ramki w panelu Wydajność

W nagraniu wydajności na osi czasu Klatki pojawi się nowa kategoria klatek „Częściowo wyświetlone klatki”.

Wcześniej oś czasu Klatki wizualizowała wszystkie klatki z opóźnioną pracą wątku głównego jako „pominięte klatki”. W niektórych przypadkach niektóre klatki mogą nadal powodować aktualizacje wizualne (np. przewijanie) wywoływane przez wątek kompozytora.

Może to wprowadzać użytkowników w błąd, ponieważ zrzuty ekranu z informacją „Utracone klatki” nadal odzwierciedlają zmiany wizualne.

Nowy stan „Częściowo wyświetlone klatki” ma bardziej intuicyjnie wskazywać, że chociaż niektóre treści nie są wyświetlane w klatce na czas, problem nie jest na tyle poważny, aby całkowicie blokować aktualizacje wizualne.

Częściowo widoczne ramki w panelu Wydajność

Problem w Chromium: 1261130

Różne wyróżnione informacje

Oto niektóre z najważniejszych poprawek w tej wersji:

  • Zaktualizowaliśmy ciągi znaków klienta użytkownika iPhone’a dla emulowanych urządzeń. Wszystkie wersje iPhone’a po wersji 5 mają ciąg User-Agent z systemem iPhone OS 13_2_3. (1289553)
  • Możesz teraz zapisać fragment kodu bezpośrednio jako plik JavaScript. Wcześniej trzeba było ręcznie dodać rozszerzenie pliku .js. (1137218)
  • Panel Źródła prawidłowo wyświetla teraz nazwy zmiennych zakresu podczas debugowania za pomocą mapy źródła. Wcześniej w panelu Źródła wyświetlane były zminifikowane nazwy zmiennych zakresu, mimo że mapa źródła była dostępna. (1294682)
  • Panel Źródła przywraca teraz prawidłową pozycję przewijania podczas wczytywania strony. Wcześniej pozycja nie była przywracana prawidłowo, co utrudniało debugowanie. (1294422)

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.