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

Kayce Basques

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

Wersja wideo tej strony

znaczące wartości wstępnie ustawione podczas autouzupełniania funkcji CSS;

Niektóre właściwości CSS, np. filter, przyjmują wartości w postaci funkcji. Na przykład filter: blur(1px)dodaje do węzła rozmycie o 1 piksel. Podczas automatycznego wypełniania właściwości takich jak filter Narzędzia deweloperskie wypełniają tę właściwość wartością, dzięki której możesz wyświetlić podgląd zmian, jakie ta wartość wprowadzi w węźle.

stare zachowanie autouzupełniania;

Rysunek 1 stare zachowanie autouzupełniania; Narzędzia deweloperskie działają w trybie automatycznego uzupełniania filter: blur, ale żadne zmiany nie są widoczne w widoku.

nowe zachowanie autouzupełniania;

Rysunek 2. nowe zachowanie autouzupełniania; Narzędzia deweloperskie automatycznie wypełniają pole filter: blur(1px), a zmiana jest widoczna w widocznym obszarze.

Odpowiednia usterka w Chromium: #931145

Czyszczenie danych witryny z menu poleceń

Naciśnij Control + Shift + P lub Command + Shift + P (na Macu), aby otworzyć menu polecenia, a następnie uruchom polecenie Wyczyść dane witryny, aby usunąć wszystkie dane związane ze stroną, w tym: usługę w tle localStorage, sessionStorage, IndexedDB, Web SQL, pliki cookie, Cache i Cache aplikacji.

Polecenie Wyczyść dane witryny.

Rysunek 3. Polecenie Wyczyść dane witryny.

Funkcja czyszczenia danych witryn jest dostępna od jakiegoś czasu w sekcji Aplikacje > Wyczyść pamięć wewnętrzną. Nowością w Chrome 75 jest możliwość uruchamiania poleceń z poziomu 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ęć wewnętrzną.

Karta „Aplikacja” z opcją „Wyczyść miejsce na dane”

Rysunek 4 Aplikacja > Wyczyść miejsce na dane.

Odpowiednia usterka w Chromium: #942503

Wyświetlanie wszystkich baz danych IndexedDB

Wcześniej opcja Aplikacja > IndexedDB umożliwiała sprawdzanie tylko baz danych IndexedDB z głównego źródła. Jeśli na przykład na stronie masz element <iframe>, który używa IndexedDB, nie będziesz mieć widocznych jego baz danych.<iframe> Od wersji 75 Chrome Narzędzia dewelopera wyświetlają bazy danych IndexedDB dla wszystkich źródeł.

Stare zachowanie. Strona zawiera wbudowany demonstracyjny interfejs, który korzysta z IndexedDB, ale nie widać żadnych baz danych.

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

Nowe zachowanie. Bazy danych demonstracyjne są widoczne.

Rysunek 6. Nowe zachowanie. Bazy danych demonstracyjne są widoczne.

Odpowiednia usterka w Chromium: #943770

Wyświetlanie rozmiaru nieskompresowanego zasobu po najechaniu na niego kursorem

Załóżmy, że sprawdzasz aktywność sieciową. Twoja witryna używa kompresji tekstu, aby zmniejszyć rozmiar przesyłanych zasobów. Chcesz sprawdzić, jak duże są zasoby strony po tym, jak przeglądarka je rozpakuje. Wcześniej te informacje były dostępne tylko przy użyciu dużej liczby kolumn zapytań. Teraz możesz uzyskać dostęp do tych informacji, najeżdżając kursorem na kolumnę Rozmiar.

Najeżdżając kursorem na kolumnę Rozmiar, możesz wyświetlić rozmiar nieskompresowany zasobu.

Rysunek 7. Najeżdżając kursorem na kolumnę Rozmiar, możesz wyświetlić rozmiar nieskompresowany zasobu.

Odpowiednia usterka w Chromium: #805429

Punkty przerwania w wierszu w panelu punktów przerwania

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

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

Od jakiegoś czasu DevTools umożliwia określenie, kiedy dokładnie ma nastąpić zatrzymanie w miejscu zerwania. Może to być 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 opcje, utworzysz 3 punkty przerwania. Wcześniej w panelu Punkty graniczne nie można było osobno zarządzać tymi 3 punktami granicznymi. Od wersji 75 Chrome każdy punkt przerwania w kodzie ma swój własny wpis w panelu Punkty przerwania.

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

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

Nowe zachowanie. W panelu Punkty przerwania są 3 wpisy.

Rysunek 9. Nowe zachowanie. W panelu Punkty przerwania są 3 wpisy.

Odpowiednia usterka w Chromium: #927961

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

Panele IndexedDB i Pamięć podręczna wskazują 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ółowymi informacjami

W Chrome 73 wprowadzono szczegółowe etykiety w trybie inspekcji.

szczegółowa etykieta;

Rysunek 11. Szczegółowa etykietka z informacjami o kolorze, czcionce, marginesach i kontrascie.

Te szczegółowe etykietki możesz teraz wyłączyć w sekcji Ustawienia > Ustawienia > Elementy > Pokaż szczegółowe etykiety inspekcji.

Minimalna etykietka

Rysunek 12. Minimalna etykietka pokazująca tylko szerokość i wysokość.

Odpowiednie zgłoszenie błędu w Chromium: #948417

Ustawienie przełączania wcięć tabulacji w edytorze panelu źródeł

Testy ułatwień dostępu wykazały, że w Edytorze występuje pułapka na karty. Gdy użytkownik klawiatury wszedł do Edytowania, nie mógł z niego wyjść, ponieważ klawisz Tab służył do wcięcia. Aby zastąpić domyślne działanie i użyć karty do przenoszenia punktu skupienia, włącz Ustawienia > Ustawienia > Źródła > Włącz przenoszenie punktu skupienia na kartę.

W ostatnim czasie włożyliśmy wiele wysiłku w to, aby interfejs DevTools był bardziej dostępny z klawiatury. Aby dowiedzieć się więcej, obejrzyj film Roba Poruszanie się po Narzędziach deweloperskich w Chrome za pomocą technologii wspomagającej.

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.