Terminal DevTools

Addy Osmani

Twitter GitHub

DevTools Terminal to nowe rozszerzenie Narzędzi deweloperskich w Chrome, które pozwala korzystać z możliwości terminala w przeglądarce. Jeśli kiedykolwiek będziesz mieć problem z przełączaniem się w kontekście między Chrome a wierszem poleceń w celach takich jak pobieranie zasobów, korzystanie z git, grunt, wget, a nawet vim, to rozszerzenie może być oszczędne.

Terminal DevTools przydaje się do szybkich poprawek wiersza poleceń w Chrome podczas pracy w aplikacji internetowej.

Po użyciu polecenia Kopiuj jako cURL w panelu Network (Sieć) mogę z łatwością wkleić pełne polecenie do terminala DevTools i uruchomić je.

Po co używać terminala w przeglądarce?

Podczas programowania przyzwyczaisz się pewnie do pracy z kilkoma różnymi narzędziami: edytorem tekstu do tworzenia, przeglądarką do testowania i debugowania i terminalem do aktualizowania pakietów, nagłówkami curlingiem, a nawet procesem kompilacji przy użyciu Grunt.

Uruchamianie zadań kompilacji w Grunt bez konieczności opuszczania przeglądarki.

Konieczność przełączania się między narzędziami podczas programowania może rozpraszać i obniżać wydajność. Mówiliśmy wcześniej o tym, jak (w przypadku niektórych typów projektów) debugować i tworzyć kod bezpośrednio w Narzędziach deweloperskich w Chrome za pomocą obszarów roboczych bez opuszczania przeglądarki.

Możliwe jest też pełny przepływ pracy git. Dobrze sprawdza się w przypadku git diff po utworzeniu w obszarze roboczym.

Dopełnia on historię z narzędzia DevTools Terminal (autor: Dmitrij Filimonow), umożliwiając kodowanie, debugowanie i kompilację w tym samym oknie. Masz dostęp do kolorów Tab, Ctrl, a nawet kolorów Git, co sprawia, że wydaje się znajoma dla terminala, którego używasz na co dzień.

Przepływ pracy

Rozpocznij nowe projekty przy użyciu polecenia git clone, yeoman lub dowolnego innego narzędzia dostępnego przez terminal.

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

• Terminal DevTools używa go do git clone repozytorium GitHub, touch nowego pliku lub uruchamiania yo (yeoman), aby utworzyć aplikację. Jeśli chcę, mogę też uruchomić nowy serwer, aby wyświetlić podgląd aplikacji.
• Obszary robocze: edytuj i debuguj aplikację internetową w Chrome. Po uruchomieniu serwera wcześniej mogę zmapować mój projekt lokalny na pliki sieciowe. Mogę używać metody Sass lub Less i mapować zmiany preprocesora CSS z powrotem na pliki CSS.
• Terminal DevTools: mogę teraz zatwierdzić kontrolę źródła, użyć menedżera pakietów (npm, bower) do pobrania zależności lub uruchomić proces kompilacji (grunt, make), aby wygenerować zoptymalizowaną wersję tej samej aplikacji.
• Przyzwyczajenie się do rozmieszczenia okien może trochę potrwać, ale dobrze jest robić wszystko, co potrzebne, bezpośrednio w przeglądarce.

Wyświetl listę nazw plików w bieżącym katalogu roboczym za pomocą polecenia ls. Doskonale nadaje się do wizualizacji katalogów spoza Workspace.

Instalacja

Terminal DevTools można zainstalować z Chrome Web Store. Jeśli używasz komputera z systemem macOS lub Linux, po dodaniu tego interfejsu do Chrome wystarczy kliknąć „Zbadaj element” lub Ctrl + Shift + I, aby otworzyć Narzędzia deweloperskie. Dostęp do nich uzyskasz 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 przy użyciu domyślnych opcji konfiguracji. W razie potrzeby możesz dostosować port i adres.

Ograniczenia

Terminal DevTools ma kilka ograniczeń. W przeciwieństwie do Terminal.app i iTerm2 na Macu nie obsługuje jeszcze kart, wielu okien ani odtwarzania historii. Możesz jednak otworzyć dowolną liczbę nowych kart w Chrome – każda z nich może mieć własną instancję Terminala w Narzędziach deweloperskich. Możesz to zrobić na ekranie Aplikacje Chrome:

Obecnie rozszerzenie obsługuje zarówno domyślny jasny, jak i ciemny motyw.

To rozszerzenie korzysta obecnie z interfejsu NPAPI, który w przyszłym roku zostanie wycofany i zastąpiony interfejsem Native Messaging API. Dmitry Fillimonov, autor narzędzia Terminal, planuje w najbliższej przyszłości zrezygnować z NPAPI na rzecz tego interfejsu API lub interfejsu Native Client API.

Podsumowanie

DevTools Terminal (i podobne rozszerzenia, takie jak Auxilio) pomaga uniknąć przełączania się między edytorem, przeglądarką i wierszem poleceń podczas programowania. Chociaż terminal w przeglądarce może nie sprawdzić się w każdym przypadku, rozszerzenie może stanowić przydatne uzupełnienie Twojej pracy. Zachęcamy do wypróbowania go i sprawdzenia, jak Ci się podoba.