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. Kliknij kartę Nowości, aby uczcić ważne dla nas osiągnięcia.

Jak zwykle możesz obejrzeć najnowszy film o nowościach 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ą, inspect element <div class=”box”> i zobacz reguły @supports w panelu Style. Kliknij deklarację reguły, by ją edytować.

Problemy z Chromium: 1222574, 1222573

Ulepszenia panelu Dyktafonu

Domyślnie obsługują typowe selektory

Gdy określasz unikalny selektor podczas nagrywania, panel Dyktafon automatycznie preferuje elementy o tych atrybutach:

• data-testid
• data-test
• data-qa
• Dane-cy
• data-test-id
• data-qa-id
• testowanie danych

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.

Element „email” ma zdefiniowany element data-testid, dlatego jest on automatycznie używany jako selektor zamiast atrybutu id lub class.

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 nagranie i wpisz data-automate jako atrybut selektora. Wpisz adres e-mail i sprawdź wartość selektora ([data-automate=email-address]).

Zmienianie nazwy nagrania

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

Wyświetlanie podglądu właściwości klasy/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.

Problem w Chromium: 1049947

Częściowo prezentowane klatki w panelu Wydajność

Nagranie wydajności wyświetla teraz nową kategorię klatek „Częściowo prezentowane klatki” na osi czasu Klatki.

Wcześniej na osi czasu Klatki wizualizowane są wszystkie klatki z opóźnionym działaniem wątku głównego jako „pominięte klatki”. Jednak w niektórych przypadkach niektóre ramki mogą nadal powodować aktualizacje wizualne (np. przewijanie) wywoływane przez wątek kompozytora.

Jest to dezorientujące, ponieważ zrzuty ekranu z „usuniętymi klatkami” nadal pokazują zmiany wizualne.

Nowa „Częściowo prezentowane klatki” ma na celu w bardziej intuicyjny sposób, że chociaż niektóre treści nie są prezentowane w odpowiednim momencie w klatce, problem nie jest aż tak poważny, aby całkowicie zablokować aktualizacje wizualne.

Problem z Chromium: 1261130

Różne wyróżnienia

Oto kilka ważnych poprawek w tej wersji:

• Zaktualizowano ciągi znaków klientów użytkownika iPhone'a dla emulowanych urządzeń. Wszystkie wersje iPhone'a po 5 mają ciąg klienta użytkownika z systemem operacyjnym iPhone OS 13_2_3. (1289553)
• Teraz możesz zapisać fragment bezpośrednio jako plik JavaScript. Wcześniej trzeba było ręcznie dołączać rozszerzenie pliku .js. (1137218).
• Podczas debugowania z użyciem mapy źródeł panel Źródła prawidłowo wyświetla nazwy zmiennych zakresu. Wcześniej w panelu Źródła wyświetlane były zminimalizowane nazwy zmiennych zakresu, mimo że została udostępniona mapa źródła. (1294682)
• Panel Źródła prawidłowo przywraca teraz pozycję przewijania podczas wczytywania strony. Wcześniej położenie nie było prawidłowo przywracane, co powodowało problemy podczas debugowania. (1294422)

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.