Aby efektywnie edytować węzły, korzystaj z nowego menu kontekstowego panelu DOM. debugować usługi bezpośrednio w panelu Zasoby. Wybierz jeden z odcieni w stylu Material Design w selektorze kolorów. biblioteki JS typu czarna skrzynka,
Nowe, ulepszone menu kontekstowe panelu DOM
Przeanalizowaliśmy najczęściej używane działania w panelu DOM i doszliśmy do wniosku, że menu kontekstowe po kliknięciu prawym przyciskiem myszy powinno być uporządkowane i przeorganizowane.
Teraz łatwiej jest szybko ukryć lub usunąć element, wywołać określony stan, np. :active lub :hover, albo edytować kod HTML. Jeśli używasz trackpada i nie chcesz klikać prawym przyciskiem myszy, kliknij 3 małe kropki obok wybranego elementu.
Debugowanie skryptów service worker w panelu Zasoby
Service worker to świetne rozwiązanie, ale na początku może być trudne do zrozumienia. Sytuację pogorszyło to, że debugowanie wymagało opuszczenia Narzędzi deweloperskich i otwarcia strony chrome://serviceworker-internals/ w nowym oknie przeglądarki.
Już nie. Teraz możesz debugować usługi w ramach bieżącej domeny bezpośrednio z panelu Zasoby. Nadal nad tym pracujemy, ale już teraz widać znaczną poprawę w porównaniu z poprzednim stanem.
Wszystkie kolory: odcienie w stylu Material Design w selektorze kolorów
Kilka tygodni temu dodaliśmy do selektora kolorów paletę Material Design, aby zapewnić Ci podstawowe, odważne kolory. Aby zaprojektować całą stronę, musisz mieć pełny dostęp do wszystkich odcieni Material Design, dlatego uwzględniliśmy je w ramach tej funkcji.
Aby wyświetlić odcienie, przytrzymaj jeden z kolorów podstawowych i kliknij zamiast nich.
Łatwiejsze korzystanie z bibliotek JavaScript Blackbox w ustawieniach
Technika black-box w JavaScript istnieje od jakiegoś czasu, ale niełatwo ją wykryć. Ta funkcja umożliwia zaciemnienie skryptu na stronie, aby skupić się tylko na napisanym przez siebie kodzie (i ukryć cały kod otaczający).
Przenieśliśmy je teraz do Ustawień. Wypróbuj tę funkcję:
Najlepsze z reszty
- Brak dostępu do przełączników renderowania? Ustawienia renderowania zostały przeniesione do głównego menu DevTools (w sekcji „Więcej narzędzi”). Oprócz zwykłych opcji (np. licznika FPS) przenieśliśmy tam też opcję „Emuluj media drukowane”.
- Nie chcesz już wpisywać chrome://inspect w omniboksie? Opcję Sprawdzanie urządzeń można teraz znaleźć w nowym menu głównym w sekcji „Więcej narzędzi”.
- Przypadkowo zamknąłeś jedną z kart panelu, takich jak Renderowanie czy Wyszukiwanie? Możesz je teraz ponownie otworzyć za pomocą nowego menu po lewej stronie.
Jak zawsze, powiedz nam, co myślisz, na Twitterze lub w komentarzach poniżej, a błędy zgłoś na crbug.com/new.
Do zobaczenia w przyszłym miesiącu!
Paul Bakaus i zespół Narzędzi deweloperskich