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

Jecelyn Yeen

Funkcja w wersji wstępnej: nowy panel ze statystykami wydajności

W panelu Statystyki wydajności znajdziesz przydatne statystyki dotyczące wydajności witryny, które możesz wykorzystać w praktyce.

Otwórz panel i rozpocznij nowe nagrywanie na podstawie przypadku użycia. Załóżmy, że mierzymy wczytywanie tej strony demonstracyjnej.

Po zakończeniu nagrywania w panelu Statystyki znajdziesz informacje o skuteczności. Kliknij każdy element statystyk (np. żądanie blokujące renderowanie czy zmianę układu), aby dowiedzieć się więcej o problemie i potencjalnych rozwiązaniach.

Aby dowiedzieć się więcej, zapoznaj się z dokumentacją panelu Statystyki skuteczności i obejrzyj samouczek krok po kroku.

Jest to funkcja w wersji wstępnej, która pomaga deweloperom stron internetowych (zwłaszcza tym, którzy nie są ekspertami w zakresie wydajności) wykrywać i rozwiązywać potencjalne problemy z wydajnością. Nasz zespół pracuje nad tą funkcją i chcemy poznać Twoją opinię, abyśmy mogli wprowadzić dalsze ulepszenia.

Problem z Chromium: 1270700

Nowe skróty do emulacji motywów jasnego i ciemnego

Teraz możesz szybciej emulować motywy jasny i ciemny (funkcja mediów CSS prefers-color-scheme) dzięki nowym skrótom w panelu Style.

Wcześniej naśladowanie motywów na karcie Wyświetlanie wymagało wykonania większej liczby czynności.

Problem z Chromium: 1314299

Ulepszone zabezpieczenia na karcie Podgląd sieci

Narzędzie DevTools stosuje teraz zasady Content Security Policy (CSP) na karcie Podgląd w panelu Sieć.

Pierwszy zrzut ekranu pokazuje stronę zawierającą mieszane treści. Strona wczytuje się przez bezpieczne połączenie HTTPS, ale arkusz stylów wczytuje się przez niezabezpieczone połączenie HTTP.

Przeglądarka domyślnie zablokowała żądanie arkusza stylów. Jednak po otwarciu strony na karcie Podgląd w panelu Sieć skrypt nie był wcześniej blokowany (stąd czerwone tło). Jak można się było spodziewać, jest teraz zablokowany (drugi zrzut ekranu).

Problem z Chromium: 833147

Ulepszone przeładowywanie w punkcie przerwania

Debuger teraz kończy wykonywanie skryptu podczas ponownego wczytywania w miejscu punktu przerwania.

Na przykład w tym demo Reacta skrypt wpadł w nieskończoną pętlę podczas ustawiania i ponownie wczytywania punktu przerwania ReactDOM. Panel Źródła przestał działać z powodu nieskończonej pętli.

Kontynuowanie wykonywania kodu JavaScript powoduje wiele problemów dla deweloperów i może spowodować uszkodzenie renderowania. Ta zmiana dopasowuje działanie debugowania do innych przeglądarek, takich jak Firefox.

Problemy z Chromium: 1014415, 1004038, 1112863, 1134899

Aktualizacje konsoli

Obsługa błędów wykonania skryptu w konsoli

Błędy występujące podczas oceny skryptu w Konsoli generują teraz odpowiednie zdarzenia błędu, które wywołują procedurę obsługi window.onerror i są wysyłane jako zdarzenia "error" obiektu window.

Problem z Chromium: 1295750

Zatwierdzanie aktywnego wyrażenia za pomocą klawisza Enter

Po wpisaniu wyrażenia na żywo możesz kliknąć Enter, aby je zatwierdzić. Wcześniej naciśnięcie klawisza Enter powodowało dodawanie nowych wierszy. Jest to niezgodne z innymi częściami Narzędzi deweloperskich.

Aby dodać nową linię w edytorze wyrażenia na żywo, użyj zamiast tego funkcji Shift + Enter.

Problem z Chromium: 1260744

Anulowanie nagrywania sekwencji użytkownika na początku

Nagrywanie możesz anulować na początku nagrywania ścieżki użytkownika. Wcześniej nie było możliwości anulowania nagrywania.

Problem z Chromium: 1257499

Wyświetlanie odziedziczonych pseudoelementów wyróżnień w panelu Styl

W panelu Style wyświetl pseudoelementy wyróżnienia odziedziczone (np. ::selection, ::spelling-error, ::grammar-error i ::highlight). Wcześniej te reguły nie były wyświetlane.

Jak wspomniano w specyfikacji, gdy występuje konflikt między wieloma stylami, styl kaskadowy decyduje o wybranym stylu. Ta nowa funkcja ułatwia zrozumienie dziedziczenia i priorytetów reguł.

Problem z Chromium: 1024156

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

• W panelu Właściwości właściwości akcesora są teraz domyślnie wyświetlane z wartością. Zostało ono wcześniej przez pomyłkę ukryte. (1309087)
• W panelu Style zastąpione reguły @support są teraz wyświetlane jako przekreślone. Wcześniej reguły nie były przekreślone. (1298025)
• Naprawiliśmy logikę formatowania CSS w panelu Źródła, która powodowała pojawianie się wielu pustych wierszy podczas edytowania CSS. (1309588)
• Ogranicz opcję Rozwij rekurencyjnie obiektu w Konsoli do maksymalnie 100 wartości, aby nie prowadziło to do nieskończonego rozszerzania obiektów o kształcie koła. (1272450)

[Experimental] Copy CSS changes

W ramach tego eksperymentu panel Style będzie wyróżniał na zielono zmiany w CSS. Aby skopiować zmienione reguły, najedź na nie kursorem i kliknij obok nich przycisk kopiowania.

Możesz też skopiować wszystkie zmiany CSS w różnych deklaracjach, klikając prawym przyciskiem myszy dowolną regułę i wybierając Skopiuj wszystkie zmiany CSS.

Na karcie Zmiany dodaliśmy nowy przycisk Kopiuj, który ułatwia śledzenie i kopiowanie zmian w usługach porównywania cen.

Problem z Chromium: 1268754

[Eksperymentalnie] Wybieranie koloru poza przeglądarką

Włącz ten eksperyment, aby wybrać kolor poza przeglądarką za pomocą selektora kolorów. Wcześniej można było wybrać tylko kolor w przeglądarce.

W panelu Style kliknij dowolny podgląd koloru, aby otworzyć selektor kolorów. Użyj pipety, aby wybrać kolor z dowolnego miejsca.

Problem z Chromium: 1245191

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.

• Przesyłaj opinie 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.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.