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

Jecelyn Yeen

Nowe narzędzia do tworzenia długich streszczeń CSS

Narzędzia deweloperskie zyskały łatwiejszy, ale elastyczny sposób aktualizowania długości w CSS.

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

Najedź kursorem na typ jednostki. Zauważysz, że jest on podkreślony. Kliknij go, aby wybrać typ jednostki z menu.

Najedź kursorem na wartość jednostki, a wskaźnik myszy zmieni się w poziomy kursor. 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 nadal edytować jako tekst – wystarczy kliknąć wartość i rozpocząć edytowanie.

Problemy z Chromium: 1126178, 1172993

Ukrywanie problemów na karcie Problemy

Możesz teraz ukrywać konkretne problemy na karcie 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     > Ukryj podobne problemy.

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

Problem w Chromium: 1175722

Ulepszone wyświetlanie właściwości

Narzędzia deweloperskie ulepszają wyświetlanie właściwości przez:

• Zawsze pogrubiaj i sortuj najpierw własne usługi w panelach Konsola, Źródła i Usługi.
• Spłaszcz 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łaściwościami własnymi: user i access, oraz aktualizuje wartość odziedziczonej 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 zalogować się link w konsoli. Własne właściwości są teraz pogrubione i sortowane w pierwszej kolejności. Te zmiany ułatwiają rozpoznawanie właściwości niestandardowych, zwłaszcza w przypadku interfejsów API (np. URL) z wieloma właściwościami dziedziczonymi.

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

Problemy z Chromium: 1076820, 1119900

Lighthouse 8.4 w panelu Lighthouse

Panel Lighthouse działa teraz w wersji 8.4. Lighthouse będzie teraz wykrywać, czy element największego wyrenderowania treści (LCP) był obrazem wczytywanym z opóźnieniem, i zalecać usunięcie z niego atrybutu loading.

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

Problem w Chromium: 772558

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

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

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

Problem z Chromium: 1243976

Nowe linki do przetłumaczonych informacji o wersji i zgłaszania błędów w tłumaczeniach

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

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

Problemy z Chromium: 1246245, 1245481

Ulepszony interfejs menu poleceń Narzędzi deweloperskich

Czy trudno było Ci wyszukać plik w menu poleceń? Mamy dobrą wiadomość: interfejs menu poleceń został ulepszony.

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

Ulepszanie interfejsu menu poleceń jest w toku. Wkrótce udostępnimy więcej informacji na ten temat.

Problem w Chromium: 1201997

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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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