Aby efektywnie edytować węzły, użyj 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ślone stany, takie jak :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. Jeszcze gorsze było to, że debugowanie wymagało opuszczenia DevTools 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, naciśnij i przytrzymaj jeden z kolorów podstawowych, a następnie kliknij odcień.
Łatwiejsze dodawanie bibliotek JavaScript typu 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 opakowania).
Teraz znajdziesz je w Ustawieniach. Wypróbuj:
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ś/zamknęłaś jedną z kart panelu, takich jak Renderowanie czy Wyszukiwanie? Możesz je teraz ponownie otworzyć za pomocą nowego menu po lewej stronie.
Jak zawsze przekaż nam swoją opinię na Twitterze lub w komentarzach poniżej. Błędy możesz zgłaszać na stronie crbug.com/new.
Do zobaczenia w przyszłym miesiącu!
Paul Bakaus i zespół Narzędzi deweloperskich