DevTools ターミナルは、ターミナルの機能をブラウザで利用できる新しい Chrome DevTools 拡張機能です。アセットを pull する、git、grunt、wget、vim を使用するなどのタスクで Chrome とコマンドラインの間でコンテキストを切り替える場合、この拡張機能は時間の節約に役立つでしょう。
ブラウザのターミナルを使用する理由
開発段階では、オーサリング用のテキスト エディタ、テストとデバッグ用のブラウザ、パッケージ更新用のターミナル、curl ヘッダ、さらには Grunt を使ったビルドプロセスなど、いくつかのツールを使うことに慣れているでしょう。
開発中にツール間でコンテキストを切り替える必要があると、気が散り、効率の低下につながる可能性があります。特定のタイプのプロジェクトについて、ワークスペースを使用してブラウザを離れることなく、Chrome DevTools で直接コードのデバッグや作成を行う方法について説明しました。
DevTools ターミナル(作成者: Dmitry Filimonov)によって、同じウィンドウ内でコーディング、デバッグ、ビルドが可能になります。タブ、Ctrl、Git の色を使用して、日々のワークフローで使用していたターミナルと同じような感覚で操作できます。
ワークフロー
Chrome でオーサリングする際の個人用ワークフローは次のようになります。
- DevTools のターミナルを使用して
git clone
GitHub リポジトリ、touch
新しいファイルを作成するか、yo (yeoman)
アプリを作成します。新しいサーバーを起動してアプリもプレビューすることもできます。 - ワークスペース: Chrome 内でウェブアプリを編集、デバッグします。以前にサーバーを起動した場合は、ローカル プロジェクトをネットワーク ファイルにマッピングできます。Sass または Less を使用して、CSS プリプロセッサの変更を CSS ファイルにマッピングして戻すことができます。
- DevTools のターミナル: これで、ソース管理にコミットしたり、パッケージ マネージャー(npm、バウアー)を使用して依存関係を pull したり、ビルドプロセス(Grunt、make)を実行したりして、同じアプリの最適化されたバージョンを生成できるようになりました。
- ウィンドウの配置に慣れるまでには時間がかかるかもしれませんが、必要なもののほとんどをブラウザ内で行えるのは嬉しいことです。
インストール
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 ターミナルには、注意すべき制限事項がいくつかあります。Mac の Terminal.app や iTerm2 とは異なり、タブ、複数ウィンドウ、履歴の再生はまだサポートしていません。ただし、Chrome の新しいタブはいくつでも開くことができ、各タブに独自の DevTools ターミナル インスタンスを設定できます。この操作は [Chrome アプリ] 画面で行えます。
現在、この拡張機能は NPAPI に依存していますが、Native Messaging API を優先して来年のうちに段階的に廃止されます。DevTools のターミナル作成者である Dmitry Fillimonov 氏は、近い将来、NPAPI からこの API またはネイティブ クライアント API に移行することを計画しています。
まとめ
DevTools ターミナル(および Auxilio などの同様の拡張機能)を使用すると、開発中にエディタ、ブラウザ、コマンドラインを行き来する必要がなくなります。ブラウザ内の端末だけではうまくいかないかもしれませんが、この拡張機能はワークフローを補完するものとして役立つかもしれません。ぜひお試しいただき、使い勝手をお確かめください。