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ć brakujące arkusze stylów:

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

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

  • 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 konsoli znajdziesz linki do dokładnych wierszy z problematycznymi instrukcjami.

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

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

Problemy z Chromium: 1440626, 1442198, 1453611.

Obsługa liniowego czasu wyświetlania w sekcji Elementy > Style > Edytor wygładzania

Edytor wygładzania w sekcji Elementy > Style pozwala dostosować wartości elementów transition-timing-function i animation-timing-function jednym kliknięciem.Edytujący wygładzanie. W tej wersji edytor wygładzania Edytujący wygładzanie. 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

Sekcja Aplikacja > 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, przejdź do Aplikacja > Przechowywanie danych > Indeksowana baza danych i uruchom kod. W Narzędziach deweloperskich zobaczysz 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 dla sekcji pamięci lokalnej, sesji i pamięci podręcznej.

Nowy, ujednolicony widok metadanych.

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:

Powodzenie testu nagłówków tabeli.

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.
    • Nazwy nagłówków kolumn z możliwością sortowania będą ogłaszane po naciśnięciu skrótu „Odczytaj nagłówek kolumny”.

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 poruszać się po panelu Źródła > Punkty przerwania za pomocą klawiatury: strzałkę w górę lub strzałkę w dół, aby przenieść elementy, i spację, aby ją 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59