Dowiedz się, jak DevTools stawia na urządzenia mobilne dzięki nowemu, uproszczonemu trybowi urządzenia, który jest zawsze włączony. Korzystając z przycisków kolorów, możesz szybko dodawać kolory do selektorów i sprawdzać, co wkrótce pojawi się w narzędziach dla deweloperów.
Wgląd w przyszłość tworzenia treści
Właśnie wracamy z Chrome Dev Summit, gdzie pokazaliśmy, jak wygląda praca z Narzędziami dla programistów obecnie i w przyszłości. Zwykle nie wspominam w tym biuletynie o funkcjach, które są jeszcze w fazie eksperymentalnej lub są na etapie intensywnego rozwoju, ale tym razem zrobię wyjątek. Jeśli nie masz czasu na obejrzenie całego wykładu, oto jego główne założenia:
Tryb urządzenia (wersja 2)
Nadal intensywnie pracujemy nad nową, odważną wersją Trybu urządzenia, ale chcemy dać wszystkim możliwość wypróbowania tej funkcji, dlatego włączyliśmy ją w wersji Canary. Wprowadzając te zmiany, kierujemy DevTools w kierunku przyszłości z uwzględnieniem urządzeń mobilnych, w której domyślnie będzie się ono zajmować tworzeniem aplikacji mobilnych, a tworzenie aplikacji na komputery będzie dodatkiem. W ciągu najbliższych kilku tygodni wprowadzimy więcej iteracji, a gdy skończymy, opublikujemy obszerniejszy wpis na blogu.
Zaawansowana kontrola animacji
Funkcja sprawdzania animacji w trakcie tworzenia daje pełny i szczegółowy obraz tego, co dzieje się z obiektami ruchomymi. Zamiast wyświetlać przejście jednego elementu naraz, dodaliśmy heurystyki, które grupowałyby złożone animacje, aby można było skupić się na wszystkich elementach. Obejrzyj film. Gdy wprowadzimy tę funkcję na dużą skalę, opublikujemy na blogu obszerniejszy, samodzielny post.
Tryb układu (przegląd)
Nowy tryb układu nie jest jeszcze gotowy do premiery, ale obiecuje wiele. Nie mogę się doczekać, aż ta funkcja będzie w pełni dostępna. Tryb układu dodaje do Narzędzi deweloperskich możliwości edycji WYSIWYG dla dowolnego elementu na stronie. Do tej pory wysokość, szerokość, wypełnienie i marginesy można edytować w kontekście. Zajmie to trochę czasu, zanim udostępnimy Ci tę funkcję, ale będziemy Cię na bieżąco informować.
Profilowanie wydajności za pomocą zaktualizowanego panelu osi czasu
W ramach szerszego wdrożenia nowego modelu skuteczności RAIL wprowadziliśmy setki większych i mniejszych zmian w panelu Czasowej kolejności zdarzeń, które w znacznym stopniu zmieniają i ulepszają profilowanie skuteczności. Zamiast pokazywać każdą zmianę z osobna, nasz Paul Irish pokazał nam, jak prawidłowo debugować wydajność witryny, w tym przypadku witryny mobilnej Hotel Tonight, na żywo. Wśród nowo ogłoszonych funkcji znajdują się paski wczytywania i filmy przedstawiające skuteczność, dołączona kaskada sieci, podsumowanie widoku drzewa oraz możliwość wyświetlania kosztów skuteczności według domeny i pliku.
Łatwe dodawanie kolorów pierwszego planu i tła do dowolnego elementu
Gdy chcesz dodać do elementu kolor tła lub kolor, nie możesz po prostu otworzyć selektora kolorów. Zamiast tego większość z Was wpisywała coś w stylu „background: red;”, aby pojawiła się ikona selektora kolorów, a potem wybierała właściwy kolor.
Pomyśleliśmy, że można to uprościć. Dodaliśmy 2 przydatne przyciski, które pojawiają się po najechaniu kursorem na prawy dolny róg selektora. Dzięki nim możesz dodać kolor i wyświetlić selektor jednym kliknięciem:
Najlepsze z reszty
- Wcześniej w panelu Stylu marnowaliśmy dużo miejsca na wyświetlanie ogólnych typów multimediów. Teraz, jeśli nie jest to coś niezwykłego, te elementy są ukryte przed selektorami.
- W panelu Styl możesz teraz najechać kursorem na selektor arkusza CSS, aby zobaczyć, do ilu elementów na stronie się odnosi.
- Nie chcesz jeszcze rezygnować z drukowania? Emulacja mediów drukowanych nadal pozwala sprawdzić, jak strona będzie wyglądać po wydrukowaniu. Funkcję tę przeniesiono do ustawień renderowania.
- Gdy wybierzesz element do sprawdzenia, automatycznie rozwiniemy i zamkniemy odpowiednie poddrzewo DOM. Trudno to wyjaśnić, ale dopiero zobaczysz, uwierzysz.
Jak zawsze przekazuj nam swoje opinie na Twitterze lub w komentarzach poniżej oraz zgłaszaj błędy na stronie crbug.com/new.
Do zobaczenia w przyszłym miesiącu!
Paul Bakaus i zespół Narzędzi deweloperskich