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

Jecelyn Yeen

Funkcja podglądu: nowy panel Statystyki skuteczności

W panelu Statystyki skuteczności znajdziesz przydatne statystyki dotyczące wydajności witryny oparte na konkretnym przypadku użycia.

Otwórz panel i rozpocznij nowe nagranie odpowiednio do swojego przypadku użycia. Przeanalizujmy na przykład wczytanie tej strony demonstracyjnej.

Nowy panel Statystyki skuteczności

Po zakończeniu nagrywania zobaczysz statystyki dotyczące skuteczności w panelu Statystyki. Kliknij poszczególne statystyki (np. Żądanie blokowania renderowania, przesunięcie układu), aby zrozumieć problem i ewentualne poprawki.

Aby dowiedzieć się więcej z samouczka krok po kroku, otwórz dokumentację panelu Statystyki skuteczności.

Jest to funkcja w wersji testowej, która pomaga programistom stron internetowych (zwłaszcza tym doświadczonym) wykrywać i rozwiązywać potencjalne problemy z wydajnością. Nasz zespół aktywnie pracuje nad tą funkcją. Czekamy na Twoją opinię na temat ulepszeń.

Problem z Chromium: 1270700

Nowe skróty do emulacji jasnych i ciemnych motywów

Dzięki nowym skrótom w panelu Style możesz teraz szybciej emulować motywy jasne i ciemne (funkcja multimediów CSS prefers-color-scheme).

Wcześniej emulacja motywów na karcie Renderowanie wymagała więcej czynności.

Nowe skróty do emulacji jasnych i ciemnych motywów

Problem z Chromium: 1314299

Ulepszone zabezpieczenia 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ę zawierającą mieszaną treść. Strona jest wczytywana przez bezpieczne połączenie HTTPS, ale arkusz stylów jest przez niezabezpieczone połączenie HTTP.

Przeglądarka domyślnie zablokowała żądanie arkusza stylów. Jednak po otwarciu strony za pomocą karty Podgląd w panelu Sieć arkusz stylów nie został wcześniej zablokowany (dlatego tło miało kolor czerwony). Zgodnie z oczekiwaniami funkcja jest teraz zablokowana (drugi zrzut ekranu).

Zwiększanie bezpieczeństwa na karcie Podgląd sieci

Problem z Chromium: 833147

Ulepszono ponowne ładowanie w punktach przerwania

Teraz debuger kończy wykonywanie skryptu podczas ponownego ładowania w punkcie przerwania.

Na przykład podczas konfigurowania i ponownego wczytywania skryptu w punkcie przerwania ReactDOM w tej wersji demonstracyjnej React zapętlał się wcześniej. Panel Źródła pękł z powodu niekończącej się pętli.

Ciągłe wykonywanie kodu JavaScriptu stanowi poważne kłopoty dla programistów i może spowodować uszkodzenie mechanizmu renderowania. Ta zmiana dostosowuje sposób debugowania w przypadku innych przeglądarek, takich jak Firefox.

Ulepszono ponowne ładowanie w punktach przerwania

Problemy z Chromium: 1014415, 1004038, 1112863, 1134899

Aktualizacje konsoli

Postępowanie w przypadku błędów wykonywania skryptów w konsoli

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

Postępowanie w przypadku błędów wykonywania skryptów w konsoli

Problem z Chromium: 1295750

Zatwierdź aktywne wyrażenie, naciskając Enter

Po zakończeniu wpisywania aktywnego wyrażenia 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 aktywnych wyrażeń, użyj klawiszy Shift + Enter.

Zatwierdź aktywne wyrażenie, naciskając Enter

Problem z Chromium: 1260744

Anuluj nagrywanie przepływu użytkowników na początku

Możesz anulować nagrywanie na początku rejestrowania Przepływ użytkowników. Wcześniej nie było takiej możliwości.

Anuluj nagrywanie przepływu użytkowników na początku

Problem z Chromium: 1257499

Wyświetl dziedziczone pseudoelementy podświetlenia w panelu Style

Wyświetl odziedziczone pseudoelementy zaznaczenia (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, w przypadku konfliktu różnych stylów element kaskadowy określa zwycięski styl. Ta nowa funkcja ułatwia zrozumienie dziedziczenia i priorytetu reguł.

Wyświetl dziedziczone pseudoelementy podświetlenia w panelu Style

Problem z Chromium: 1024156

Inne ważne informacje

Oto kilka ważnych poprawek wprowadzonych w tej wersji:

  • W panelu Właściwości wyświetlają się teraz właściwości akcesora z wartością domyślną. Została wcześniej ukryta przez pomyłkę. (1309087).
  • W panelu Style zastąpione reguły @support są teraz 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 powstanie wielu pustych wierszy podczas edytowania kodu CSS. (1309588)
  • Ogranicz opcję Rozwiń rekursywnie obiektu w konsoli do maksymalnie 100, aby nie powtarzał się w nieskończoność w przypadku obiektów okrągłych. (1272450)

[Funkcja eksperymentalna] Kopiowanie zmian CSS

Ten eksperyment pokazuje zmiany w kodzie CSS w panelu Style na zielono. Możesz najechać kursorem na zmienione reguły i kliknąć obok nich przycisk nowej kopii, aby je skopiować.

Poza tym możesz kopiować wszystkie zmiany CSS w deklaracjach. Aby to zrobić, kliknij dowolną regułę prawym przyciskiem myszy i wybierz Skopiuj wszystkie zmiany CSS.

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

Skopiuj zmiany CSS

Problem z Chromium: 1268754

[Funkcja eksperymentalna] 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ć kolor tylko w przeglądarce.

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

Wybieranie koloru poza przeglądarką

Problem z Chromium: 1245191

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59