Narzędzia programistyczne Chrome rozwijają się bardzo szybko, dlatego chcielibyśmy zwrócić Twoją uwagę na nowe funkcje i ulepszone komponenty. W szczególności porozmawiamy o kilku zmianach w interfejsie, profilowaniu JS o wysokiej rozdzielczości i nowych funkcjach Workspaces.
- Profilowanie o wysokiej rozdzielczości z dokładnością do 0,1 milisekundy
- Paski narzędzi zostały przeniesione na górę DevTools, a zastąpienia do panelu konsoli.
- Dodaliśmy kilka funkcji obszarów roboczych, które ułatwiają dodawanie, usuwanie i wyszukiwanie plików.
Profilowanie o wysokiej rozdzielczości
Profilowanie procesora to przydatna funkcja, która pozwala sprawdzić, jak wydajnie działa Twój kod JavaScript. Oprócz tradycyjnych widoków profilu wprowadziliśmy tego lata wykres słupkowy, który wizualizuje przetwarzanie kodu JavaScript na stronie w czasie. Dzięki temu możesz łatwo sprawdzić, jak głęboko sięga stos wywołań, a także, ile czasu zajmuje wykonanie poszczególnych funkcji.
Do niedawna zarówno tradycyjne reprezentacje ciężkie (od dołu do góry) i drzewiaste (od góry do dołu), jak i wykresy płomieniste pokazywały tylko procesy z dokładnością do 1 milisekundy. W większości przypadków jest to wystarczające. Jeśli jednak pracujesz nad czymś, w przypadku czego szybkość interfejsu jest naprawdę ważna, np. nad grą, rozdzielczość 1 ms może być zbyt duża, aby uzyskać istotne wyniki dotyczące tego, co powoduje, że witryna jest powolna lub interfejs wydaje się opóźniony. Aby włączyć profilowanie w wysokiej rozdzielczości (obecnie tylko w wersji Canary):
- Otwórz ustawienia Narzędzi deweloperskich.
- Na karcie Ogólne w sekcji Profilowanie włącz Profilowanie procesora w wysokiej rozdzielczości.
Oto przykład wykresu płomienistego widocznego w ramach normalnego profilowania i profilowania o wysokiej rozdzielczości, w którym profilujemy wczytywanie strony głównej HTML5Rocks.com:
Przy normalnej rozdzielczości profilowania czas procesu jest zawsze zaokrąglany w górę do następnej milisekundy, więc proces, który zajmuje tylko 0,1 milisekundy lub mniej, jest nadal raportowany jako zajmujący 1,0 milisekundy, a inne procesy mogą w ogóle nie być widoczne w stosie wywołań.
Profilowanie w wysokiej rozdzielczości powoduje duże obciążenie maszyny wirtualnej JavaScript, dlatego jest domyślnie wyłączone. Chociaż wygląda to o wiele lepiej niż w przypadku zwykłego profilowania, zalecamy korzystanie z tego rozwiązania tylko wtedy, gdy naprawdę potrzebujesz takiej dokładności.
Ulepszenia interfejsu narzędzi deweloperskich
W wersji Canary zawsze pojawiają się nowe funkcje, ale chcielibyśmy zwrócić Twoją uwagę na kilka istotnych zmian w interfejsie: przyciski przesuwają się do góry interfejsu, panele nawigacyjne i informacyjne na osi czasu oraz przesłonięcia zostały przeniesione do panelu bocznego konsoli.
Najpierw zobaczmy, skąd pochodzimy. Ponieważ rozmawiamy o osi czasu, spróbuję zabić 2 muchy jednym strzałem. Oto jak linia czasu wygląda obecnie w Chrome (wersja stabilna):
A tak wygląda teraz linia czasu.
Zwróć uwagę na te kwestie:
- Paski narzędzi i przyciski są teraz u góry ekranu, zarówno te po lewej stronie dotyczące konkretnej osi czasu, jak i te po prawej stronie dotyczące ogólnych funkcji Narzędzi deweloperskich.
- Rekordy osi czasu mają teraz strukturę zagnieżchnienia w panelu po lewej stronie. Możesz je nawet przewijać za pomocą klawiatury. Oprócz przewijania w górę i w dół za pomocą klawiszy strzałek w górę i w dół możesz też otwierać i zamykać wgniecione rekordy za pomocą klawiszy strzałek w lewo i w prawo.
- Szczegóły dotyczące czasu są teraz wyświetlane w panelu po prawej stronie w przypadku wybranego wpisu. (możesz też najechać kursorem na inne wpisy, aby wyświetlić ich informacje).
Teraz przyjrzyjmy się szufladzie konsoli. Aby otworzyć panel konsoli, naciśnij klawisz Escape w DevTools lub kliknij przycisk panelu konsoli 
. Panel konsoli pojawi się od dołu.
Domyślnie masz tam karty Console i Wyszukiwarka. Aby uzyskać dostęp do funkcji, która wcześniej była znana jako Zastąpienia, otwórz ustawienia DevTools i zaznacz pole „Pokaż widok 'Emulacja' w schowku konsoli”. Zamknij okno ustawień, a w konsoli pojawi się karta Emulacja, jak na zrzucie ekranu:
Możesz tam prowadzić emulację.
Powodem tej zmiany jest to, że wcześniej trzeba było wchodzić i wychodzić z Ustawień, aby zmienić zastąpienia emulacji, a potem wracać i oglądać stronę. Teraz możesz zmieniać zastąpienia emulacji, jednocześnie manipulując stylami.
Ulepszone obszary robocze
Workspaces to funkcja, która może znacznie uprościć proces tworzenia, a jednak nie cieszy się taką popularnością, jak na nią zasługuje. Dzięki Workspaces nie musisz eksperymentować i wprowadzać zmian w Narzędziach deweloperskich, a następnie kopiować i wklejać ich z powrotem do plików źródłowych. Możesz wprowadzać zmiany w Narzędziach deweloperskich, sprawdzać ich renderowanie w przeglądarce i zapisywać je w trwałej wersji lokalnej plików – bez wychodzenia z Chrome.
Jeśli nie czytałeś(-aś) jeszcze artykułu Chrome Developer Tools Revolutions 2013, zapoznaj się z nim, a potem wróć tutaj, aby dowiedzieć się, jak te funkcje zostały ulepszone w ostatnich miesiącach.
Łatwiejsze dodawanie plików
W czasie rewolucji w roku 2013 utworzenie nowego obszaru roboczego wymagało dodania folderu do obszarów roboczych, a następnie zmapowania go z zasobem sieci. Uprościliśmy ten proces do jednego kroku: kliknij prawym przyciskiem myszy w panelu źródeł po lewej stronie i wybierz Dodaj folder do obszaru roboczego. Otworzy się okno z plikami, w którym możesz wybrać nowy folder do dodania do obszarów roboczych. (nie dodaje aktualnie wyróżnionego folderu do Google Workspaces).
Tworzenie i usuwanie plików
Możesz teraz dodawać nowe pliki do katalogu lokalnego używanego w Workspaces w samym Workspaces. Wystarczy kliknąć prawym przyciskiem myszy folder w panelu źródeł po lewej stronie i wybrać Nowy plik.
Możesz też usuwać pliki w Workspaces. Kliknij plik prawym przyciskiem myszy w panelu źródeł po lewej stronie i wybierz Usuń plik.
Możesz też zduplikować plik, klikając Zduplikuj plik.
Odśwież
Teraz możesz tworzyć nowe pliki (lub usuwać pliki) bezpośrednio w obszarach roboczych, a katalog źródeł będzie automatycznie odświeżać i wyświetlać te nowe pliki. Jeśli nie, możesz kliknąć folder prawym przyciskiem myszy i w menu wybrać Odśwież, aby wymusić odświeżanie.
Ta funkcja jest też przydatna, gdy zmienisz pliki otwarte w innym edytorze i chcesz, aby zmiany pojawiły się w Narzędziach deweloperskich.
Wyszukiwanie w plikach
Trochę udoskonaliliśmy interfejs wyszukiwania w plikach. Teraz możesz też wyszukiwać ciągi znaków we wszystkich plikach w Twoich obszarach roboczych oraz we wszystkich plikach załadowanych do DevTools. Możesz wyszukać ciąg znaków lub wyrażenie regularne, a my dopasujemy każde wystąpienie w każdym pliku lub na każdej stronie. Aby wyszukiwać wiele plików w Workspaces (obecnie w wersji Canary):
- Otwórz panel konsoli, naciskając klawisz Escape, a potem kliknij kartę Wyszukiwarka obok opcji Konsola, aby otworzyć okno wyszukiwania.
LUB
Naciśnij Ctrl + Shift + F (Cmd + Opt + F na Macu), aby otworzyć okno wyszukiwania.
- Wpisz zapytanie w polu Źródła wyszukiwania i naciśnij Enter. Jeśli zapytanie jest wyrażeniem regularnym lub ma być nieczułe na wielkość liter, kliknij odpowiednie pole.
Listy ignorowanych
Wyszukiwanie w tekście plików lub filtrowanie według nazw plików może być bardzo żmudne, jeśli masz mnóstwo plików .git lub README.md, które zaśmiecają wyniki.
Dlatego dodaliśmy do Workspaces funkcję listy ignorowanych plików, dzięki której możesz wykluczać określone typy plików lub foldery podczas wyświetlania i wyszukiwania w obszarze roboczym.
Aby wyświetlić i zmienić bieżącą współdzieloną listę ignorowania w Workspaces:
- Otwórz Ustawienia w Narzędziach deweloperskich.
- Kliknij Obszar roboczy.
- W sekcji Wspólne w polu Folder wyklucza wzór możesz wyświetlać lub edytować wzory.
Domyślnie udostępniamy te wzorce globalnych wykluczeń:
Ten wyrażenie regularne wyklucza metadane z Git, SVN, Mercurial, plików projektu z Eclipse i IntelliJ, plików OS X DS_Store i kosza oraz kilku innych rzeczy, które warto zignorować, takich jak pamięć podręczna z Sass. Cały folder, w tym wszystkie podfoldery, jest wykluczony z interfejsu, aby nie był widoczny w interfejsie i nie był widoczny podczas wyszukiwania plików.
Listy ignorowanych fragmentów kodu dotyczące obszaru roboczego
Aby uzyskać bardziej szczegółowe wyniki, możesz też wykluczyć pliki i foldery w określonym obszarze roboczym, aby ograniczyć ilość niepotrzebnych wyników wyszukiwania. Wykluczone foldery nie będą też widoczne w katalogu źródeł.
Aby wykluczyć cały folder z obszaru roboczego, kliknij go prawym przyciskiem myszy w panelu źródeł po lewej stronie i wybierz Wyklucz folder. Aby wyświetlić mapowania i wykluczone foldery w danym folderze obszaru roboczego:
- Otwórz ustawienia Narzędzi deweloperskich.
- Kliknij Obszar roboczy.
- Zaznacz folder, który Cię interesuje.
- Kliknij Edytuj. Pojawi się okno „Edytuj system plików”. W tym oknie możesz dodawać i usuwać mapowania lub wykluczone foldery.
