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

Ulepszone debugowanie brakujących arkuszy stylów

W Narzędziach deweloperskich wprowadziliśmy szereg ulepszeń, które pomagają szybciej identyfikować i debugować brakujące arkusze stylów:

• Źródła > Drzewo stron pokazuje teraz tylko wdrożone i wczytane arkusze stylów, co minimalizuje pomyłki.
• Źródła > Edytor podkreśla teraz błędy i wyświetla wbudowane etykietki o błędach obok nieudanych instrukcji @import, url() i href.

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

• W kolumnie Inicjator w panelu Network znajdują się linki do dokładnego wiersza odwołującego 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 uszkodzonych adresów URL, nieudanych żądań i niewłaściwie umieszczonych instrukcji @import.

Problemy z Chromium: 1440626, 1442198, 1453611.

Obsługa liniowego czasu wczytywania w Elementach > Style > Edytujący wygładzanie

Edytor wygładzania w sekcji Elementy > Style umożliwiają dostosowywanie wartości transition-timing-function i animation-timing-function jednym kliknięciem. W tej wersji edytor wygładzania otrzymuje obsługę liniowej funkcji czasu.

Aby skonfigurować linearne czasy wyświetlania, kliknij przycisk selektora linearnego. Aby dodać punkt kontrolny, kliknij w dowolnym miejscu na linii. Aby usunąć punkt kontrolny, kliknij go dwukrotnie. Możesz też wybrać jedno z gotowych ustawień: linear, elastic, bounce lub emphasized. Obejrzyj film, by zobaczyć, jak działa korekta liniowa.

Problem z Chromium: 1421241.

Obsługa zasobników na dane i widok metadanych

Aplikacja > Sekcja Miejsce na dane obsługuje zasobniki na dane. Zasobniki na dane są od siebie niezależne, więc możesz określić priorytet usuwania wycinków danych i mieć pewność, że najbardziej wartościowe dane nie zostaną usunięte. Każdy zasobnik na dane może przechowywać dane powiązane z ustalonymi interfejsami API pamięci masowej, takimi jak IndexedDB i CacheStorage.

Wypróbuj te skrzypce, aby przetestować tę funkcję. Otwórz Narzędzia deweloperskie i kliknij Aplikacja > Miejsce na dane > Indeksowanej bazy danych i uruchom kod. W Narzędziach deweloperskich zobaczysz teraz zasobniki i ich zawartość. Wybierz zasobnik, aby wyświetlić jego metadane.

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

Problemy z Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 10.3.0. W szczególności dodaliśmy 4 nowe kontrole, które rejestrują różne problemy z ułatwieniami dostępu dotyczące nagłówków tabel i napisów, nazw przycisków wprowadzania danych oraz niezgodności języka. Na przykład:

Zobacz też pełną listę zmian. Podstawowe informacje na temat 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ędzia deweloperskie obsługują teraz więcej skrótów i rozwiązują problemy z czytnikami ekranu:

• Możesz teraz otworzyć menu kontekstowe za pomocą skrótu klawiszowego, np. Shift + F10 w systemie Windows i wielu dystrybucjach Linuksa. Informacje o skrótach w systemie macOS znajdziesz w artykule Alternatywne działania wskaźnika.
• Czytniki ekranu:
  • Nie będziepotrzebnie wypowiadać etykiet pól wyboru dwukrotnie.
  • Po kliknięciu „Czytaj nagłówek kolumny” usłyszysz nazwy nagłówków kolumn z możliwością sortowania skrótu.

Zespół Narzędzi deweloperskich wyraża wdzięczność Yanlingowi Wangowi i Elorm Coch za wprowadzenie tych ulepszeń.

Problemy z Chromium: 1446482, 1414952.

Różne wyróżnienia

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

• Panel Sieć nadal rejestruje aktywność w sieci nawet po wykonaniu czynności z osią czasu (1422552).
• Panel Stan wykrywa teraz, czy miała miejsce aktywacja renderowania z wyprzedzeniem lub nawigacja w pamięci podręcznej stanu strony internetowej, i wyświetla prośbę o ponowne załadowanie aplikacji (1393057).
• Możesz teraz przechodzić do sekcji Źródła > Punkty przerwania z klawiaturą: strzałki w górę i strzałki w dół, aby przenieść elementy, oraz spacja, aby wybrać (1446150).
• Naprawiliśmy przesyłanie i filtrowanie plików HAR w panelu Sieć (1450622).
• Wykres płomieniowy w panelu Wydajność umieszcza teraz małe przerwy między logami czasu, aby je ulepszyć (1452150).
• Poprawiliśmy automatyczne mapowanie plików umieszczonych w mapach źródłowych (1446383).

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.