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

Sofia Emelianova
Sofia Emelianova
GitHub

Znajdź pisankę

Z okazji tegorocznego prima aprilis Dzień, w jaki zespół Narzędzi deweloperskich ukrył ukryty żart w jakimś miejscu w Narzędziach deweloperskich.

Aby go znaleźć, poszukaj kolorowego emotikona 💫.

Aktualizacje panelu Elementy

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

Emuluj zaznaczoną stronę w Elementach > Style

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

Gdy przełączysz zaznaczenie ze strony na Narzędzia deweloperskie, niektóre nakładane elementy zostaną automatycznie ukryte, jeśli zostaną aktywowane przez zaznaczenie. 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ć edycję CSS, Elementy > Na karcie Style możesz teraz 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, wyczyść ustawienia Ustawienia > Eksperymenty > check_box Wycofaj CSS <length> narzędziu do tworzenia 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 na stronie Skuteczność > Główny utwór

Aby ułatwić wyszukiwanie, wykres płomieniowy w sekcji Skuteczność > Ścieżka główna wyświetla teraz nad odpowiednim zdarzeniem wyskakujące okienko, gdy przewijasz wyniki 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 w sekcji Sieć > Karta EventStream

Sieć > Na karcie EventStream znajdziesz:

  • Przycisk blokowania Wyczyść, który usuwa zapisane 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ć > Ciastka

Sieć > Obok plików cookie, które powinny zostać zablokowane w związku z wycofaniem plików cookie innych firm, na karcie Pliki cookie 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

Źródła > Sekcja 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 pokazują 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 Ustawieniach Ustawienia > Eksperymenty.
    • potwierdzenie działania podczas usuwania, potwierdzania lub przywracania skrótu w ustawieniach Ustawienia >; Skróty.
  • Tabela w Ustawieniach Ustawienia > Lokalizacje są teraz prawidłowo renderowane jako tabela dla 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: poprawiliśmy różne problemy z wyświetlaniem związanych 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 w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.