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

Kayce Basques
Kayce Basques
X GitHub

Cześć! Oto nowości w narzędziach Chrome dla programistów w Chrome 75.

Wersja wideo tej strony

Znaczące gotowe wartości podczas autouzupełniania funkcji CSS

Niektóre właściwości CSS, np. filter, przyjmują funkcje jako wartości. Na przykład filter: blur(1px)dodaje do węzła 1-pikselowe rozmycie. Podczas autouzupełniania właściwości, takich jak filter, Narzędzia deweloperskie wypełniają teraz właściwość odpowiednią wartością, dzięki czemu możesz zobaczyć podgląd tego, jaki rodzaj zmiany będzie miała wartość w węźle.

Stare działanie autouzupełniania.

Rysunek 1. Stare działanie autouzupełniania. Narzędzia deweloperskie automatycznie uzupełniają tekst do filter: blur i w obszarze wyświetlania nie widać żadnych zmian.

Nowe zachowanie autouzupełniania.

Rysunek 2. Nowe zachowanie autouzupełniania. Narzędzia deweloperskie automatycznie uzupełniają wartość do filter: blur(1px), a zmiana jest widoczna w obszarze wyświetlania.

Odpowiedni problem w Chromium: #931145

Czyszczenie danych witryny z menu poleceń

Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu poleceń, a następnie uruchom polecenie Wyczyść dane witryny, aby wyczyścić wszystkie dane związane ze stroną, w tym: service worker,localStorage, sessionStorage, IndexedDB, Web SQL, pliki cookie, pamięć podręczna i pamięć podręczna aplikacji.

Polecenie Wyczyść dane witryny.

Rysunek 3. Polecenie Wyczyść dane witryny.

Czyszczenie danych witryny jest dostępne od jakiegoś czasu w sekcji Aplikacja > Wyczyść pamięć wewnętrzną. Nowa funkcja w Chrome 75 umożliwia uruchamianie polecenia z menu poleceń.

Jeśli nie chcesz usuwać wszystkich danych witryny, możesz określić, które dane mają zostać usunięte, w sekcji Aplikacja > Wyczyść pamięć.

Karta „Aplikacja” z wybraną opcją „Wyczyść pamięć”.

Rysunek 4. Aplikacja > Wyczyść pamięć wewnętrzną.

Odpowiedni problem w Chromium: #942503

Wyświetlanie wszystkich baz danych IndexedDB

Wcześniej w sekcji Aplikacja > IndexedDB można było sprawdzać bazy danych IndexedDB tylko z głównego źródła. Jeśli na przykład na stronie znajduje się element <iframe>, który korzysta z IndexedDB, nie będzie można wyświetlić jego baz danych.<iframe> Od Chrome 75 Narzędzia deweloperskie wyświetlają bazy danych IndexedDB dla wszystkich źródeł.

Stare zachowanie. Strona zawiera osadzoną wersję demonstracyjną, która korzysta z IndexedDB, ale nie widać żadnych baz danych.

Rysunek 5. Stare zachowanie. Strona zawiera osadzony element demonstracyjny, który korzysta z IndexedDB, ale nie widać żadnych baz danych.

nowe zachowanie, Bazy danych wersji demonstracyjnej są widoczne.

Rysunek 6. nowe zachowanie, Bazy danych wersji demonstracyjnej są widoczne.

Odpowiedni problem w Chromium: #943770

Wyświetlanie nieskompresowanego rozmiaru zasobu po najechaniu kursorem

Załóżmy, że sprawdzasz aktywność w sieci. Witryna używa kompresji tekstu, aby zmniejszyć rozmiar przesyłanych zasobów. Chcesz sprawdzić, jak duże są zasoby strony po rozpakowaniu ich przez przeglądarkę. Wcześniej te informacje były dostępne tylko w przypadku korzystania z wierszy dużych żądań. Teraz możesz wyświetlić te informacje, najeżdżając kursorem na kolumnę Rozmiar.

Najeżdżanie kursorem na kolumnę Rozmiar, aby wyświetlić nieskompresowany rozmiar zasobu.

Rysunek 7. Najeżdżanie kursorem na kolumnę Rozmiar, aby wyświetlić nieskompresowany rozmiar zasobu.

Powiązany problem w Chromium: #805429

Punkty przerwania w wierszu w panelu punktów przerwania

Załóżmy, że dodajesz punkt przerwania w wierszu kodu do tego wiersza kodu:

document.querySelector('#dante').addEventListener('click', logWarning);

Od pewnego czasu Narzędzia deweloperskie umożliwiają określenie, kiedy dokładnie ma nastąpić wstrzymanie w punkcie przerwania, np. na początku wiersza, przed wywołaniem funkcji document.querySelector('#dante') lub przed wywołaniem funkcji addEventListener('click', logWarning). Jeśli włączysz wszystkie 3, utworzysz 3 punkty przerwania. Wcześniej panel Punkty przerwania nie umożliwiał zarządzania tymi 3 punktami przerwania osobno. Od Chrome 75 każdy wbudowany punkt przerwania ma własny wpis w panelu Punkty przerwania.

Stare zachowanie. W panelu Punkty przerwania jest tylko 1 pozycja.

Rysunek 8. Stare zachowanie. W panelu Punkty przerwania jest tylko 1 wpis.

nowe zachowanie, W panelu Punkty przerwania znajdują się 3 wpisy.

Rysunek 9. nowe zachowanie, W panelu Punkty przerwania znajdują się 3 wpisy.

Odpowiedni problem w Chromium: #927961

Liczba zasobów IndexedDB i pamięci podręcznej

Panele IndexedDB i Pamięć podręczna pokazują teraz łączną liczbę zasobów w bazie danych lub pamięci podręcznej.

Łączna liczba wpisów w bazie danych IndexedDB.

Rysunek 10. Łączna liczba wpisów w bazie danych IndexedDB.

Odpowiednie problemy w Chromium: #941197, #930773, #930865

Ustawienie wyłączające etykietkę ze szczegółami inspekcji

W Chrome 73 wprowadziliśmy szczegółowe etykietki w trybie inspekcji.

szczegółową etykietkę,

Rysunek 11. Szczegółowa etykietka z informacjami o kolorze, czcionce, marginesie i kontraście.

Szczegółowe etykietki narzędzi możesz teraz wyłączyć, klikając Ustawienia > Preferencje > Elementy > Wyświetlaj szczegółowe etykietki narzędzia do sprawdzania.

Minimalna etykietka.

Rysunek 12. Minimalna etykietka z informacjami o szerokości i wysokości.

Odpowiedni problem w Chromium: #948417

Ustawienie przełączania wcięcia w edytorze panelu Źródła

Testy dostępności wykazały, że w edytorze występuje pułapka kart. Gdy użytkownik korzystający z klawiatury przełączył się na kartę Edytor, nie mógł z niej wyjść, ponieważ klawisz Tab służył do wstawiania wcięć. Aby zastąpić domyślne działanie i używać klawisza Tab do przenoszenia fokusu, włącz Ustawienia > Ustawienia > Źródła > Włącz przenoszenie fokusu za pomocą klawisza Tab.

Ostatnio wiele wysiłku włożyliśmy w to, aby interfejs Narzędzi deweloperskich był bardziej przyjazny dla użytkowników klawiatury. Więcej informacji znajdziesz w artykule Roba Navigate Chrome DevTools With Assistive Technology (Nawigowanie po Narzędziach deweloperskich w Chrome za pomocą technologii wspomagających).

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.