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.
![Wyświetlam ramkę urządzenia](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/showing-device-frame-3affffde19137.png?hl=pl)
Menu orientacji urządzenia umożliwia wyświetlenie strony, gdy aktywne są różne elementy interfejsu systemu, np. pasek nawigacyjny i klawiatura.
![Wyświetlam elementy interfejsu systemu](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/showing-system-ui-element-5a0df6b67ac3f.png?hl=pl)
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).
![Wyświetlam ekran w rozdzielczości 4K](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/showing-4k-screen-22df6145e201a.png?hl=pl)
Możesz ograniczać działanie sieci bezpośrednio w interfejsie trybu urządzenia, bez konieczności przełączania się na panel Sieć.
![Ograniczanie wykorzystania sieci](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/network-throttling-0470dd0aaf34a.png?hl=pl)
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.
![Różnice źródeł w panelu Źródła](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/sources-diff-sources-pan-22ac17bd4f8bc.png?hl=pl)
Zmiany możesz śledzić na nowej karcie Szybkie źródło:
![Karta panelu szybkiego źródła](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/quick-source-drawer-tab-761e94ba221b5.png?hl=pl)
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.
![Wyświetlanie definicji zmiennej Sass](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/viewing-sass-variable-de-be353eb708fa.gif?hl=pl)
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”.
![Panel pliku manifestu](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/manifest-pane-c245b0c57f7ca.png?hl=pl)
Okienko Service Workers umożliwia sprawdzanie mechanizmów Service Worker zarejestrowanych dla bieżącej strony i wykonywanie na nich działań.
![Panel skryptu Service Worker](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/service-worker-pane-fa720984b18d1.png?hl=pl)
Okienko Wyczyść pamięć masową umożliwia wyczyszczenie wszelkiego rodzaju danych, dzięki czemu strona będzie miała czystą planszę.
![Wyczyść panel Miejsce na dane](https://developer.chrome.com/static/blog/devtools-digest-2016-06/image/clear-storage-pane-a824691dc0018.png?hl=pl)
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.