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 uzupełniania właściwości, takich jak filter, Narzędzia deweloperskie zapełniają tę właściwość prawidłową wartością, aby można było wyświetlić podgląd, jakiego rodzaju zmiana wpłynie na dany węzeł.

Rysunek 1 Stare działanie autouzupełniania. Narzędzia deweloperskie automatycznie uzupełniają wynik do wartości filter: blur i w widocznym obszarze nie są widoczne żadne zmiany.

Rysunek 2. nowe zachowanie autouzupełniania; Narzędzia deweloperskie automatycznie uzupełniają dane do wartości filter: blur(1px), a zmiana jest widoczna w widocznym obszarze.

Problem z 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.

Rysunek 3. Polecenie Wyczyść dane witryny.

Od jakiegoś czasu możesz usuwać dane witryn po kliknięciu Aplikacja > Wyczyść pamięć. Nowością w Chrome 75 jest możliwość uruchamiania poleceń z poziomu menu poleceń.

Jeśli nie chcesz usuwać wszystkich danych witryn, możesz wybrać, które dane mają być usuwane, wybierając Aplikacja > Wyczyść pamięć.

Rysunek 4 Aplikacja > Wyczyść miejsce na dane.

Odpowiednia kwestia 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ł.

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

Rysunek 6. Nowe zachowanie. Bazy danych w wersji demonstracyjnej 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, by zmniejszyć rozmiar przesyłanych zasobów. Chcesz sprawdzić, jak duże są zasoby strony po ich zdekompresowaniu przez przeglądarkę. 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.

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 zarządzać tymi 3 punktami osobno. Od wersji 75 Chrome każdy punkt przerwania w kodzie ma swój własny wpis w panelu Punkty przerwania.

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

Rysunek 9. Nowy sposób działania. W panelu Punkty przerwania znajdują się 3 wpisy.

Problem z 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.

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

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

Ustawienie wyłączania etykietki szczegółowej inspekcji

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

Rysunek 11. Szczegółowa etykietka przedstawiająca kolor, czcionkę, marginesy i kontrast.

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

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

Problem z Chromium: #948417

Ustawienie przełączania wcięć na kartach w edytorze panelu Źródła

Testy ułatwień dostępu wykazały, że w Edytorze znajduje się pułapka kart. 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ę.

Ostatnio przeprowadzono wiele pracy nad usprawnieniem poruszania się po interfejsie Narzędzi deweloperskich. Aby dowiedzieć się więcej, obejrzyj film Roba Nawigowanie w Narzędziach deweloperskich w Chrome za pomocą technologii wspomagającej.

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Wyślij tweeta do @ChromeDevTools.
• Napisz komentarz pod filmem Co nowego w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach ze wskazówkami dotyczącymi Narzędzi deweloperskich w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.