Terminal w Narzędziach deweloperskich to nowe rozszerzenie w Narzędziach deweloperskich do Chrome, które udostępnia w przeglądarce potęgę terminala. Jeśli zdarza Ci się przełączać kontekst między Chrome a wierszem poleceń, aby wykonać takie zadania jak pobieranie zasobów, używanie git, grunt, wget czy nawet vim, to rozszerzenie pomoże Ci zaoszczędzić czas.


Po co używać terminala w przeglądarce?
Podczas programowania przyzwyczaisz się pewnie do korzystania z kilku różnych narzędzi: edytora tekstu do tworzenia, przeglądarki do testowania i debugowania oraz terminala do aktualizowania pakietów, nagłówków curlingu, a nawet procesu kompilacji w Grunt.

Konieczność przełączania się między narzędziami podczas programowania może rozpraszać i prowadzić do spadku wydajności. W poprzednim artykule omawialiśmy, 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.

Terminal z Narzędzia deweloperskiego (opracowany przez Dmitrija Filimonava) kończy tę historię, umożliwiając kodowanie, debugowanie i kompilację w tym samym oknie. Masz dostęp do kolorów Tab, Ctrl i Git, dzięki czemu interfejs staje się znany z terminalu, którego używasz na co dzień.
Przepływ pracy

Mój osobisty proces tworzenia w Chrome wygląda teraz mniej więcej tak:
- Terminal narzędzi deweloperskich używa go do
git clone
repozytorium GitHub,touch
nowego pliku lub uruchomienia aplikacjiyo (yeoman)
, aby utworzyć aplikację. Jeśli chcę, mogę też uruchomić nowy serwer, aby wyświetlić podgląd aplikacji. - Obszary robocze: edytowanie i debugowanie aplikacji internetowej w Chrome. Jeśli uruchamiam serwer wcześniej, mogę zmapować mój projekt lokalny na moje pliki sieciowe. Mogę użyć metody Sass lub mniej, a zmiany wstępnego procesora CSS mogą być zmapowane na pliki CSS.
- Terminal w Narzędziach deweloperskich: mogę teraz zatwierdzić źródło kontroli, użyć menedżera pakietów (npm, bower), aby pobrać zależności lub uruchomić proces kompilacji (grunt, marka), aby wygenerować zoptymalizowaną wersję tej samej aplikacji.
- Chociaż przyzwyczajenie się do układania okien może zająć trochę czasu, przyjemnie jest robić większość potrzebnych elementów w przeglądarce.

Instalacja
Terminal Narzędzi deweloperskich możesz zainstalować z Chrome Web Store. Jeśli używasz Maca lub Linuksa i dodasz go do Chrome, możesz po prostu kliknąć „Zbadaj element” lub Ctrl + Shift + I
, aby otworzyć Narzędzia deweloperskie. Znajdziesz je na nowej karcie „Terminal”.
Użytkownicy systemu Windows muszą połączyć rozszerzenie z terminalem systemowym za pomocą serwera proxy Node.js. Aby przeprowadzić 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, korzystając z domyślnych opcji konfiguracji. W razie potrzeby możesz dostosować port i adres.

Ograniczenia
Terminal Narzędzi deweloperskich ma kilka ograniczeń, o których warto wspomnieć. W przeciwieństwie do aplikacji Terminal.app czy iTerm2 na Macu ten program nie obsługuje jeszcze kart, wielu okien ani odtwarzania historii. W Chrome możesz jednak otwierać dowolną liczbę nowych kart, z których każda może mieć własne wystąpienie terminala Narzędzi deweloperskich. Możesz to zrobić na ekranie Aplikacje Chrome:

To rozszerzenie korzysta obecnie z interfejsu NPAPI, który w przyszłym roku zostanie wycofany i zastąpiony interfejsem Native Messaging API. Autor narzędzi deweloperskich Terminal Dmitri Fillimonov w najbliższej przyszłości planuje zrezygnować z NPAPI na rzecz tego lub interfejsu API klienta natywnego.
Podsumowanie
Terminal w Narzędziach deweloperskich (i podobne do niego rozszerzenia, takie jak Auxilio) pomoże Ci uniknąć przełączania się między edytorem, przeglądarką i wierszem poleceń podczas programowania. Chociaż terminal w przeglądarce nie jest dla każdego coś przyjemnego, to rozszerzenie może być przydatnym uzupełnieniem Twojej pracy i zachęcamy do wypróbowania go i zobaczenia, co Ci się podoba.