DevTools Digest (CDS Edition): A Glimpse to the Future and RAIL Profiling

Paweł Bakaus
Paul Bakaus

Dowiedz się, jak Narzędzia deweloperskie przenoszą się na urządzenia mobilne dzięki nowemu, uproszczonemu trybowi urządzenia, który zawsze jest włączony. Używaj przycisków kolorów, aby szybko dodawać kolory do selektorów i dowiedzieć się, jakie funkcje pojawią się wkrótce w Narzędziach deweloperskich.

Spojrzenie w przyszłość tworzenia treści

Właśnie powracamy z konferencji Chrome Dev Summit, podczas której pokazaliśmy, jak wygląda praca z Narzędziami deweloperskimi teraz i w przyszłości. Zazwyczaj w tym podsumowaniu nie wspominam o funkcjach, które są nadal eksperymentami lub wciąż rozwijają się, ale tym razem robię wyjątek. Jeśli nie masz czasu, by obejrzeć prezentację, możesz skorzystać z tego sedna:

Tryb urządzenia – wersja 2

Nadal intensywnie pracujemy nad nową, odważną rewolucją trybu urządzenia, ale chcemy dać wszystkim szansę na jej wypróbowanie, dlatego włączyliśmy ją już w wersji Canary. Dzięki tym zmianom wprowadzamy Narzędzia deweloperskie w przyszłość, w której główną rolę odgrywają urządzenia mobilne, a programowanie na urządzeniach mobilnych jest domyślną opcją, a programowanie na komputery jest „dodatkiem”. Powinno to nastąpić w ciągu najbliższych kilku tygodni. Gdy skończymy, publikujemy rozszerzony post na blogu.

Zaawansowana inspekcja animacji

Funkcja inspekcji animacji w toku zapewnia pełny, szczegółowy wgląd w to, co się dzieje na tym, co się porusza. Zamiast pokazywać przejście do jednego elementu naraz, dodaliśmy metody heurystyczne, które grupują złożone animacje, dzięki czemu możesz się skupić na tym, co widzisz. Obejrzyj film. Gdy program będzie w pełni dostępny, opublikujemy większe, osobne posty na blogu.

Tryb układu (zapowiedź)

Jeszcze nie wszystko gotowe, ale obiecuję wprowadzenie nowego trybu układu. Nie mogę się doczekać, aż w pełni je wdrożę. Tryb układu dodaje możliwości edycji typu WYSIWYG do Narzędzi deweloperskich w przypadku dowolnego elementu na stronie. Na razie wysokość, szerokość, dopełnienia i marginesy można edytować w kontekście. Potrzebujemy trochę więcej czasu, aby jeszcze raz móc do Ciebie dołączyć. Będziemy jednak informować na bieżąco.

Profilowanie wydajności za pomocą zaktualizowanego panelu Oś czasu

W ramach szerszego wprowadzenia nowego modelu wydajności RAIL nastąpiło setki mniejszych i większych zmian w panelu Oś czasu. W ramach tych działań udało się w znacznym stopniu przekształcić i ulepszyć historię profilowania wydajności. Dlatego zamiast prezentować każdą z poszczególnych zmian z osobna, nasz twórczyni, Paul Ireland, pokazał nam, jak prawidłowo debugować działanie witryny – w tym przypadku na scenie mobilną stronę Hotel Tonight. Wśród nowo ogłoszonych funkcji są m.in. pasy do filmów pobierających i efektywnościowych, dołączoną kaskadę sieci, podsumowanie widoku drzewa oraz możliwość wyświetlania kosztów wydajności według domeny i pliku.

Z łatwością dodawaj kolory pierwszego planu i tła do dowolnego elementu

Aby dodać do elementu właściwość koloru tła lub koloru, nie wystarczyło po prostu otworzyć selektor kolorów. Zamiast tego najczęściej wpisujesz hasło „tło: czerwone” i za każdym razem, gdy pojawi się ikona selektora kolorów, a następnie wybierasz odpowiedni kolor.

Pomyśleliśmy, że możemy to uprościć. Dodaliśmy dwa 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 pozostałych

  • Straciliśmy sporo miejsca w panelu Styl, gdy wyświetlamy ogólne rodzaje mediów. Teraz ukryjemy te elementy przed Twoimi selektorami, chyba że jest to coś dziwnego.
  • Możesz teraz przytrzymać selektor arkusza CSS w panelu Styl, aby zobaczyć, do ilu elementów na stronie się odnosi.
  • Jeszcze nie rezygnujesz z drukowania? Emulacja materiałów drukowanych wciąż jest dostępna, dzięki czemu możesz sprawdzić, jak Twoja strona będzie wyglądać po wydrukowaniu. Przenieśliśmy ją właśnie do ustawień renderowania.
  • Przy wybieraniu elementu do sprawdzenia automatycznie rozwijamy i zamykamy odpowiednie podrzędne drzewo DOM. Trudno to wyjaśnić, widzenie to wierzenie.

Jak zawsze, podziel się z nami swoją opinią na Twitterze lub w komentarzach poniżej i prześlij błędy na stronie crbug.com/new.

Do następnego miesiąca.
Paul Bakaus i zespół Narzędzi deweloperskich