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

Jecelyn Yeen

Wskazówki dotyczące nieaktywnych właściwości CSS

Narzędzia deweloperskie identyfikują teraz style CSS, które są prawidłowe, ale nie mają widocznego wpływu. W panelu Style Narzędzia deweloperskie przyciemniają nieaktywne właściwości. Najedź kursorem na ikonę obok niego, aby dowiedzieć się, dlaczego reguła nie ma żadnego widocznego wpływu.

Wskazówki dotyczące nieaktywnych właściwości CSS.

Problem z Chromium: 1178508

Automatyczne wykrywanie selektorów XPath i tekstu w panelu Dyktafon

Panel Dyktafon obsługuje teraz selektory XPath i tekstowe. Rozpocznij nagrywanie ścieżki użytkownika, a rekorder automatycznie wybierze XPath i najkrótszy unikalny tekst elementu jako selektor, jeśli jest dostępny.

Selektory XPath i tekstu w panelu Dyktafon.

Problemy z Chromium: 1327206,1327209

Przechodzenie przez wyrażenia rozdzielone przecinkami

Podczas debugowania możesz teraz przechodzić po wyrażeniach rozdzielonych przecinkami. Dzięki temu łatwiej będzie debugować skompresowany kod.

Przejdź przez wyrażenia rozdzielone przecinkami.

Wcześniej narzędzia dla programistów obsługiwały tylko przechodzenie przez wyrażenia rozdzielane średnikami.

W przypadku kodu poniżej

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Kompilatory i kompilatory minifikujące mogą przekształcać je w wyrażenia rozdzielane przecinkami.

function bar(){return foo(),foo(),42}

Powoduje to zamieszanie podczas debugowania, ponieważ działanie kroków jest inne w przypadku skompresowanego i nieskompresowanego kodu. Jest to jeszcze bardziej mylące, gdy do debugowania skompresowanego kodu używa się map źródłowych w powiązaniu z oryginalnym kodem, ponieważ deweloper patrzy wtedy na średniki (które w ramach łańcucha narzędzi zostały zamienione w nawiasy), ale debuger się na nich nie zatrzymuje.

Problem z Chromium: 1370200

Ulepszona lista ignorowanych

Otwórz Ustawienia > Lista ignorowanych. DevTools ulepsza projekt, aby ułatwić konfigurowanie reguł ignorujących pojedynczy skrypt lub wzór skryptów.

Karta Lista ignorowanych.

Problem z Chromium: 1356517

Inne wyróżnione informacje

Oto kilka istotnych poprawek w tej wersji:

  • Autouzupełnianie nazwy właściwości CSS w panelu Style po naciśnięciu spacji. (1343316)
  • Usuń automatyczne przewijanie w menu nawigacji panelu Element. (1369734)

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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

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, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.