DevTools ターミナル

Addy Osmani

DevTools Terminal は、ブラウザにターミナルのパワーをもたらす新しい Chrome DevTools 拡張機能です。アセットの pull ダウン、git、grunt、wget、vim の使用などのタスクで、Chrome とコマンドラインとの間でコンテキストを切り替える必要がある場合は、この拡張機能が便利です。

DevTools ターミナルは、コマンドラインをすばやく調整するのに適しています。
DevTools ターミナルは、ウェブアプリの作業中に Chrome 内からコマンドラインを手軽に調整するのに便利です。
DevTools ターミナルで cURL を使用する。
ネットワーク パネルで [cURL としてコピー] を使用すると、コマンドの全体を DevTools ターミナルに簡単に貼り付けて実行できます。

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

開発中は、作成用のテキスト エディタ、テストとデバッグ用のブラウザ、パッケージの更新、ヘッダーの Curl、Grunt を使用したビルドプロセスなど、いくつかの異なるツールを使用していることでしょう。

DevTools ターミナルで Grunt を実行している様子。
ブラウザから離れることなく Grunt でビルドタスクを実行。

開発中にツール間でコンテキストを切り替える必要がある場合、注意が散漫になり、非効率につながる可能性があります。以前、（特定のタイプのプロジェクトの場合）ブラウザを離れることなく、ワークスペースを使用して Chrome DevTools 内で直接コードをデバッグして作成する方法について説明しました。

Git ワークフロー。
完全な Git ワークフローも可能です。Workspace で作成した後の git diff に最適です。

DevTools ターミナル（Dmitry Filimonov 氏）は、同じウィンドウ内でコードの記述、デバッグ、ビルドを可能にします。タブ、Ctrl、さらには Git の色にもアクセスできるため、日々のワークフローで使用しているターミナルに慣れているように感じられます。

ワークフロー

作成ワークフロー。
git clone、yeoman、またはターミナルからアクセスできるその他のツールを使用して、新しいプロジェクトを開始します。

Chrome で作成する私の個人的なワークフローは、次のようになります。

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

インストール

DevTools ターミナルは Chrome ウェブストアからインストールできます。Mac または Linux をご利用の場合は、Chrome に追加したら、[要素の検査] または Ctrl + Shift + I で DevTools を開き、新しい [Terminal] タブからアクセスできます。Windows ユーザーは、Node.js プロキシを使用して拡張機能をシステム ターミナルに接続する必要があります。この設定を取得するには、npm から devtools-terminal モジュールをインストールします。 npm install -g devtools-terminal

次に、新しいコマンドライン ウィンドウを開いて devtools-terminal を実行します。次に、DevTools を開き、[Terminal] タブで、デフォルトの構成オプションを使用してサーバーに接続します。必要に応じて、ポートとアドレスをさらにカスタマイズできます。

DevTools ターミナルでは、セットアップ時に接続の詳細をカスタマイズできます。

制限事項

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

DevTools ターミナルは、ライトモードとダークモードの両方をサポートしています。
現在、この拡張機能はデフォルトのライトモードとダークモードの両方をサポートしています。

この拡張機能は現在 NPAPI に依存していますが、NPAPI はネイティブ メッセージング API に置き換えられて、今後 1 年間で段階的に廃止されます。DevTools ターミナルの作成者である Dmitry Fillimonov は、近い将来、NPAPI からこの API またはネイティブ クライアント API に移行する予定です。

まとめ

DevTools ターミナル（および Auxilio などの同様の拡張機能）を使用すると、開発中にエディタ、ブラウザ、コマンドラインとの間で切り替える必要がなくなります。ブラウザ内ターミナルは万人向けではありませんが、ワークフローを補完する便利な拡張機能としてお役立ていただけるかもしれません。ぜひお試しください。