Терминал инструментов разработчика

Addy Osmani

DevTools Terminal — это новое расширение Chrome DevTools, которое расширяет возможности терминала в вашем браузере. Если вам когда-нибудь приходилось переключать контекст между Chrome и командной строкой для таких задач, как: извлечение ресурсов, использование git, grunt, wget или даже vim — вы можете найти это расширение полезным для экономии времени.

Терминал DevTools полезен для быстрой настройки командной строки изнутри Chrome во время работы над вашим веб-приложением.

После использования «Копировать как cURL» на панели «Сеть» я могу легко вставить полную команду в терминал DevTools и запустить ее.

Зачем использовать терминал в браузере?

Во время разработки вы, вероятно, привыкли работать с несколькими различными инструментами: текстовым редактором для разработки, браузером для тестирования и отладки и терминалом для обновления пакетов, свертыванием заголовков или даже процессом сборки с использованием Grunt.

Запуск задач сборки с помощью Grunt, не выходя из браузера.

Необходимость переключения контекстов между инструментами во время разработки может отвлекать и привести к неэффективности. Ранее мы говорили о том, как (для определенных типов проектов) вы можете отлаживать и писать код непосредственно в Chrome DevTools с помощью Workspaces , не выходя из браузера.

Также возможен полный рабочий процесс git. Отлично подходит для git diff после разработки в рабочей области.

Терминал DevTools (автор Дмитрий Филимонов) завершает эту историю, позволяя кодировать, отлаживать и выполнять сборку из одного и того же окна. Вы получаете доступ к вкладкам, клавишам Ctrl и даже цветам Git, что делает его привычным для терминала, который вы привыкли использовать в своем ежедневном рабочем процессе.

Рабочий процесс

Начинайте новые проекты с помощью git clone , yeoman или любого другого инструмента, доступного через терминал.

Мой личный рабочий процесс разработки в Chrome теперь выглядит примерно так:

• Терминал DevTools использует его для git clone , touch нового файла или запуска yo (yeoman) , чтобы создать приложение. Если я захочу, я могу запустить новый сервер и предварительно просмотреть приложение.
• Рабочие области: редактируйте и отлаживайте мое веб-приложение в Chrome. Если я запустил сервер раньше, я могу сопоставить свой локальный проект со своими сетевыми файлами. Я могу использовать Sass или Less и отображать изменения препроцессора CSS обратно в мои файлы CSS.
• Терминал DevTools: теперь я могу использовать систему контроля версий, использовать менеджер пакетов (npm, Bower) для удаления зависимостей или запустить процесс сборки (grunt, make) для создания оптимизированной версии того же приложения.
• Хотя привыкание к расположению окон может занять некоторое время, приятно иметь возможность добиться большей части того, что мне нужно, изнутри браузера.

Перечислите имена файлов в текущем рабочем каталоге, используя ls . Отлично подходит для визуализации каталогов за пределами вашего рабочего пространства.

Монтаж

DevTools Terminal можно установить из Интернет-магазина Chrome . Если вы пользователь Mac или Linux, после добавления его в Chrome вы можете просто «Проверить элемент» или Ctrl + Shift + I , чтобы открыть DevTools, и вы сможете получить к нему доступ через новый « Вкладка «Терминал». Пользователям Windows необходимо будет подключить расширение к системному терминалу с помощью прокси-сервера Node.js. Чтобы получить эту настройку, установите модуль devtools-terminal из npm: npm install -g devtools-terminal

Затем откройте новое окно командной строки и запустите devtools-terminal . Затем откройте DevTools и на вкладке «Терминал» подключитесь к серверу, используя параметры конфигурации по умолчанию. При необходимости вы сможете дополнительно настроить порт и адрес.

Ограничения

У терминала DevTools есть несколько ограничений, на которые стоит обратить внимание. В отличие от Terminal.app или iTerm2 на Mac, он пока не поддерживает вкладки, несколько окон или воспроизведение истории. Однако вы можете открыть столько новых вкладок Chrome, сколько захотите, каждая из которых может иметь собственный экземпляр терминала DevTools. Это можно сделать на экране приложений Chrome:

В настоящее время расширение поддерживает как светлую тему по умолчанию, так и темную тему.

В настоящее время это расширение использует NPAPI , от которого в следующем году будет постепенно отказываться в пользу Native Messaging API. Автор DevTools Terminal Дмитрий Филлимонов планирует в ближайшем будущем отказаться от NPAPI в пользу либо этого API, либо Native Client API.

Выводы

Терминал DevTools (и подобные ему расширения, такие как Auxilio ) могут помочь вам избежать переключения между редактором, браузером и командной строкой во время разработки. Хотя терминал в браузере, возможно, понравится не каждому, вы можете найти расширение полезным дополнением к вашему рабочему процессу, и мы рекомендуем вам попробовать его и посмотреть, понравится ли оно вам!