Nowości w Narzędziach dla deweloperów (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszone debugowanie brakujących arkuszy stylów

W Narzędziach deweloperskich wprowadzono kilka ulepszeń, które ułatwiają szybsze wykrywanie i debugowanie problemów z brakiem czcionek:

  • Aby uniknąć nieporozumień, w drzewie Źródła > Strona wyświetlane są teraz tylko wdrożone i załadowane arkusze stylów.
  • W sekcji Źródła > Edytor podkreślone są teraz instrukcje @import, url() i href, które nie działają prawidłowo, a obok nich wyświetlane są informacje o błędach.

Podkreślone stwierdzenia z opisami w panelu Źródła.

  • Konsola zawiera teraz nie tylko linki do nieudanych próśb, ale też linki do konkretnego wiersza, który odwołuje się do niewczytanego pliku stylesheet.

Konsola zawiera linki do konkretnych wierszy z problematycznymi stwierdzeniami.

  • W panelu Sieć kolumna Initiator jest zawsze wypełniana linkami do wiersza, który odwołuje się do niewczytanego pliku stylesheet.

  • Panel Problemy zawiera listę wszystkich problemów z wczytywaniem arkuszy stylów, w tym nieprawidłowe adresy URL, nieudane żądania i nieprawidłowo umieszczone instrukcje @import.

Panel Problemy z linkami do źródeł i żądań

Problemy z Chromium: 1440626, 1442198, 1453611.

Obsługa liniowego czasu trwania w sekcji Elementy > Style > Easing Editor

Edytor wygładzania. Edytor wygładzania w sekcji Elementy > Style umożliwia dostosowanie wartości transition-timing-function i animation-timing-function jednym kliknięciem. W tej wersji Edytor wygładzania. Edytor łagodnego przejścia obsługuje funkcję linearnego czasu.

Aby skonfigurować czas trwania linearny, kliknij przycisk selektora linearnego. Aby dodać punkt kontrolny, kliknij dowolne miejsce na linii. Aby usunąć punkt kontrolny, kliknij go dwukrotnie. Możesz też wybrać jedną z wstępnie ustawionych wartości: linear, elastic, bounce lub emphasized. Obejrzyj film, aby zobaczyć, jak działa dostosowanie liniowe.

Problem z Chromium: 1421241.

Obsługa zasobników pamięci masowej i widok metadanych

Sekcja Aplikacja > Przechowywanie danych obsługuje zasoby pamięci. Zbiory danych są od siebie niezależne, więc możesz określić priorytet usuwania dla poszczególnych części danych i zadbać o to, aby nie zostały usunięte najcenniejsze dane. Każdy zasób może przechowywać dane powiązane z dotychczasowymi interfejsami API do przechowywania, takimi jak IndexedDB i CacheStorage.

Aby przetestować tę funkcję, otwórz tę stronę. Otwórz DevTools, przejdź do Aplikacja > Pamięć > Indexed DB i uruchom kod. Narzędzia dla programistów wyświetlają teraz zbiory i ich zawartość. Wybierz zasobnik, aby wyświetlić jego metadane.

wyświetlanie metadanych zasobnika.

Ujednolicony widok metadanych jest teraz dostępny również w przypadku sekcji pamięci lokalnej, sesji i pamięci podręcznej.

Nowy widok ujednoliconych metadanych.

Problemy z Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 10.3.0. W tej wersji dodaliśmy 4 nowe audyty, które obejmują różne problemy z dostępnością związane z nagłówkami tabel i tytułami, nazwami przycisków do wprowadzania danych oraz niezgodnością językową. Na przykład:

Nagłówki tabeli przeszły sprawdzanie.

Zobacz też pełną listę zmian. 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: polecenia na klawiaturze i ulepszone odczytywanie ekranu

Narzędzie dla programistów obsługuje teraz więcej skrótów i rozwiązuje problemy z czytnikami ekranu:

  • Teraz możesz otworzyć menu kontekstowe za pomocą skrótu klawiszowego, na przykład Shift + F10 w Windows i wielu dystrybucjach Linuksa. Skróty w systemie MacOS znajdziesz w artykule Alternatywne działania kursora.
  • Aplikacje czytnika ekranu:
    • Nie będzie niepotrzebnie wyświetlać etykiet pól wyboru.
    • Po naciśnięciu skrótu „Czytaj nagłówek kolumny” odczytuje nazwy nagłówków kolumn, które można sortować.

Zespół DevTools dziękuje Yanling Wang i Elorm Coch za wprowadzenie tych ulepszeń.

Problemy z Chromium: 1446482 i 1414952.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Panel Sieć nadal rejestruje aktywność sieciową, nawet po interakcji z osią czasu (1422552).
  • Panel Pokrycie rozpoznaje teraz, czy nastąpiła aktywacja prerenderowania lub nawigacja w pamięci podręcznej stanu strony internetowej, i prosi o odświeżenie (1393057).
  • Teraz możesz poruszać się po panelu Źródła > Punkty graniczne za pomocą klawiatury: strzałka w górę i strzałka w dół do przemieszczania oraz spacja do zaznaczania (1446150).
  • Naprawiono przesyłanie i filtrowanie plików HAR w panelu Sieć (1450622).
  • W panelu Wydajność wykres słupkowy ma teraz małe przerwy między śladami, aby lepiej je renderować (1452150).
  • Naprawiono automatyczne mapowanie plików umieszczonych w mapach źródeł (1446383).

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.