DevTools Terminal は、新しい Chrome DevTools 拡張機能で、ターミナルの機能をブラウザで利用できます。アセットを pull する、git、grunt、wget、または vim を使用するといったタスクで、Chrome とコマンドラインをコンテキスト切り替えする場合、この拡張機能は時間の節約に役立つでしょう。


ブラウザのターミナルを使用する理由
開発中は、オーサリング用のテキスト エディタ、テストとデバッグ用のブラウザ、パッケージ更新用のターミナル、curl ヘッダー、さらには Grunt を使用したビルドプロセスなど、いくつかの異なるツールで作業することに慣れているでしょう。

開発中にツール間でコンテキストを切り替えると、気が散り、非効率につながる可能性があります。一部のタイプのプロジェクトでは、ブラウザから離れることなく、Chrome DevTools でワークスペースを使用して直接コードをデバッグしたり作成したりする方法についてすでに説明しました。

DevTools ターミナル(Dmitry Filimonov 作成)で処理が完了し、同じウィンドウ内でコーディング、デバッグ、ビルドを行うことができます。Tab、Ctrl、Git の色を使用できるため、日々のワークフローに使用しているターミナルに親しみを感じることができます。
ワークフロー

Chrome でオーサリングする際の私の個人的なワークフローは次のようになります。
- DevTools ターミナルを使って、GitHub リポジトリの
git clone
、新しいファイルのtouch
、アプリの作成にyo (yeoman)
を使用します。必要に応じて、新しいサーバーを起動してアプリをプレビューすることもできます。 - ワークスペース: Chrome 内でウェブアプリの編集とデバッグを行うことができます。以前にサーバーを起動した場合は、ローカル プロジェクトをネットワーク ファイルにマッピングできます。Sass または Less を使用して、CSS プリプロセッサの変更を CSS ファイルにマッピングし直すことができます。
- DevTools ターミナル: ソース管理に commit したり、パッケージ管理システム(npm、bower)を使用して依存関係をプルダウンしたり、ビルドプロセス(grunt、make)を実行して、同じアプリの最適化されたバージョンを生成したりできるようになりました。
- ウィンドウの配置に慣れるまで少し時間がかかるかもしれませんが、必要なほとんどのことをブラウザ内から行えるのは素晴らしいことです。

インストール
DevTools ターミナルは Chrome ウェブストアからインストールできます。Mac または Linux をお使いの場合、Chrome に追加してから [要素を検証] または Ctrl + Shift + I
を押すだけで DevTools が開き、新しい [ターミナル] タブからアクセスできるようになります。
Windows ユーザーは、Node.js プロキシを使用して拡張機能をシステム ターミナルに接続する必要があります。この設定を行うには、npm から devtools-terminal
モジュールをインストールします。
npm install -g devtools-terminal
次に、新しいコマンドライン ウィンドウを開き、devtools-terminal
を実行します。次に、DevTools を開き、[Terminal] タブで、デフォルトの構成オプションを使用してサーバーに接続します。必要に応じて、ポートとアドレスをさらにカスタマイズできます。

制限事項
DevTools Terminal には、注目に値する制限事項がいくつかあります。Mac の Terminal.app や iTerm2 とは異なり、タブ、複数のウィンドウ、履歴の再生はまだサポートされていません。Chrome の新しいタブは何個でも開くことができ、それぞれの新しいタブに独自の DevTools ターミナル インスタンスを設定できます。これは Chrome アプリの画面で行うことができます。

この拡張機能は現在 NPAPI を利用しています。NPAPI は今後 1 年かけて段階的に廃止され、Native Messaging API が採用されるようになっています。DevTools ターミナルの作成者である Dmitry Fillimonov 氏は、近い将来、NPAPI の使用をやめ、この API またはネイティブ クライアント API に移行することを計画しています。
まとめ
DevTools ターミナル(および Auxilio などの同様の拡張機能)を使用することで、開発中にエディタ、ブラウザ、コマンドラインを切り替える必要がなくなります。ブラウザ内ターミナルは皆の一杯ではないかもしれませんが、この拡張機能はワークフローの補完として役に立つかもしれません。ぜひお試しになり、気に入ったかどうかを確認してみてください。