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 wprowadziliśmy szereg ulepszeń, które pomagają szybciej identyfikować i debugować problemy z brakującymi arkuszami stylów:

  • W drzewie Źródła > Strona są teraz wyświetlane tylko arkusze stylów, które zostały wdrożone i wczytane, aby uniknąć nieporozumień.
  • W sekcji Źródła > Edytor są teraz podkreślane i wyświetlane w wierszu podpowiedzi dotyczące błędów obok nieudanych instrukcji @import, url() i href.

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

  • Konsola oprócz linków do nieudanych żądań zawiera teraz linki do dokładnego wiersza, który odwołuje się do arkusza stylów, którego nie udało się wczytać.

Konsola zawiera linki do dokładnych wierszy z problematycznymi instrukcjami.

  • Panel Sieć konsekwentnie wypełnia kolumnę Inicjator linkami do dokładnego wiersza, który odwołuje się do arkusza stylów, którego nie udało się wczytać.

  • Panel Problemy zawiera listę wszystkich problemów z wczytywaniem arkuszy stylów, w tym nieprawidłowych adresów URL, nieudanych żądań i nieprawidłowo umieszczonych instrukcji @import.

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

Problemy z Chromium: 1440626, 1442198, 1453611.

Obsługa liniowego czasu w sekcji Elementy > Style > Edytor funkcji przejścia

Edytor wygładzania. Edytor krzywych w sekcji Elementy > Style umożliwia dostosowywanie wartości transition-timing-function i animation-timing-function jednym kliknięciem. W tej wersji Edytor wygładzania. Edytor funkcji łagodzenia zyskuje obsługę funkcji liniowego czasu trwania.

Aby skonfigurować liniowe czasy, kliknij przycisk liniowego selektora. Aby dodać punkt kontrolny, kliknij dowolne miejsce na linii. Aby usunąć punkt kontrolny, kliknij go dwukrotnie. Możesz też wybrać jedną z gotowych wartości: linear, elastic, bounce lub emphasized. Obejrzyj film, aby zobaczyć, jak działa korekta liniowa.

Problem w Chromium: 1421241.

Obsługa zasobników i wyświetlanie metadanych

Sekcja Aplikacja > Pamięć zyskuje obsługę zasobników pamięci. Kosz pamięci są od siebie niezależne, więc możesz określić priorytety usuwania dla fragmentów danych i mieć pewność, że najcenniejsze dane nie zostaną usunięte. Każdy zasobnik pamięci może przechowywać dane powiązane z ustalonymi interfejsami API pamięci, takimi jak IndexedDB i CacheStorage.

Aby przetestować tę funkcję, otwórz ten fiddle. Otwórz Narzędzia deweloperskie, kliknij Application (Aplikacja) > Storage (Pamięć) > Indexed DB (Baza danych indeksowana) i uruchom kod. Narzędzia deweloperskie wyświetlają teraz zasobniki i ich zawartość. Wybierz zasobnik, aby wyświetlić jego metadane.

wyświetlanie metadanych zasobnika,

Ujednolicony widok metadanych jest teraz dostępny także w sekcjach pamięci lokalnej, sesji i pamięci podręcznej.

Nowy ujednolicony widok metadanych.

Problemy z Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Panel Lighthouse działa teraz w wersji 10.3.0. W tej wersji dodaliśmy 4 nowe audyty, które wykrywają różne problemy z dostępnością związane z nagłówkami tabel i podpisami, nazwami przycisków oraz niezgodnościami językowymi. Na przykład:

Sprawdzanie nagłówków tabeli zakończone powodzeniem.

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

Narzędzia deweloperskie obsługują teraz więcej skrótów i rozwiązują problemy z czytnikami ekranu:

  • Menu kontekstowe możesz teraz otworzyć za pomocą skrótu klawiszowego, np. Shift+F10 w systemie Windows i wielu dystrybucjach Linuxa. Skróty w systemie macOS znajdziesz w artykule Alternatywne działania wskaźnika.
  • Aplikacje czytnika ekranu:
    • Nie będzie niepotrzebnie dwukrotnie odczytywać etykiet pól wyboru.
    • Będzie odczytywać nazwy nagłówków kolumn, które można sortować, gdy naciśniesz skrót „Odczytaj nagłówek kolumny”.

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

Problemy z Chromium: 1446482, 1414952.

Różne wyróżnione informacje

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

  • Panel Sieć rejestruje aktywność sieciową nawet po interakcji z osią czasu (1422552).
  • Panel Pokrycie rozpoznaje teraz, czy nastąpiła aktywacja wstępnego renderowania lub nawigacja w pamięci podręcznej stanu strony internetowej, i prosi o ponowne wczytanie (1393057).
  • W panelu Źródła > Punkty przerwania możesz teraz poruszać się za pomocą klawiatury: strzałki w górę i strzałki w dół do przesuwania się oraz spacji do wybierania (1446150).
  • Naprawiono przesyłanie i filtrowanie plików HAR w panelu Sieć (1450622).
  • Wykres płomieniowy w panelu Skuteczność ma teraz małe odstępy między śladami, aby lepiej je renderować (1452150).
  • Poprawiono automatyczne mapowanie plików umieszczonych w mapach źródłowych (1446383).

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.

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