Narzędzia deweloperskie w Chrome działają szybko, więc chcemy zwrócić Twoją uwagę na nowe funkcje i ulepszenia wprowadzone w kilku komponentach. Za chwilę omówimy niektóre zmiany w interfejsie użytkownika, profilowanie JS w wysokiej rozdzielczości i nowe funkcje obszarów roboczych.
- Dokładność profilowania w wysokiej rozdzielczości wynosi teraz 0,1 milisekundy
- Paski narzędzi wzrosły na górę w Narzędziach deweloperskich, a zastąpienia zostały przeniesione do panelu konsoli
- Obszary robocze dodaliśmy kilka funkcji do dodawania, usuwania i wyszukiwania plików
Profilowanie wysokiej rozdzielczości
Profilowanie procesora jest bardzo przydatną funkcją pozwalającą sprawdzić wydajność JavaScriptu. Oprócz tradycyjnych widoków profilu wprowadziliśmy tego lata wykres Flame, który obrazuje przetwarzanie JavaScriptu strony w czasie. Można w nim łatwo sprawdzić, jak głęboko działa stos wywołań, a także jak długo trwa przetwarzanie poszczególnych funkcji.
Do niedawna zarówno tradycyjne przedstawienie „ciężkich” (z dołu w górę) i drzew (od góry do dołu) oraz wykres płomieniowy pokazywały procesy z dokładnością do 1 milisekundy. W przypadku większości aplikacji nie stanowi to problemu. Jeśli jednak pracujesz nad czymś, co jest naprawdę ważne w interfejsie użytkownika, np. w grze, rozdzielczość 1 milisekundy może być zbyt duża, aby uzyskać miarodajne wyniki dla tego, co sprawia, że strona działa wolno lub z powodu powolnego interfejsu użytkownika. Aby włączyć profilowanie wysokiej rozdzielczości (obecnie tylko w wersji Canary):
- Otwórz ustawienia Narzędzi deweloperskich.
- Na karcie Ogólne w sekcji Profiler włącz Profilowanie procesora w wysokiej rozdzielczości.
Oto przykład wykresu płomieniowego wyświetlanego przy normalnym profilowaniu w wysokiej rozdzielczości, gdzie profilujemy wczytywanie strony głównej HTML5Rocks.com:
Przy normalnej rozdzielczości profilowania czas przetwarzania jest zawsze zaokrąglany w górę do następnej milisekundy, więc proces, który trwa maksymalnie 0,1 milisekundy, jest raportowany jako czas trwania 1 milisekundy, a inne procesy mogą w ogóle nie być widoczne w stosie wywołań.
Profilowanie w wysokiej rozdzielczości ma duży wpływ na maszynę wirtualną JavaScript, dlatego jest domyślnie wyłączone. Co prawda ten model wygląda chłodniej niż normalna rozdzielczość profilowania, ale zalecamy korzystanie z niej tylko, jeśli naprawdę jest potrzebna precyzja.
Ulepszenia interfejsu Devtools
Chociaż w Canary zawsze pojawiają się nowe funkcje, chcemy zwrócić Twoją uwagę na kilka istotnych zmian w interfejsie: ogólne przyciski pojawiające się w górnej części interfejsu, panele nawigacyjne i informacyjne na osi czasu oraz przeniesienie zastąpień do panelu konsoli.
Zobaczmy, skąd pochodzimy. Ponieważ i tak mówimy o osi czasu, postaram się zabić pierwsze dwa ptaki za pomocą jednej pary zrzutów ekranu. Tak teraz wygląda oś czasu w Chrome (wersja stabilna):
Tak wygląda teraz oś czasu.
Zwróć uwagę na te kwestie:
- Paski narzędzi i przyciski są teraz u góry ekranu. Dotyczy to konkretnych osi czasu po lewej stronie i ogólnych Narzędzi deweloperskich po prawej stronie.
- Rekordy na osi czasu mają teraz strukturę zagnieżdżenia w panelu po lewej stronie. Możesz nawet przewijać je za pomocą klawiatury. Oprócz przewijania w górę i w dół klawiszy w górę i w dół możesz też używać klawiszy strzałek w lewo i w prawo do otwierania i zamykania zagnieżdżonych rekordów.
- Szczegóły czasu są teraz wyświetlane w panelu po prawej stronie wybranego wpisu. (Najeżdżaj kursorem na inne wpisy, aby zobaczyć ich informacje).
Przyjrzyjmy się teraz panelowi konsoli. Aby otworzyć panel konsoli, naciśnij Escape w Narzędziach deweloperskich lub naciśnij przycisk panelu konsoli 
. Szuflada otworzy się od dołu.
Domyślnie są tam dostępne karty Konsola i Wyszukiwanie. Aby uzyskać dostęp do funkcji, która wcześniej nosiła nazwę Zastąpienia, otwórz ustawienia Narzędzi deweloperskich i zaznacz pole obok opcji „Pokaż widok „Emulacja” w panelu konsoli”. Zamknij okno ustawień. W panelu konsoli wyświetli się karta Emulacja, taka jak na zrzucie ekranu:
Tam możesz przeprowadzić emulację.
Powodem tej zmiany jest to, że wcześniej trzeba było przejść do Ustawień, aby zmienić zastąpienia emulacji, a potem wrócić i wyświetlić swoją stronę. Teraz możesz zmieniać ustawienia zastąpień emulacji, nadal modyfikując style.
Ulepszone obszary robocze
Obszary robocze to funkcja, która pozwala nieco uprościć proces tworzenia, ale nie jest tak popularna, jak na to zasługuje. Dzięki obszarom roboczym zamiast eksperymentować i wprowadzać zmiany w Narzędziach deweloperskich oraz kopiować zmiany i wklejać je z powrotem do plików źródłowych, możesz wprowadzać zmiany w tych narzędziach, wyświetlać je renderowane w przeglądarce i zapisywać w trwałej, lokalnej wersji plików – a wszystko to bez wychodzenia z Chrome.
Jeśli nie znasz jeszcze artykułu Chrome Developer Tools Revolutions 2013, zapoznaj się z nim, a potem wróć tutaj, aby dowiedzieć się, jak ulepszyliśmy te funkcje w ciągu ostatnich kilku miesięcy.
Łatwiejsze dodawanie plików
W czasach artykułu o Rewolucjach z 2013 roku utworzenie nowego obszaru roboczego wymagało dodania folderu do obszarów roboczych, a następnie mapowania go na zasób sieciowy. Uprościliśmy ten proces do jednego kroku: wystarczy kliknąć prawym przyciskiem myszy w lewym panelu Źródła i wybrać Dodaj folder do obszaru roboczego. Otworzy się okno dialogowe pliku, w którym możesz wybrać nowy folder do dodania do obszarów roboczych. (wyróżniony aktualnie folder nie zostanie dodany do obszarów roboczych).
Tworzenie i usuwanie plików
Możesz teraz dodawać nowe pliki do katalogu lokalnego, którego używasz w obszarach roboczych w obrębie obszarów roboczych. Po prostu kliknij prawym przyciskiem myszy folder w panelu Źródła po lewej stronie i wybierz Nowy plik.
Pliki możesz też usuwać w obszarach roboczych. Kliknij prawym przyciskiem myszy plik w lewym panelu Źródła i wybierz Usuń plik.
Możesz też zduplikować plik, wybierając Duplikuj plik.
Odśwież
Teraz możesz tworzyć nowe pliki (lub usuwać je) bezpośrednio w obszarach roboczych, więc katalog Źródła również będzie automatycznie odświeżany i wyświetlony w tych nowych plikach. Jeśli tak nie jest, zawsze możesz kliknąć folder prawym przyciskiem myszy i wybrać Odśwież z menu, aby wymusić odświeżenie.
Jest to też przydatne, gdy zmienisz pliki otwarte w innym edytorze i chcesz, by te zmiany były widoczne w Narzędziach deweloperskich.
Wyszukiwanie w plikach
Trochę dopracowaliśmy interfejs wyszukiwania w plikach, a teraz możesz wyszukiwać ciągi znaków we wszystkich plikach w obszarach roboczych oraz we wszystkich plikach wczytywanych do Narzędzi deweloperskich. Możesz wyszukać ciąg lub wyrażenie regularne, a my dopasujemy każde wystąpienie w każdym pliku czy na stronie. Aby wyszukać wiele plików w obszarach roboczych (obecnie w wersji Canary):
- Otwórz panel konsoli, naciskając klawisz Escape, i kliknij kartę Szukaj 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 nie ma w nim rozróżniania wielkości liter, kliknij odpowiednie pole.
Listy ignorowanych fragmentów kodu
Przeszukiwanie tekstu plików i filtrowanie według ich nazw może być bardzo uciążliwe, jeśli masz mnóstwo plików .git lub README.md, które zaśmiecają wyniki.
Dlatego dodaliśmy do obszarów roboczych funkcję listy ignorowanych, aby umożliwić wykluczanie określonych typów plików i folderów podczas wyświetlania i przeszukiwania obszaru roboczego.
Aby wyświetlić i zmienić bieżącą udostępnioną listę ignorowanych w obszarach roboczych:
- Otwórz Ustawienia w Narzędziach deweloperskich.
- Kliknij Obszar roboczy.
- W sekcji Wspólne w polu Wzorzec wykluczania folderów możesz wyświetlać i/lub edytować wzorce.
Stosujemy następujące domyślne globalne wzorce wykluczania:
To wyrażenie regularne wyklucza metadane z Git, SVN, Mercurial, plików projektu z plików Eclipse i IntelliJ, OS X DS_Store i Kosza oraz kilku innych rzeczy, które warto zignorować, takich jak pamięć podręczna z Sass. Cały ich folder, w tym wszystkie jego elementy podrzędne, jest wykluczany z interfejsu – nie będzie wtedy widoczny ani nie będzie widoczny podczas wyszukiwania plików.
Listy ignorowanych fragmentów Workspace
Aby zwiększyć szczegółowość wyszukiwania, możesz też wykluczyć pliki i foldery w obszarze roboczym. Wykluczone foldery również nie będą widoczne w katalogu źródeł.
Aby wykluczyć z obszaru roboczego cały folder, kliknij go prawym przyciskiem myszy w panelu Źródła po lewej stronie i wybierz Wyklucz folder. Aby wyświetlić mapowania i wykluczone foldery dla danego folderu 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 którym możesz dodawać i usuwać mapowania oraz/lub wykluczone foldery.
