VSCode上でブラウザ表示を行う方法【ワードプレス開発者向け】

今回は VSCode 上でブラウザ（Google Chrome）表示を行う方法について解説します。

これにより、VSCode でウェブページをを表示しながらウェブサイト開発を行うことができます。

ウェブページを表示した際の VSCode の画面は ↑ のようになります。

VSCode でワードプレスのテーマ等を開発する際には、下記のような作業を繰り返すと思います。

• PHP を編集する
• ウェブサイトを表示して確認する

１つ目の作業は VSCode で（他の開発環境かもしれませんが）、２つ目の作業はウェブブラウザで行うと思います。

で、通常なら「VSCode」と「ウェブブラウザ」の２つの画面を行ったり来たりして開発を行う必要があります。でもこれって面倒じゃないですか？

１つ目の画面だけで開発が全て完結したら楽だと思ったことないですか？

VSCode でブラウザ表示を行うことができれば、VSCode だけでワードプレスの開発を行うことができるようになります。

VSCode でブラウザ表示を行う方法

それではその VSCode でブラウザを表示する方法について解説していきます。

Google Chrome のインストール

今回 VSCode 上でブラウザ表示を行うためには「Browser Preview」を利用します。このプラグインには「Google Chrome」が必要ですので、事前にインストールしておいてください。

下記 URL からダウンロードページに飛べるはずです。

https://www.google.com/intl/ja_jp/chrome/

スポンサーリンク

Browser Preview プラグインのインストール

ここからは VSCode での作業になります。

まず VSCode を開き、画面左側の下のボタンを押してプラグイン管理画面を開きます。

そして上側の検索フォームに「Browser Preview」と入力します。

すると「Browser Preview」プラグインが検索結果に表示されるはずですので、「Install」ボタンを押してインストールを実行します。

インストールを行うと画面左側に下のようなボタンが表示されるようになると思います。

これでインストールは完了です。

Browser Preview プラグインの設定

続いて Browser Preview プラグインの設定を行います。

先ほどと同様にプラグイン管理画面を表示し、「Browser Preview」プラグインを探し出して歯車マークをクリックし、表示されるメニューから「拡張機能の設定」を選択します。

すると下の図のような画面が表示されます。

設定の必要があるのは下記の２つです。

• 「Browser-preview: Chrome Executable」：Google Chrome へのファイルパスを設定
• 「Browser-preview: Start Url」：ブラウザ起動時に表示するページの URL を設定

「Browser-preview: Chrome Executable」は空のままでも問題ない場合があります。これは、空にしておくと元々このプラグインに設定されているデフォルトのファイルパスの Google Chrome を自動的に起動してくれるようになっているからです。

例えば MacOSX の場合は下記がデフォルトのファイルパスとして設定されているようです。

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

ですので、上記パスに Google Chrome がインストールされている場合は「Browser-preview: Chrome Executable」は空のままで良いです。

逆に上記パスに Google Chrome が無い場合は「Browser-preview: Chrome Executable」は設定しておく必要があります。

「Browser-preview: Start Url」にはローカルで開発を行っているワードプレスサイトへの URL を設定しておくと、ワードプレスのファイル編集後にブラウザを起動すればすぐに編集後のサイトが表示されるので便利です。

VSCode でのブラウザ表示

Browser Preview プラグインでのインストール・設定が完了すれば、VSCode でのブラウザ表示が可能になります。

ブラウザ表示は、Browser Preview プラグインをインストールした時に追加された下図のボタンをクリックすれば実行できます。

ボタンをクリックすれば、VSCode 上でブラウザが起動し、画面の右側に「Browser-preview: Start Url」で指定した URL のページが表示されるはずです。

画面の左側で PHP 等のファイルを編集し、保存後に右側のブラウザでページ表示することで、編集後の動作確認が楽に行えます。

当然 PHP Debug 等のデバッガーを利用すれば、ステップ実行も可能です。デバッガー起動後（Listen for Xdebug）にページを表示すれば、ブレークポイントでプログラムを停止させることができます。

スポンサーリンク

まとめ

このページでは VSCode 上でブラウザ表示を行う方法について解説しました。

個人的にはかなり便利になったのですが、皆さん的にはこの機能はどういう印象でしょうか？特に画面が小さい場合は開発が楽になるんじゃ無いかなぁと思います。

もし VSCode とウェブブラウザの画面の切り替えが面倒だと感じている方は、是非このページで紹介した方法で VSCode 上でブラウザを表示した状態で開発を行ってみてください！