Terminal DevTools

Addy Osmani

Terminal w Narzędziach deweloperskich to nowe rozszerzenie narzędzi deweloperskich w Chrome, które zapewnia większą funkcjonalność w Twojej przeglądarce. Jeśli zdarza Ci się przełączać się między Chrome a wierszem poleceń, aby wykonywać takie zadania jak pobieranie zasobów, korzystanie z git, grunt, wget czy nawet vim, to rozszerzenie może Ci pomóc zaoszczędzić czas.

Terminal w Narzędziach deweloperskich świetnie się sprawdza do szybkiego wprowadzania zmian w wierszu poleceń.
Terminal w Narzędziach deweloperskich jest przydatny do szybkiego wprowadzania zmian w wierszu poleceń w Chrome podczas pracy nad aplikacją internetową.
Używanie curl w terminalu w Narzędziach deweloperskich.
Po kliknięciu Kopiuj jako cURL w panelu Sieć mogę łatwo wkleić pełne polecenie w terminalu DevTools i je uruchomić.

Dlaczego warto korzystać z terminala w przeglądarce?

Podczas tworzenia prawdopodobnie używasz kilku różnych narzędzi: edytor tekstu do tworzenia, przeglądarkę do testowania i debugowania oraz terminal do aktualizowania pakietów, nagłówków curl lub nawet procesu kompilacji za pomocą Grunta.

Uruchamianie Grunta w terminalu w Narzędziach deweloperskich.
Wykonywanie zadań kompilacji za pomocą Grunta bez konieczności opuszczania przeglądarki.

Przełączanie się między narzędziami podczas tworzenia może być uciążliwe i prowadzić do nieefektywności. Wcześniej pisaliśmy o tym, jak (w przypadku niektórych typów projektów) można debugować i tworzyć kod bezpośrednio w narzędziach deweloperskich w Chrome, korzystając z Workspaces bez wychodzenia z przeglądarki.

Przepływ pracy w Git.
Możliwe jest też pełne przetwarzanie za pomocą Gita. To świetne rozwiązanie do git diff po autoryzowaniu w Workspace.

Terminal w Narzędziach deweloperskich (autorstwa Dmitrija Filimonowa) uzupełnia tę historię, umożliwiając kodowanie, debugowanie i tworzenie w tym samym oknie. Masz dostęp do klawiszy Tab, Ctrl, a nawet kolorów Git, dzięki czemu terminal jest podobny do tego, którego używasz na co dzień.

Przepływ pracy

Proces tworzenia.
Rozpoczynaj nowe projekty za pomocą git clone, yeoman lub innego narzędzia dostępnego w terminalu.

Mój osobisty proces tworzenia w Chrome wygląda teraz mniej więcej tak:

  • Terminal DevTools służy do git clone repozytorium GitHub, touch nowego pliku lub uruchomienia yo (yeoman), aby utworzyć aplikację. Jeśli chcesz, możesz uruchomić nowy serwer, aby wyświetlić podgląd aplikacji
  • Przestrzenie robocze:edytowanie i debugowanie mojej aplikacji internetowej w Chrome. Jeśli serwer został uruchomiony wcześniej, mogę zmapować lokalny projekt na pliki sieciowe. Mogę używać Sass lub Less i mapować zmiany w przetwarzaczu CSS na pliki CSS.
  • Terminal DevTools: mogę teraz przekazywać zmiany do kontroli wersji, używać menedżera pakietów (npm, bower), aby pobierać zależności, lub uruchamiać proces kompilacji (grunt, make), aby wygenerować zoptymalizowaną wersję tej samej aplikacji.
  • Przyzwyczajenie się do rozmieszczenia okien może zająć trochę czasu, ale podoba mi się, że mogę wykonać większość potrzebnych czynności w przeglądarce.
Użyj polecenia ls w terminalu.
Wyświetl nazwy plików w bieżącym katalogu roboczym za pomocą polecenia ls. Jest to przydatne do wizualizacji katalogów spoza Google Workspace.

Instalacja

Terminal Narzędzi deweloperskich można zainstalować ze sklepu Chrome Web Store. Jeśli używasz komputera Mac lub systemu Linux, po dodaniu rozszerzenia do Chrome możesz po prostu kliknąć „Sprawdź element” lub Ctrl + Shift + I, aby otworzyć narzędzia dla programistów. Dostęp do nich będziesz mieć na nowej karcie „Terminal”. Użytkownicy systemu Windows muszą połączyć rozszerzenie z terminalem systemowym za pomocą serwera proxy Node.js. Aby uzyskać tę konfigurację, zainstaluj moduł devtools-terminal z npm: npm install -g devtools-terminal

Następnie otwórz nowe okno wiersza poleceń i uruchom devtools-terminal. Następnie otwórz Narzędzia deweloperskie i na karcie „Terminal” połącz się z serwerem, używając domyślnych opcji konfiguracji. W razie potrzeby możesz dostosować port i adres.

Terminal DevTools umożliwia dostosowywanie szczegółów połączenia podczas konfiguracji.

Ograniczenia

Terminal w narzędziach dla programistów ma kilka ograniczeń, o których warto pamiętać. W przeciwieństwie do Terminal.app czy iTerm2 na Macu nie obsługuje jeszcze kart, wielu okien ani odtwarzania historii. Możesz jednak otworzyć dowolną liczbę nowych kart w Chrome, z których każda może mieć własny terminal Narzędzi deweloperskich. Możesz to zrobić na ekranie Aplikacje w Chrome:

Terminal w Narzędziach dla programistów obsługuje zarówno jasny, jak i ciemny motyw.
Obecnie rozszerzenie obsługuje domyślny jasny motyw i ciemny motyw.

To rozszerzenie korzysta obecnie z interfejsu NPAPI, który w ciągu najbliższego roku zostanie wycofany na rzecz interfejsu Native Messaging API. Autor DevTools Terminal, Dmitry Fillimonov, planuje w najbliższej przyszłości odejść od interfejsu NPAPI na rzecz tego interfejsu lub interfejsu Native Client API.

Podsumowanie

Terminal DevTools (i rozszerzenia podobne do niego, np. Auxilio) może ułatwić Ci unikanie przełączania się między edytorem, przeglądarką i wierszem poleceń podczas tworzenia aplikacji. Terminal w przeglądarce może nie być dla wszystkich, ale rozszerzenie może być przydatnym uzupełnieniem Twojego procesu pracy. Zachęcamy do wypróbowania tego rozwiązania i sprawdzenia, czy Ci odpowiada.