HTMLやCSSの動作確認をしたい時、

ソースコードを書く
ウインドウを切り替えてブラウザリロード

この繰り返しが面倒くさい。
かと言ってGulpのようなタスクランナーを準備するのも面倒くさい。
そんな面倒マンにうってつけなのが、PhpStormやWebStormに搭載されている「Live Edit」。

この機能、ソースコードを書くと、ブラウザ側にリアルタイムで反映されます！
設定にかかる時間もわずか5分程度。
これから学習を始める方、サクッと動作確認をしたい時にめちゃくちゃ便利な機能をご紹介します。

この記事によって実現できること

まずはこちらをご覧ください。
左側にPhpStorm、右側にChromeのウインドウを並べたものです。

編集しているファイルはスタイルシートですが、エディタで加えた変更点がすぐ反映されているのがわかります。

設定方法

プラグインをインストールするだけで設定完了します。

使用したソフトウェア：Php Storm
バージョン：PhpStorm 2019.3.4　Build #PS-193.6911.26, built on March 18, 2020

PhpStormに「LiveEdit」のプラグインをインストール

Php Storm > Preferencesを選択し、設定画面に遷移します。

左側からPluginを選択し、検索窓に「live」を入力。
「LiveEdit」（※日本語化している場合は「ライブ編集」）」を選択してインストール、PhpStormを再起動します。

デバッグ実行

対象ページを選択し、デバッグで実行。
自動でChromeのブラウザが立ち上がり、以降はソースコードに手を加えると、リアルタイムで反映されます。

まとめ

HTMLやCSSをこれから学習する方、またサクッと動作確認したい時にはとても便利な機能です。
PhpStormやWebStormをお持ちの方、ぜひお試しください。