DevTools ターミナル

Addy Osmani

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

DevTools のターミナルは、ウェブアプリでの作業中に Chrome 内からコマンドラインを手軽に調整できるツールです。

[Network] パネルで [Copy as cURL] を使用すると、完全なコマンドを DevTools ターミナルに簡単に貼り付けて実行できます。

ブラウザのターミナルを使用する理由

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

ブラウザを離れることなく Grunt でビルドタスクを実行。

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

完全な Git ワークフローも使用できます。ワークスペースでオーサリングした後の git diff に最適です。

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

ワークフロー

git clone や yeoman など、ターミナルからアクセスできるツールで新しいプロジェクトを開始します。

Chrome でオーサリングする際の私の個人的なワークフローは次のようになります。

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

ls を使用して、現在の作業ディレクトリ内のファイル名を一覧表示します。ワークスペースの外部にあるディレクトリを可視化するのに最適です。

インストール

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 などの同様の拡張機能）を使用することで、開発中にエディタ、ブラウザ、コマンドラインを切り替える必要がなくなります。ブラウザ内ターミナルは皆の一杯ではないかもしれませんが、この拡張機能はワークフローの補完として役に立つかもしれません。ぜひお試しになり、気に入ったかどうかを確認してみてください。