DevTools ターミナル

Addy Osmani 氏
Addy Osmani
Twitter GitHub

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

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

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

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

DevTools ターミナルで Grunt を実行する。
ブラウザを離れることなく、Grunt でビルドタスクを実行します。

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

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

DevTools ターミナル（作成者: Dmitry Filimonov）によって、同じウィンドウ内でコーディング、デバッグ、ビルドが可能になります。タブ、Ctrl、Git の色を使用して、日々のワークフローで使用していたターミナルと同じような感覚で操作できます。

ワークフロー

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

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

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

インストール

DevTools ターミナルは Chrome ウェブストアからインストールできます。Mac または Linux ユーザーの場合、Chrome に Chrome を追加した後、[要素を検証] または Ctrl + Shift + I を選択して DevTools を開きます。新しい [ターミナル] タブからアクセスできます。 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 に依存していますが、Native Messaging API を優先して来年のうちに段階的に廃止されます。DevTools のターミナル作成者である Dmitry Fillimonov 氏は、近い将来、NPAPI からこの API またはネイティブ クライアント API に移行することを計画しています。

まとめ

DevTools ターミナル（および Auxilio などの同様の拡張機能）を使用すると、開発中にエディタ、ブラウザ、コマンドラインを行き来する必要がなくなります。ブラウザ内の端末だけではうまくいかないかもしれませんが、この拡張機能はワークフローを補完するものとして役立つかもしれません。ぜひお試しいただき、使い勝手をお確かめください。