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

Sofia Emelianova
Sofia Emelianova

Oficjalna kolekcja rozszerzeń Dyktafonu jest już dostępna

Oficjalna kolekcja rozszerzeń Dyktafon do eksportowania i odtwarzania jest już dostępna.

Aby otworzyć kolekcję bezpośrednio z nagrywarki, na pasku czynności u góry panelu Nagrywarka kliknij Eksportuj > Pobierz rozszerzenia….

Ulepszenia sieci

Ta wersja zawiera kilka ulepszeń panelu Sieć.

W kolumnie Stan znajdziesz powód niepowodzenia.

W kolumnie Stan zawsze jest teraz widoczna przyczyna błędu. Wcześniej trzeba było włączyć Wiersze prośby o duże dane lub wybrać prośbę w tabeli.

Powód błędu przed i po jego wyświetleniu w kolumnie Stan.

Problemy z Chromium: 1506760.

Ulepszone menu Kopiuj

Menu Kopiuj w prośbie jest teraz lepiej zorganizowane.

Menu Kopiuj przed i po ulepszeniu

Dodatkowo opcja Kopiuj jako cURL kopiuje teraz prawidłową komendę do schowka w Windows.

Problemy z Chromium: 1267033, 1276452, 798498.

Poprawa skuteczności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Menu nawigacyjne na osi czasu

W sekcji Skuteczność u góry panelu Oś czasu możesz teraz ustawiać ścieżki nawigacyjne i przełączać się między nimi.

Aby ustawić menu nawigacyjne, wybierz zakres na osi czasu, najedź na niego kursorem i kliknij przycisk N ms . Możesz utworzyć kilka zagnieżdżonych ścieżek. Aby przełączać się między poziomami powiększenia, kliknij odpowiedni element ścieżki na górze osi czasu. Aby zobaczyć, jak działają znaczniki, obejrzyj następny film.

Problemy z Chromium: 1467739.

Inicjatorzy zdarzeń na ścieżce głównej

Na ścieżce Skuteczność > Główna domyślnie wyświetlają się teraz strzałki łączące inicjatory z wywołanymi przez nich kolejnymi zdarzeniami.

  • Nieprawidłowy styl lub układ –> Ponownie oblicz style lub Układ.
  • Żądanie klatki animacji -> Uruchomiono klatkę animacji
  • Request Inactive Callback -> Fire Inactive Callback
  • Zainstaluj licznik czasu -> Uruchomiono licznik czasu
  • Utwórz WebSocket -> Wyślij…Otrzymaj uzgodnienie połączenia WebSocket lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź takie zdarzenie w śladzie i kliknij je. Wcześniej ta funkcja była eksperymentalna.

Strzałka z żądania i wywołania zwrotnego w stanie bezczynności.

Problemy z Chromium: 1434596.

Menu selektora instancji maszyny wirtualnej JavaScript w narzędziach programistycznych Node.js

W panelu Wydajność w Node.js DevTools możesz teraz wybrać instancję maszyny wirtualnej JavaScript w odpowiednim menu na pasku czynności. Podobna funkcja była dostępna w wycofanej wkrótce funkcji Profiler JavaScriptu.

Stan przed i po dodaniu nowego menu, które umożliwia wybranie instancji maszyny wirtualnej JavaScript.

Problemy z Chromium: 1511813.

Ulepszenia elementów

Ta wersja zawiera wiele ulepszeń panelu Elementy.

Oprócz 2 kolejnych funkcji panel Elementy zapamiętuje teraz ostatnio otwieraną kartę, np. Wynikowy lub Właściwości.

Pseudoelement ::view-transition można teraz edytować w sekcji Styl

Teraz możesz edytować pseudoelementy CSS ::view-transition w sekcji Style za pomocą panelu inspekcji.

Wsparcie pseudoelementów przejścia widoku przed i po edytowaniu.

Więcej informacji znajdziesz w artykule Płynne i proste przejścia za pomocą interfejsu View Transitions API.

Problemy z Chromium: 1511233.

Obsługa kontenerów bloków w usługach align-content

Usługa align-content działa teraz z dowolnymi kontenerami bloków, w tym table-captiontable-cell. Wcześniej działała tylko z układem siatki i elastycznym.

Wsparcie funkcji align-content przed i po w kontenerach blokowych.

Problemy z Chromium: 1500511.

Nowy skrót i polecenie w źródłach

Aby utworzyć punkt logowania, kliknij w Źródłach Cmd (Mac) lub Ctrl (Windows) + Shift + numer wiersza. Ten skrót jest dodatkiem do już istniejącego Cmd (Mac) / Ctrl (Win) + kliknięcie w przypadku punktów kontrolnych warunkowych.

