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

VSCode上でブラウザ表示を行う方法の解説ページアイキャッチ

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

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

VSCode上でブラウザ表示を行う様子

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

うーん、何が嬉しいのかよく分からない…

ウェブページ なんかは別途ウェブブラウザで表示すればいいんじゃないの?

いい質問だね!

特にワードプレスの開発を行っている人にとっては、作業が楽になるよ

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

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

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

通常のワードプレス開発を行う様子

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

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

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 を開き、画面左側の下のボタンを押してプラグイン管理画面を開きます。

プラグインの追加1

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

browser previewプラグインの検索

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

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

browser preview の起動ボタン

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

Browser Preview プラグインの設定

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

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

browser preview の設定

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

browser preview の設定2

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

  • 「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 プラグインをインストールした時に追加された下図のボタンをクリックすれば実行できます。

browser preview の起動ボタン

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

VSCode上でブラウザ表示を行う様子

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

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

VSCodeでブラウザ表示とステップ実行を行う様子

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.626 秒です