ATOMにWebブラウザ機能を追加するプラグイン「browser-plus」

WebデザインやWebプログラミングをしている人はブラウザでの動作確認は必見です。

デザインであればレイアウトが崩れていないか？Javascriptであればテストユニットを使う方法もありますが、DOMが絡んでくるのであれば思った通りの挙動をしているかどうか等。

windowsであれば「alt + tab」、macであれば「command + tab」のショートカットキーでアプリケーションを切り替える操作に慣れている人も多いのでないでしょうか。

今回は人気のテキストエディタ、ATOMにWebブラウザプレビュー機能を追加するプラグイン「browser-plus」の紹介です。

* browser-plusを動作させている画面

browser-plusは、ATOM本体にブラウザ( google chrome )が搭載されタブでブラウザを開いてくれるプラグインです。ATOMに搭載されるので、アプリケーションを切り替える手間が省けます。

browser-plusの対応している機能は以下に

1. ライブプレビュー ( ライブエディト )
2. 戻る/進むボタン
3. 開発ツール ( デバック用developerツール )
4. 画面の更新
5. 履歴
6. プレビュー
7. お気に入り (ブックマーク)

browser-plusのインストール

インストールはSettingのinstallから'browser-plus'と入力して検索するか、コマンドラインからインストールする場合は下記のコマンドでインストールできます。

apm install browser-plus

browser-plusの使い方

使い方も至って簡単でマウスを右クリックして'Open browser-plus'ボタンを押すか、'ctrl + alt + o'のショートカットキーで起動します。

* 起動直後はローカルとしてファイルが開かれます ( URLを入力してローカル以外のページも開けます )

* お馴染みのDev Toolも搭載されているので、javascriptのデバッグも問題ありません

その他にもURLバーにボタンが配置されていますが、「ブックマーク」や「Dev Tool起動」等、お馴染みの物ばかりなので直観的に使えると思います。

* 実際に自身の環境で使ったデモ動画

Summary

browser-plusはライブプレビュー機能が使えるので、ローカル環境でVagrantを使って開発してるフロントエンドデベロッパーにはピッタリのプラグインだと思います。

「ブラウザ確認の度にアプリケーションを切り替えるのが面倒くさい！」なんて人には特にオススメ出来るので気になった方はチェックしてみてください！