Menu poleceń zawiera nowe polecenie Pokaż aktywny plik na pasku bocznym nawigacji, które działa tak samo jak odpowiednia opcja w menu Edytor.

Nowe polecenie, które powoduje wyświetlenie aktywnego pliku na pasku bocznym nawigacji.

Problemy z Chromium: 1486933, 1467464.

Obsługa postawy w przypadku emulowanych składanych urządzeń

Tryb urządzenia umożliwia teraz ustawienie pozycji emulowanego składanego urządzenia: Ciągła lub Złożona. Tryb ciągły oznacza pozycję „płaską”, a po złożeniu tworzy kąt między sekcjami wyświetlacza.

Menu z opcjami postawy.

Dodatkowo na liście Urządzenia pojawiło się nowe emulowane urządzenie składane: Asus Zenbook Fold.

Problem z Chromium: 1066842.

dynamiczne motywy

Narzędzia deweloperskie automatycznie dopasowują się teraz do motywu kolorystycznego Chrome. Aby ustawić motyw:

  1. Otwórz nową kartę i w prawym dolnym rogu kliknij Dostosuj Chrome.
  2. W sekcji Wygląd wybierz motyw, korzystając z opcji Zmień motywy lub wybierz paletę kolorów.

Narzędzia deweloperskie dopasowują motyw kolorystyczny do wybranego w sekcji Wygląd.

Problemy z Chromium: 1483276.

Ostrzeżenia o wycofaniu plików cookie innych firm w panelach Sieć i Aplikacje

W panelach SiećAplikacja wyróżniono i wyświetlono ostrzeżenia obok plików cookie, na które mają wpływ ograniczenia dotyczące plików cookie innych firm z Ochrony przed śledzeniem.

W sekcji Sieć odszukaj prośbę z , kliknij ją i otwórz kartę Pliki cookie.

Zrzuty ekranu z panelu Sieć przed i po rejestrowaniu plików cookie innych firm.

W sekcji Aplikacja kliknij Pamięć > Pliki cookie i wybierz domenę. Pliki cookie wyróżnione na żółto nie są przechowywane w przeglądarce.

Stan przed i po wyróżnieniu plików cookie innych firm w panelu aplikacji.

Najedź kursorem na ikonę ostrzeżenia, aby wyświetlić poradnik opisujący problemy, a potem kliknij ikonę, aby otworzyć kartę Problemy z dodatkowymi informacjami.

Dodatkowo pliki cookie w tabeli są teraz domyślnie sortowane według nazwy.

Problemy z Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 11.4.0. Zobacz pełną listę zmian. Jedną z ciekawych zmian jest nowy audyt, który pozwala wykryć, czy Twoja witryna nadal używa plików cookie innych firm.

Kontrola, która wykrywa pliki cookie innych firm.

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:

  • Gdy otworzysz Ustawienia > Eksperymenty, pole Szukaj będzie automatycznie zaznaczone.
  • Teraz można skupić się na przycisku Wyczyść dane wejściowe w sekcji Sieć > Filtr.
  • Drzewo plików w sekcji Źródła > Strona jest teraz wyświetlane prawidłowo w trybie wysokiego kontrastu.
  • Czytniki ekranu poprawnie odczytują teraz te elementy:
    • Stan pól wyboru w sekcji Źródła > Punkty graniczne.
    • Pozycja i informacje indeksu na liście sugestii.
    • Wynik działania polegający na dodaniu lub usunięciu lokalizacji w  Ustawienia > Lokalizacje.
    • Grupy reguł wykluczenia (ogólnych lub niestandardowych) w sekcji Ustawienia > Lista ignorowania.

Problemy z Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Animacje:
    • Usunięto błąd polegający na renderowaniu wyskakującego okienka zrzutu ekranu poza obszarem (1506991).
    • Usunęliśmy błąd polegający na tym, że usunięte węzły animacji nie były oznaczone jako usunięte (1506561).
  • Sieć:
    • Zastąpienia nagłówka: rozwiązano błąd związany z błędną ikoną fioletowej kropki na karcie Nagłówki (1507856).
    • Podgląd: rozwiązano błąd związany z niepotrzebnym podwójnym dekodowaniem (1509336).
    • Naprawiono błąd, który powodował, że krótkie żądania nie były wyświetlane (1509862).
  • Aplikacja > IndexedDB: w celu zapewnienia spójności z innymi panelami przearanżowano przyciski w pasku działań (1393800).
  • Czujniki: usunięto błąd powodujący, że nie można było uzyskać informacji o dostępności lokalizacji (1486859).
  • Skuteczność:
    • Przycisk Zbierz śmieci ma teraz odpowiednią ikonę – mopa zamiast kosza (1507530).
    • Śledzenie wydajności zapisuje teraz dane podczas przechodzenia do about:blank (1509947).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. 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ędziech deweloperskich.