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

Sofia Emelianova
Sofia Emelianova
GitHub

Znajdź ukryty żart.

Z okazji tegorocznego Prima Aprilis zespół DevTools ukrył w narzędziach DevTools jajko wielkanocne.

Aby go znaleźć, poszukaj kolorowego emotikona 💫.

Aktualizacje panelu Elementy

Ta wersja zawiera kilka uaktualnień panelu Elementy.

Emuluj zaznaczoną stronę w sekcji Elementy > Style

Na karcie Elementy > Style znajduje się teraz opcja Naśladowanie strony z aktywnym polem zaznaczenia, która jest dostępna pod przyciskiem Przełącz stan elementów (:hov). Wcześniej tę opcję można było znaleźć tylko w panelu Renderowanie.

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

Emulacja zaznaczonej strony na karcie Style – przed i po.

Problem z Chromium: 1468393.

Selektor kolorów, zegar kątowy i edytor wykładni w var()

Aby uprościć edytowanie kodu CSS, na karcie Elementy > Style możesz teraz używać selektora kolorów, kątowego zegara i edytora wykładni funkcji w var() zastępstwie.

Przed i po renderowaniu narzędzi selektora kolorów, zegara kątowego i edytora wykładni w użyciu funkcji var().

Problem z Chromium: 1520417.

Wycofanie narzędzia do określania długości w kodzie CSS

Narzędzia do tworzenia długości w CSS zostało wycofane, ponieważ użytkownicy zgłaszali, że spowalnia ono proces pracy i nie dodaje wartości.

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

Aby ponownie włączyć narzędzie do tworzenia treści w usłudze YouTube Music, na karcie Style wyczyść Ustawienia > Eksperymenty > Narzędzia do tworzenia treści w usłudze YouTube Music (CSS <length>).

Jeśli nadal chcesz używać tego narzędzia, zespół Narzędzi deweloperskich chce poznać Twoją opinię i sposób, w jaki narzędzie do pomiaru długości pomaga Ci w Twoim przepływie pracy. Prześlij opinię na stronie crbug/1522657.

Eksperyment dotyczący wycofania został wyłączony.

Pop-up dla wybranego wyniku wyszukiwania w sekcji Skuteczność > Główny widok

Aby ułatwić wyszukiwanie, w ramach diagramu słupkowego w sekcji Skuteczność > Główny pojawi się teraz wyskakujące okienko nad odpowiednim zdarzeniem, gdy będziesz przewijać wyniki wyszukiwania.

Przed i po wyświetleniu wyskakującego okienka nad wybranym wynikiem wyszukiwania.

Problem z Chromium: 1523279.

Aktualizacje panelu sieci

Ta wersja zawiera kilka zmian w panelu Sieć.

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

Na karcie Sieć > Strumień danych pojawią się:

  • Wyczyść przycisk, który czyści zarejestrowane zdarzenia w tabeli.
  • Filtr wyszukiwania, który rozumie wyrażenia regularne.

Stan przed i po dodaniu przycisku Wyczyść oraz filtra wyszukiwania.

Zespół Narzędzi deweloperskich dziękuje Charlesowi Vazacowi za wdrożenie tej funkcji.

Dodatkowo karta EventStream rejestruje teraz zdarzenia wysyłane przez serwery za pomocą metody fetch/XHR, a nie tylko EventSource API. Wypróbuj to na stronie demonstracyjnej.

Problem z Chromium: 1488863, 40659493.

Informacje z powódami wyłączenia z obowiązku plików cookie innych firm w sekcji Sieć > Pliki cookie

Na karcie Sieć > Pliki cookie wyświetlają się teraz etykiety z przyczynami wyłączenia obok plików cookie, które powinny zostać zablokowane przez wycofanie plików cookie innych firm.

Przykłady pokazujące, jak wyglądają etykietki z powódami wyłączenia z obowiązku plików cookie innych firm.

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

Problem z Chromium: 41491846.

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

W sekcji Źródła > Punkty graniczne w menu kliknij opcję Włącz lub Wyłącz wszystkie punkty graniczne. Wcześniej te opcje nie były uwzględniane w ramach przeprojektowania punktów granicznych.

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

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

Problem z Chromium: 1522037.

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

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

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

Problem z Chromium: 1518364.

Lighthouse 11.5.0

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

Jedną z najważniejszych zmian jest nowy audyt, który pozwala oszacować główne przyczyny przesunięć układu. Ten audyt zastępuje audyt elementów zmienionych przez przesunięcie układu, który zawierał tylko elementy, na które wpłynęło przesunięcie układu.

nowy audyt, który określa główne przyczyny zmian układu;

Podstawy korzystania 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 ułatwienia dostępu:

  • Czytniki ekranu będą teraz ogłaszać:
    • Tekst linku Więcej informacji obok typów selektorów w panelu Rejestrator.
    • gdy w  Ustawienia > Eksperymenty nie ma eksperymentów pasujących do filtra.
    • 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.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Fonty w Narzędziach deweloperskich są aktualizowane, aby pasowały do Chrome (1523538).
  • Skuteczność: rozwiązaliśmy problem z wyświetlaniem zrzutu ekranu po najechaniu kursorem na osi czasu (1519469).
  • Źródła: zwiększono wysokość wiersza w Edytorze, aby ułatwić czytelność kodu (1523640).
  • Sieć > Odpowiedzi: rozwiązano różne problemy z wyświetlaniem w różnych formatach i kodowaniach (1523128, 1509336, 1523128, 41481944, 1509336).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.