Google I/O 2016 to już koniec. DevTools mocno zaangażował się na konferencji I/O, m.in. podczas rozmowy Paula Bakausa, Paula Ireland i Setha Thompsona o przyszłości narzędzi DevTools. Obejrzyj film poniżej lub przeczytaj dalszą część wiadomości, aby dowiedzieć się więcej o planach dotyczących Narzędzi deweloperskich w 2016 roku i kolejnych latach.
Tworzenie
Narzędzia deweloperskie mają ułatwić każdy etap cyklu tworzenia stron internetowych. Prawdopodobnie wiesz, że Narzędzia deweloperskie mogą pomóc w debugowaniu lub profilowaniu witryny, ale nie wiesz, jak za ich pomocą utworzyć witrynę. „Tworzenie” to czynność polegająca na tworzeniu witryny. Jednym z celów w najbliższej przyszłości jest ułatwienie iteracji, eksperymentowania i emulowania witryny na wielu urządzeniach.
Tryb urządzenia
Zespół Narzędzi deweloperskich nieprzerwanie ulepsza Tryb urządzenia – pierwszą dużą aktualizację w Chrome 49. Zapoznaj się z postem z marca (nowym trybem urządzenia w świecie zdominowanym przez urządzenia mobilne), który zawiera omówienie aktualizacji. Głównym celem jest zapewnienie bezproblemowego wyświetlania i emulowania witryny we wszystkich formatach.
Oto krótkie podsumowanie niektórych aktualizacji trybu urządzenia, które pojawiły się w wersji Canary od czasu, gdy opublikowaliśmy ten artykuł w marcu.
Wyświetlając stronę jako konkretne urządzenie, możesz lepiej poznać jej zawartość, pokazując elementy sprzętowe na stronie.
Menu orientacji urządzenia umożliwia wyświetlenie strony, gdy aktywne są różne elementy interfejsu systemu, np. pasek nawigacyjny i klawiatura.
Udoskonaliliśmy też sposób prezentowania treści na komputerach. Dzięki funkcji powiększenia w trybie urządzenia możesz emulować ekrany pulpitu większe od ekranu, na którym faktycznie pracujesz, na przykład ekran o rozdzielczości 4K (3840 x 2160 pikseli).
Możesz ograniczać działanie sieci bezpośrednio w interfejsie trybu urządzenia, bez konieczności przełączania się na panel Sieć.
Różnice źródłowe
Wielokrotne modyfikowanie stylu witryny pozwala łatwo zapomnieć o wprowadzonych zmianach. Aby rozwiązać ten problem, Narzędzia deweloperskie będą korzystać z wizualnych wskazówek na marginesie numeru wiersza w panelu Źródła, aby ułatwić śledzenie zmian. Usunięte linie są oznaczone czerwoną linią, zmodyfikowane linie są podświetlone na fioletowo, a nowe są podświetlane na zielono.
Zmiany możesz śledzić na nowej karcie Szybkie źródło:
Po raz pierwszy karta Szybkie źródło pozwala skupić się na kodzie źródłowym HTML lub JavaScript w tym samym czasie co reguły CSS. Ponadto gdy klikniesz właściwość CSS w panelu Style, karta Szybkie źródło automatycznie przejdzie do definicji w źródle i ją podświetli.
Włącz eksperyment sources diff w Chrome Canary, aby go wypróbować już dziś.
Edytowanie Sass na żywo
Oto zapowiedź kilku nadchodzących głównych ulepszeń w procesie edycji Sass. Te funkcje są na bardzo wczesnym etapie eksperymentalnym. W dalszym poście skontaktujemy się z Tobą, gdy będą one gotowe do wypróbowania.
Zasadniczo DevTools będzie umożliwiać wyświetlanie i edytowanie zmiennych Sass w oczekiwany sposób. Kliknij wartość skompilowaną ze zmiennej Sass, aby przejść do definicji zmiennej na nowej karcie Szybkie źródła.
Podczas edytowania wartości skompilowanej ze zmiennej Sass zmiana wprowadza zmianę zmiennej Sass, a nie tylko wybranej wybranej właściwości.
Progresywne aplikacje internetowe
Na liście konferencji Google I/O 2016 o internecie i Chrome zauważysz ogromny temat, który pojawia się w świecie tworzenia stron internetowych: progresywne aplikacje internetowe.
Wraz z pojawieniem się modelu progresywnych aplikacji internetowych Narzędzia deweloperskie rozwijają się błyskawicznie, zapewniając deweloperom dostęp do narzędzi potrzebnych do tworzenia świetnych progresywnych aplikacji internetowych. Zdaliśmy sobie sprawę, że tworzenie i debugowanie tych nowoczesnych aplikacji często wiąże się z niepowtarzalnymi wymaganiami, więc DevTools poświęciło cały panel do tworzenia progresywnych aplikacji internetowych. Gdy otworzysz Chrome Canary, zobaczysz, że panel Zasoby został zastąpiony panelem Aplikacja. Wszystkie dotychczasowe funkcje z panelu Zasoby są nadal dostępne. Znajdziesz tam tylko kilka nowych paneli zaprojektowanych z myślą o tworzeniu progresywnych aplikacji internetowych:
W panelu pliku manifestu znajduje się wizualna reprezentacja pliku manifestu aplikacji. Tutaj możesz ręcznie aktywować przepływ pracy „Dodaj do ekranu głównego”.
Okienko Service Workers umożliwia sprawdzanie mechanizmów Service Worker zarejestrowanych dla bieżącej strony i wykonywanie na nich działań.
Okienko Wyczyść pamięć masową umożliwia wyczyszczenie wszelkiego rodzaju danych, dzięki czemu strona będzie miała czystą planszę.
JavaScript
Przekraczanie granic między frontendem a backendem to trudna część tworzenia stron internetowych w Fullstack. Jeśli podczas debugowania aplikacji internetowej Twój backend zwraca kod stanu 500, osiągasz limit przydatności Narzędzi deweloperskich – musisz zmienić konteksty i uruchomić środowisko programistyczne backendu, aby debugować problem.
Jednak w przypadku backendów zapisywanych w środowisku Node.js granice między frontendem a backendem zaczynają się zacierać. Ponieważ Node.js działa w silniku JavaScript V8 (tym samym silniku, który działa w Google Chrome), chcieliśmy umożliwić debugowanie Node.js z poziomu Narzędzi deweloperskich. Dzięki narzędziom V8, DevTools i Google Cloud Platform for Node.js możesz teraz korzystać ze wszystkich zaawansowanych funkcji debugowania dostępnych w tych narzędziach do analizowania aplikacji Node.js. Funkcja ta jest już dostępna w nocnych kompilacjach Node.js, jednak integracja tych narzędzi jest w dalszym ciągu dopracowana, zanim udostępnimy ją w dużej wersji. Debugowanie aplikacji Node.js z poziomu Narzędzi deweloperskich będzie kiedyś tak proste, jak przekazanie kodu node --inspect app.js i połączenie z Narzędzi deweloperskich w dowolnym oknie Chrome.
Chociaż istniejące narzędzia, takie jak Node Inspector, oferują środowisko debugowania oparte na interfejsie GUI, nowa integracja z narzędziami DevTools w środowisku Node.js pozostanie aktualna dzięki najnowszym funkcjom debugowania, takim jak debugowanie stosu asynchronicznego, blackboxing i obsługa ES6.