Terminal DevTools

Addy Osmani

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.

Terminal w Narzędziach deweloperskich przydaje się do szybkiego wprowadzania poprawek w wierszu poleceń podczas pracy z aplikacją internetową w Chrome.

Po użyciu opcji Kopiuj jako cURL w panelu Sieć mogę łatwo wkleić całe polecenie w terminalu Narzędzi deweloperskich i je uruchomić.

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.

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 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.

Możliwy jest też kompletny przepływ pracy git. To świetne rozwiązanie w przypadku git diff po utworzeniu treści w obszarze roboczym.

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

Rozpoczynaj nowe projekty przy użyciu git clone, yeoman lub innego narzędzia dostępnego z poziomu terminala.

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 aplikacji yo (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.

Użyj funkcji ls, aby wyświetlić listę nazw plików w bieżącym katalogu roboczym. Świetnie nadaje się do wizualizacji katalogów poza Workspace.

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:

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. 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.