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

Jecelyn Yeen

Funkcja podglądu: 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 nagranie w zależności od przypadku użycia. Zmierzmy na przykład szybkość wczytywania tej strony demonstracyjnej.

Po zakończeniu nagrywania w panelu Statystyki zobaczysz statystyki skuteczności. Kliknij poszczególne elementy statystyk (np. żądanie blokujące renderowanie, przesunięcie układu), aby dowiedzieć się więcej o problemie i możliwych rozwiązaniach.

Więcej informacji znajdziesz w dokumentacji panelu Statystyki wydajności, gdzie znajdziesz samouczek krok po kroku.

Jest to funkcja w wersji testowej, która pomaga deweloperom stron internetowych (zwłaszcza tym, którzy nie są ekspertami w dziedzinie wydajności) identyfikować i rozwiązywać potencjalne problemy z wydajnością. Nasz zespół pracuje nad tą funkcją. Czekamy na Wasze opinie, które pomogą nam ją ulepszyć.

Problem w Chromium: 1270700

Nowe skróty do emulowania 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 emulowanie motywów na karcie Renderowanie wymagało więcej czynności.

Problem w Chromium: 1314299

Większe bezpieczeństwo na karcie Podgląd sieci

Narzędzia deweloperskie stosują teraz standard Content Security Policy (CSP) na karcie Podgląd w panelu Sieć.

Na przykład pierwszy zrzut ekranu przedstawia stronę, która zawiera treści mieszane. 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. Gdy jednak otworzysz stronę na karcie Podgląd w panelu Sieć, arkusz stylów nie był wcześniej blokowany (dlatego tło zmieniło się na czerwone). Został on zablokowany zgodnie z oczekiwaniami (drugi zrzut ekranu).

Problem w Chromium: 833147

Ulepszone ponowne wczytywanie w punkcie przerwania

Debuger przerywa teraz wykonywanie skryptu podczas ponownego wczytywania w punkcie przerwania.

Na przykład skrypt wcześniej wchodził w nieskończoną pętlę podczas ustawiania i ponownego wczytywania w punkcie przerwania ReactDOM w tej wersji demonstracyjnej Reacta. Panel Źródła przestał działać z powodu nieskończonej pętli.

Dalsze wykonywanie JavaScriptu sprawia deweloperom wiele problemów i może spowodować, że proces renderowania będzie nieprawidłowy. Ta zmiana dostosowuje działanie debugowania do innych przeglądarek, takich jak Firefox.

Problemy z Chromium: 1014415, 1004038, 1112863, 1134899

Aktualizacje konsoli

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

Błędy podczas oceny skryptu w konsoli generują teraz odpowiednie zdarzenia błędów, które wywołują moduł obsługi window.onerror i są wysyłane jako zdarzenia "error" w obiekcie okna.

Problem w 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 dodanie nowych wierszy. Jest to niezgodne z innymi częściami Narzędzi deweloperskich.

Aby dodać nowy wiersz w edytorze wyrażenia na żywo, użyj kombinacji klawiszy Shift + Enter.

Problem w Chromium: 1260744

Anulowanie nagrywania ścieżki użytkownika na początku

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

Problem w Chromium: 1257499

Wyświetlanie odziedziczonych pseudoelementów wyróżnienia w okienku Style

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

Jak wspomnieliśmy w specyfikacji, gdy wiele stylów jest ze sobą sprzecznych, kaskada określa, który styl ma zostać zastosowany. Ta nowa funkcja pomaga zrozumieć dziedziczenie i priorytet reguł.

Problem w Chromium: 1024156

Różne wyróżnione informacje

Oto niektóre ważne poprawki w tej wersji:

• W panelu Właściwości wyświetlają się teraz właściwości dostępu z wartością domyślną. Wcześniej został ukryty przez pomyłkę. (1309087)
• Panel Style prawidłowo wyświetla teraz zastąpione reguły @support 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ę Rozwiń rekurencyjnie obiektu w Konsoli do maksymalnie 100, aby nie działała w nieskończoność w przypadku obiektów cyklicznych. (1272450)

[Eksperymentalna] Kopiowanie zmian CSS

W tym eksperymencie panel Style wyróżnia na zielono zmiany w CSS. Możesz najechać kursorem na zmienione reguły i kliknąć obok nich nowy przycisk kopiowania, aby je skopiować.

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

Na karcie Zmiany dodaliśmy też nowy przycisk Kopiuj, który ułatwia śledzenie i kopiowanie zmian w arkuszu CSS.

Problem w Chromium: 1268754

[Eksperymentalne] Wybieranie koloru poza przeglądarką

Włącz ten eksperyment, aby za pomocą selektora kolorów wybrać kolor spoza przeglądarki. Wcześniej można było wybrać kolor tylko 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 w Chromium: 1245191

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.