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

Jecelyn Yeen

Nowe narzędzia do tworzenia treści w ramach usług porównywania cen

W Narzędziach deweloperskich dodano łatwiejszy, a jednocześnie elastyczny sposób aktualizowania długości w CSS.

W panelu Style odszukaj właściwość CSS z długością (np. height, padding).

Najedź kursorem na typ jednostki. Zobacz, że jest on podkreślony. Kliknij ją, aby wybrać typ jednostki z menu.

Najedź kursorem na wartość jednostki, a wskaźnik myszy zmieni się w kursor poziomy. Przeciągnij w poziomie, aby zwiększyć lub zmniejszyć wartość. Aby dostosować wartość o 10, podczas przeciągania przytrzymaj klawisz Shift.

Wartość jednostki możesz edytować jako tekst – wystarczy kliknąć wartość i rozpocząć edycję.

Problemy z Chromium: 1126178, 1172993

Ukrywanie problemów na karcie Problemy

Możesz teraz ukrywać na karcie Problemy konkretne problemy, aby skupić się tylko na tych, które są dla Ciebie ważne.

Na karcie Problemy najedź kursorem na problem, który chcesz ukryć. Kliknij Więcej opcji   Więcej   > Ukryj tego typu problemy.

Ukrywanie menu problemów

Wszystkie ukryte problemy zostaną dodane w panelu Ukryte problemy. Rozwiń panel. Możesz odkryć wszystkie ukryte problemy lub wybrany problem.

Panel ukrytych problemów

Problem z Chromium: 1175722

Ulepszony wyświetlacz właściwości

Narzędzia programistyczne ułatwiają wyświetlanie właściwości, ponieważ:

  • W Console, panelu Źródła i panelu Właściwości zawsze wyróżniaj czcionką i sortuj jako pierwsze własne usługi.
  • Spłaszczyć wyświetlanie właściwości w panelu Właściwości.

Na przykład poniższy fragment kodu tworzy obiekt URL link z 2 własnymi właściwościami: user i access, a także aktualizuje wartość dziedziczonej właściwości search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Spróbuj się zalogować link w Konsoli. Własne właściwości są teraz wyróżnione pogrubioną czcionką i sortowane jako pierwsze. Te zmiany ułatwiają rozpoznawanie usług niestandardowych, zwłaszcza w przypadku interfejsów Web API (np. URL) z wiele dziedziczonych usług.

Własne właściwości są wyróżnione i posortowane na pierwszym miejscu

Oprócz tych zmian właściwości w panelu Właściwości są teraz spłaszczone, aby ułatwić debugowanie właściwości DOM, zwłaszcza w przypadku komponentów internetowych.

Właściwości spłaszczenia

Problemy z Chromium: 1076820, 1119900

Lighthouse 8.4 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 8.4. Lighthouse wykryje teraz, czy element największego wyrenderowania treści (LCP) był obrazem wczytywanym z opóźnieniem, i zaleci usunięcie z niego atrybutu loading.

Więcej informacji o aktualizacjach znajdziesz w artykule Nowości w Lighthouse 8.4.

Lazy-loaded LCP w raporcie Lighthouse

Problem z Chromium: 772558

Sortowanie fragmentów w panelu Źródła

Fragmenty kodu w panelu Fragmenty kodu w panelu Źródła są teraz sortowane alfabetycznie. Wcześniej nie była ona sortowana.

Korzystaj z funkcji fragmentów, aby szybciej wykonywać polecenia. Obejrzyj ten film, aby poznać wskazówkę.

Sortowanie fragmentów w panelu Źródła

Problem z Chromium: 1243976

Nowe linki do przetłumaczonych informacji o wersji i zgłaszanie błędu w tłumaczeniu

Na karcie Co nowego możesz teraz kliknąć, aby przeczytać informacje o nowych wersjach Narzędzi deweloperskich w 6 innych językach: rosyjskim, chińskim, hiszpańskim, japońskim, portugalskim i koreańskim.

Od wersji Chrome 94 możesz ustawić preferowany język w Narzędziach deweloperskich. Jeśli znajdziesz jakieś problemy z tłumaczeniami, pomóż nam je poprawić, zgłaszając problem z tłumaczeniem, klikając Więcej opcji > Pomoc > Zgłoś błąd w tłumaczeniu.

Nowe linki do przetłumaczonych informacji o wersji i zgłaszanie błędu w tłumaczeniu

Problemy z Chromium: 1246245, 1245481

Ulepszone UI menu poleceń w Narzędziach deweloperskich

Czy trudno Ci było znaleźć plik w menu poleceń? Mamy dla Ciebie dobrą wiadomość: interfejs Menu poleceń został ulepszony.

Otwórz menu polecenia, aby wyszukać plik za pomocą skrótu klawiszowego Control + P w systemie Windows i Linux lub Command + P w systemie macOS.

Pracujemy nad ulepszeniami interfejsu Menu poleceń. Wkrótce podamy więcej informacji.

Menu poleceń

Problem z Chromium: 1201997

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.