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

Sofia Emelianova
Sofia Emelianova

Znajdź pisankę

Z okazji tegorocznego prima aprilis zespół Narzędzi deweloperskich ukrył w nich jajko wielkanocne.

Aby go znaleźć, poszukaj kolorowego emotikona 💫.

Aktualizacje panelu Elementy

W tej wersji wprowadziliśmy kilka zmian w panelu Elementy.

Emuluj zaznaczoną stronę w sekcji Elementy > Style

Na karcie Elementy > Style znajduje się teraz opcja check_box Emuluj zaznaczoną stronę pod przyciskiem Przełącz stan elementów (:hov). Wcześniej była ona dostępna tylko w panelu Renderowanie.

Gdy przełączysz zaznaczenie ze strony na Narzędzia deweloperskie, niektóre elementy nakładane zostaną automatycznie ukryte, jeśli zostaną aktywowane przez zaznaczenie. Są to na przykład listy rozwijane, menu lub selektory dat. Opcja Emuluj zaznaczoną stronę umożliwia debugowanie takiego elementu tak, jakby był zaznaczony.

Elementy przed i po emulacji zaznaczonej strony na karcie Style.

Problem w Chromium: 1468393.

Selektor kolorów, zegar kątowy i edytor wygładzania w wartościach zastępczych var()

Aby uprościć edytowanie CSS, na karcie Elementy > Style możesz korzystać z selektora kolorów, zegara kątowego i edytora wygładzania w wartościach zastępczych var().

Narzędzia wyboru kolorów, zegara kątowego i edytora wygładzania przed renderowaniem i po nim w wartościach zastępczych var().

Problem z Chromium: 1520417.

Narzędzie długości CSS zostało wycofane

Narzędzie do tworzenia długości CSS zostało wycofane, ponieważ spowalnia przepływ pracy i nie wnosi zbyt wiele do niego wartości.

Nie można już przeciągać wartości, aby dostosować wartość, ani wybrać typu jednostki z menu. Zamiast tego kliknij dwukrotnie wartość i wpisz nową wartość.

Aby ponownie włączyć narzędzie długości, usuń ustawienia Ustawienia > Eksperymenty > zaznacz pole wyboru Wycofaj narzędzie do tworzenia stylów CSS <length> na karcie Style.

Jeśli nadal chcesz korzystać z tego narzędzia, zespół Narzędzi deweloperskich chciałby poznać Twoją opinię i dowiedzieć się, w jaki sposób narzędzie długości Podziel się swoją opinią w crbug/1522657.

Eksperyment z wycofywaniem jest wyłączony.

Wyskakujące okienko dla wybranego wyniku wyszukiwania w sekcji Skuteczność > Główna ścieżka

Aby ułatwić wyszukiwanie, wykres płomienny na ścieżce Skuteczność > Główny pokazuje teraz okienko wyskakujące nad odpowiednim zdarzeniem podczas przełączania wyników wyszukiwania.

Wyskakujące okienko nad wybranym wynikiem wyszukiwania przed i po.

Problem z Chromium: 1523279.

Aktualizacje panelu Sieć

Ta wersja wprowadza kilka aktualizacji w panelu Sieć.

Przycisk Wyczyść i filtr wyszukiwania na karcie Sieć > EventStream

Na karcie Sieć > EventStream znajdziesz:

  • Przycisk blokowania Wyczyść, który usuwa zarejestrowane zdarzenia w tabeli.
  • Filtr wyszukiwania, który rozumie wyrażenia regularne.

Informacje o dodaniu przycisku Wyczyść i filtrze wyszukiwania przed i po nim.

Zespół Narzędzi deweloperskich chce podziękować Charlesowi Vazacowi za udostępnienie tej funkcji.

Dodatkowo karta EventStream rejestruje teraz zdarzenia wysyłane przez serwery za pomocą pobierania/XHR, a nie tylko interfejs EventSource API. Wypróbuj tę stronę demonstracyjną.

Problem z Chromium: 1488863, 40659493.

Etykietka z przyczynami wykluczenia plików cookie innych firm w sekcji Sieć > Pliki cookie

Na karcie Sieć > Pliki cookie obok plików cookie, które powinny zostać zablokowane w związku z wycofaniem plików cookie innych firm, wyświetlają się teraz etykietki z powodami wykluczenia.

Wyświetlana etykietka z informacją o przyczynie wykluczenia dla pliku cookie innej firmy (przed i po).

Pliki cookie innych firm mogą być dozwolone z tych powodów:

Problem z Chromium: 41491846.

Włącz i wyłącz wszystkie punkty przerwania w sekcji Źródła

Sekcja Źródła > Punkty przerwania przywraca do menu opcje Włącz i Wyłącz wszystkie punkty przerwania. Wcześniej te opcje były pomijane w ramach zmiany wyglądu punktów przerwania.

Aby włączyć lub wyłączyć wszystkie punkty przerwania, kliknij je prawym przyciskiem myszy w sekcji Źródła > Punkty przerwania i wybierz odpowiednią opcję.

Przed i po przywróceniu opcji włączania i wyłączania.

Problem z Chromium: 1522037.

Wyświetl wczytane skrypty w Narzędziach deweloperskich dla Node.js

Narzędzia deweloperskie dla Node.js wyświetlają teraz wczytane skrypty w drzewie nawigacyjnym w sekcji Źródła > Skrypty.

Informacje o przed i po dodaniu karty Skrypty z drzewem wczytanych skryptów.

Problem z Chromium: 1518364.

Lighthouse 11.5.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 11.5.0. Zobacz pełną listę zmian.

Warto wspomnieć m.in. o nowej kontroli, która pozwala oszacować główne przyczyny przesunięć układu. Ten audyt zastępuje kontrolę układów-przesunięcie-elementów, w ramach której wyświetlono tylko elementy, na które mają wpływ przesunięcia układu.

Nowy audyt, który pozwala oszacować główne przyczyny przesunięć układu.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

W tej wersji ulepszyliśmy ułatwienia dostępu:

  • Czytniki ekranu informują teraz:
    • Tekst linku Więcej informacji obok typów selektorów w panelu Dyktafon.
    • Gdy żadne eksperymenty nie pasują do filtra w sekcji Ustawienia Ustawienia > Eksperymenty.
    • Potwierdzenie działania podczas usuwania, potwierdzania lub przywracania skrótu w sekcji Ustawienia Ustawienia > Skróty.
  • Tabela w Ustawieniach Ustawienia > Lokalizacje jest teraz prawidłowo renderowana jako tabela narzędzi ułatwień dostępu.

Problemy z Chromium: 1516957, 324282443, 324467508, 324930007.

Różne wyróżnienia

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Czcionki w Narzędziach deweloperskich są aktualizowane tak, aby pasowały do Chrome (1523538).
  • Wydajność: naprawiono wyświetlanie zrzutu ekranu po najechaniu kursorem na oś czasu (1519469).
  • Źródła: wysokość wiersza w Edytorze jest zwiększona, aby poprawić czytelność kodu (1523640).
  • Sieć > Odpowiedzi: naprawiliśmy różne problemy z wyświetlaniem związane z różnymi formatami i kodowaniem (1523128, 1509336, 1523128, 41481944, 1509336).

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

  • Prześlij nam sugestię lub opinię na crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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