Dowiedz się, jak DevTools pozwala pisać mniej dzięki inteligentniejszemu autouzupełnianiu w Konsoli, jak edytować reguły @keyframe
bezpośrednio w panelu Stylów, jak korzystać z niestandardowych zmiennych CSS i jak dołączyć do ciemnej strony.
Bardziej inteligentne autouzupełnianie na konsoli
Jeśli jesteś podobny do mnie i wielu innych osób, wpisujesz w konsoli polecenie, aby debugować aplikację, widzisz, że nie działa, i powtarzasz wpisywanie tego polecenia, i jeszcze raz, i jeszcze raz. Aby Ci w tym pomóc, automatycznie uzupełniamy pełne zdania, które wpisujesz wcześniej, np.:

bezpośrednie edytowanie reguł @keyframes w panelu Styl
Gdy wprowadziliśmy w DevTools inspektor animacji i edytor wypełnienia, były one ograniczone do przejść, ponieważ w panelu Style nigdy nie wyświetlaliśmy animacji CSS opartych na @keyframe
. Cieszę się, że to już przeszłość. Możesz więc szaleć! Aby zobaczyć podgląd, sprawdź nasz tweet z filmem.
Obsługa niestandardowych właściwości CSS

W CSS jest wiele przydatnych funkcji, a jedną z nich są zmienne niestandardowe, które pojawią się w Chrome 49. Zadbaliśmy o pełną obsługę w DevTools, więc jeśli używasz już zmiennych w Sass, wypróbuj zmienne natywne, które umożliwiają edytowanie właściwości na bieżąco w panelu Style i natychmiastowe aktualizowanie elementów zależnych.
ciemny motyw w DevTools,

W końcu ulegliśmy prośbie, którą słyszeliśmy dziesiątki razy w ciągu ostatnich kilku lat: możesz teraz wybrać ciemny motyw w DevTools. Otwórz ustawienia Narzędzi deweloperskich, ustaw motyw na ciemny i używaj. Ta funkcja jest nadal w wersji beta, ponieważ wiele jej elementów jest generowanych automatycznie. Jeśli zauważysz obszary, które można ulepszyć, daj nam znać.
Najlepsze z reszty
- Szuflada konsoli jest teraz automatycznie zwijana, gdy klikniesz kartę pełnej konsoli.
- Drzewo plików w sekcji Źródła zostało gruntownie odświeżone i wzbogacone o nowe ikony oraz nową funkcję grupowania.
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