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

Kayce Basques

Cześć! Oto nowości w Narzędziach deweloperskich w Chrome w Chrome 75.

Wersja wideo tej strony

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

Niektóre właściwości CSS, takie jak filter, używają funkcji jako wartości. Na przykład: filter: blur(1px) dodaje do węzła rozmycie 1 piksel. Podczas automatycznego uzupełniania właściwości takich jak filter, Narzędzia deweloperskie wypełniają teraz pole właściwości z znaczącą wartością, tak by można było zobaczyć podgląd, jakiego rodzaju zmiana spowoduje wartość. w węźle.

Rysunek 1. Stare działanie autouzupełniania. Narzędzia deweloperskie automatycznie uzupełniają wyniki do wartości filter: blur i nie zawierają jest widoczna w widocznym obszarze.

Rysunek 2. Nowy sposób autouzupełniania. Narzędzia deweloperskie automatycznie uzupełniają wartości w polu filter: blur(1px) i zmiana będzie widoczna w widocznym obszarze.

Problem z Chromium: #931145

Czyszczenie danych witryny w menu poleceń

Naciśnij Control+Shift+P lub Command + Shift + P (Mac), aby otworzyć menu poleceń, i uruchomić polecenie Wyczyść dane witryny, aby usunąć wszystkie dane związane ze stroną, w tym: skrypty robocze, localStorage, sessionStorage, IndexedDB, Web SQL, Pliki cookie, Pamięć podręczna, i pamięć podręczna aplikacji.

Rysunek 3. Polecenie Wyczyść dane witryn.

Dane witryn można wyczyścić po kliknięciu Aplikacja > Wyczyść pamięć przez jakiś czas. Nowy w Chrome 75 może uruchamiać polecenia z menu poleceń.

Jeśli nie chcesz usuwać wszystkich danych witryn, możesz określić, z których danych mają być usuwane Aplikacja > Wyczyść pamięć.

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

Problem z Chromium: #942503

Wyświetl wszystkie bazy danych IndexedDB

Poprzednio Aplikacja > Interfejs IndexedDB umożliwiał tylko sprawdzanie baz danych IndexedDB głównego punktu początkowego. Jeśli np. masz na stronie zasób <iframe>, który używał elementu <iframe> Nie można wyświetlić baz danych IndexedDB. Od Chrome 75 w Narzędziach deweloperskich jest widoczna wartość IndexedDB w bazach danych dla wszystkich źródeł.

Rysunek 5. Stare działanie. Na stronie znajduje się wersja demonstracyjna, która używa IndexedDB, ale nie baz danych są widoczne.

Rysunek 6. Nowy sposób działania. Bazy danych w wersji demonstracyjnej są widoczne.

Problem z Chromium: #943770

Wyświetl rozmiar nieskompresowanego zasobu po najechaniu na niego kursorem

Załóżmy, że sprawdzasz aktywność w sieci. Twoja witryna używa kompresji tekstu, aby: i zmniejszyć rozmiar przesyłanych zasobów. Chcesz sprawdzić, jak duże są zasoby strony po tagu dekompresuje je. Wcześniej te informacje były dostępne tylko w przypadku korzystania z dużego żądania wierszy. Możesz teraz uzyskać dostęp do tych informacji, najeżdżając kursorem na kolumnę Rozmiar.

Rysunek 7. Najechanie kursorem na kolumnę Rozmiar w celu wyświetlenia rozmiaru nieskompresowanego zasobu.

Problem z Chromium: #805429

Wbudowane punkty przerwania w panelu punktów przerwania

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

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

Od jakiegoś czasu Narzędzia deweloperskie umożliwiają określenie, kiedy dokładnie powinno się wstrzymać w punkcie przerwania w ten sposób: 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, tworząc 3 punkty przerwania. Wcześniej w panelu Punkty przerwania nie można było zarządzać te 3 punkty przerwania indywidualnie. Od wersji Chrome 75 każdy wbudowany punkt przerwania otrzymuje własny wpis w sekcji Panel Punkty przerwania.

Rysunek 8. Stare działanie. W panelu Punkty przerwania jest tylko 1 wpis.

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

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

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

Możesz teraz wyłączyć te szczegółowe etykietki w sekcji Ustawienia > Ustawienia > Elements > Pokaż etykietkę szczegółowej kontroli.

Rysunek 12. Minimalna etykietka zawierają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. Jednorazowa klawiatura użytkownik przełączył się na Edytor i nie mógł go otworzyć, ponieważ klawisz Tab był używany do wcięcia. Aby zastąpić działanie domyślne i przenieść zaznaczenie za pomocą klawisza Tab, włącz Ustawienia > Ustawienia > Źródła > Włącz przesuwanie zaznaczenia klawiszem Tab.

Wprowadzono ostatnio wiele pracy nad usprawnieniem poruszania się po interfejsie Narzędzi deweloperskich za pomocą klawiatury. Aby dowiedzieć się więcej, zapoznaj się z artykułem Roba na temat poruszania się po narzędziach deweloperskich w Chrome przy użyciu technologii wspomagającej osoby z niepełnosprawnością.

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.