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

Sofia Emelianova
Sofia Emelianova
GitHub

Znajdź ukrytą niespodziankę

Z okazji tegorocznego Prima Aprilis zespół Narzędzi deweloperskich ukrył w nich niespodziankę.

Aby go znaleźć, poszukaj kolorowego emotikona 💫.

Zmiany w panelu Elementy

Ta wersja wprowadza kilka aktualizacji panelu Elementy.

Emulowanie zaznaczonej strony w sekcji Elementy > Style

Na karcie Elementy > Style pojawiła się opcja Emuluj stronę z fokusem pod przyciskiem Przełącz stan elementu (:hov). Wcześniej ta opcja była dostępna tylko w panelu Renderowanie.

Jeśli przeniesiesz fokus ze strony na Narzędzia deweloperskie, niektóre elementy nakładki, które są wywoływane przez fokus, zostaną automatycznie ukryte. Mogą to być na przykład listy rozwijane, menu lub selektory daty. Opcja Emuluj zaznaczoną stronę umożliwia debugowanie takiego elementu tak, jakby był zaznaczony.

Widok przed i po emulacji zaznaczonej strony na karcie Style.

Problem w Chromium: 1468393.

Wybieranie kolorów, zegar kątowy i edytor funkcji w var()

Aby uprościć edytowanie CSS, na karcie Elementy > Style możesz teraz używać selektora kolorów, zegara kątowego i edytora funkcji przejścia w var() wersjach rezerwowych.

Przed i po renderowaniu narzędzi Selektor kolorów, Zegar kątowy i Edytor krzywych w funkcjach var() z wartościami domyślnymi.

Problem w Chromium: 1520417.

Narzędzie do określania długości w CSS zostało wycofane

Narzędzie do tworzenia długości w CSS zostało wycofane z powodu opinii, że spowalnia przepływ pracy i nie dodaje zbyt wiele wartości.

Nie możesz już przeciągać, aby dostosować wartość, ani wybierać typu jednostki w menu. Zamiast tego kliknij dwukrotnie wartość i wpisz nową.

Aby ponownie włączyć narzędzie do określania długości, wyczyść Ustawienia > Eksperymenty > Wycofaj narzędzie do tworzenia wartości CSS <length> na karcie Style.

Jeśli nadal chcesz korzystać z tego narzędzia, zespół Narzędzi deweloperskich chętnie pozna Twoją opinię i dowie się, jak narzędzie do pomiaru długości pomaga Ci w pracy. Możesz przesłać opinię na stronie crbug/1522657.

Eksperyment dotyczący wycofania jest wyłączony.

Wyskakujące okienko wybranego wyniku wyszukiwania w sekcji Skuteczność > Główny ślad

Aby ułatwić wyszukiwanie, wykres płomieniowy na ścieżce Skuteczność > Główna wyświetla teraz wyskakujące okienko nad odpowiednim zdarzeniem, gdy przechodzisz przez wyniki wyszukiwania.

Przed i po: wyskakujące okienko nad wybranym wynikiem wyszukiwania.

Problem w Chromium: 1523279.

Aktualizacje panelu Sieć

W tej wersji wprowadziliśmy kilka zmian w panelu Sieć.

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

Karta Sieć > EventStream zawiera:

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

Przed i po dodaniu przycisku Wyczyść i filtra wyszukiwania.

Zespół Narzędzi deweloperskich dziękuje Charlesowi Vazacowi za wprowadzenie tej funkcji.

Dodatkowo karta EventStream rejestruje teraz również zdarzenia wysyłane przez serwery za pomocą funkcji fetch/XHR, a nie tylko interfejsu EventSource API. Wypróbuj ją na tej stronie demonstracyjnej.

Problem w Chromium: 1488863, 40659493.

Etykietki z przyczynami wyłączenia plików cookie innych firm w sekcji Sieć > Pliki cookie

Na karcie Sieć > Pliki cookie są teraz wyświetlane etykietki z przyczynami zwolnienia obok plików cookie, które w innych okolicznościach powinny zostać zablokowane w ramach wycofywania plików cookie innych firm.

Przed i po: etykietka z powodem zwolnienia z obowiązku uzyskania zgody na stosowanie plików cookie innych firm.

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

Problem w Chromium: 41491846.

Włączanie i wyłączanie wszystkich punktów przerwania w panelu Źródła

W sekcji Źródła > Punkty przerwania w menu znajdziesz ponownie opcje Włącz i Wyłącz wszystkie punkty przerwania. Wcześniej te opcje zostały pominięte podczas zmiany projektu punktów przerwania.

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

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

Problem w Chromium: 1522037.

Wyświetlanie załadowanych skryptów w Narzędziach deweloperskich w Node.js

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

Przed i po dodaniu karty Skrypty z drzewem załadowanych skryptów.

Problem w Chromium: 1518364.

Lighthouse 11.5.0

Panel Lighthouse działa teraz w wersji 11.5.0. Zobacz pełną listę zmian.

Wśród istotnych zmian jest nowy test, który szacuje główne przyczyny przesunięć układu. Ten audyt zastępuje audyt elementów powodujących przesunięcie układu, który zawierał tylko listę elementów, na które wpływają przesunięcia układu.

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

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

Ta wersja zawiera następujące ulepszenia ułatwień dostępu:

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

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

Różne wyróżnione informacje

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

  • Czcionki w Narzędziach deweloperskich zostały zaktualizowane, aby pasowały do czcionek w Chrome (1523538).
  • Skuteczność: naprawiono wyświetlanie zrzutu ekranu po najechaniu kursorem na oś czasu (1519469).
  • Źródła: wysokość wiersza w edytorze została zwiększona, aby poprawić czytelność kodu (1523640).
  • Sieć > Odpowiedzi: rozwiązano różne problemy z wyświetlaniem w przypadku różnych formatów i kodowań (1523128, 1509336, 1523128, 41481944, 1509336).

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.

Skontaktuj się 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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.