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

Jecelyn Yeen

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

Narzędzia programistyczne rozpoznają 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 skompresowany kod będzie łatwiejszy do debugowania.

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 kompresory mogą przekształcać je w wyrażenia rozdzielone 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

Kliknij 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 najciekawsze momenty

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 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.