JetBrains 製 IDE でライブ編集するための補足情報

2021年9月1日 2021年8月29日

tks2

コンテンツ 非表示

1 ライブ編集 ( Live Editing )

2 ライブ編集を利用できる条件

2.1 3つの条件

2.2 Live Edit プラグインの確認方法

2.3 Live Edit が有効になっていることの確認方法

ライブ編集 ( Live Editing )

ライブ編集は Web サイトや Web システムを構築する上で非常に便利な機能です。 JetBrains 製 IDE においてもライブ編集は備わっており HTML, CSS, JavaScript ファイルの変更を即座にブラウザに反映してくれます。また JavaScript のソースコードにブレークポイントを有効にしていると JavaScript 実行中に処理が止まってくれ変数などを確認することもできます。しかもデフォルトで有効になっているので活用しない手はないでしょう。しかし使い方を間違っていて上手く利用できない方もいるようです（私の知り合いが正にそうでした…）。

JetBrains 製 IDE でのライブ編集の方法は、公式にも書かれているのでこちらを確認することで間違いないでしょう。

WebStorm - HTML、CSS、JavaScript でのライブ編集
https://pleiades.io/help/webstorm/live-editing.html

そのため、今回は補足情報などを紹介します。
本記事では WebStorm で紹介しますが、 PhpStorm や PyCharm など他の IDE でも同様に利用することが可能です。

ライブ編集を利用できる条件

3つの条件

JetBrains 製 IDE でライブ編集を利用するには条件があります。

Google Chrome のブラウザがインストールされていること
Live Edit プラグインが導入されていること
Live Edit が有効になっていること

ライブ編集するためには Google Chrome が必須になります。現在のところ、 Google Chrome 以外ではライブ編集することができません。過去に Firefox にも対応するような話もありましたがその計画は 2018 年に凍結してしまったようです。もし「 Firefox でライブ編集したいなら Browsersync のようなツールを使ってね」とのことです。

YouTrack - LiveEdit: Firefox support
https://youtrack.jetbrains.com/issue/WEB-1805

といっても、 Chrome のシェアが高いので今のところ大きな問題になることはないと思います。

JetBrains 製 IDE をデフォルトでインストールしたのであれば、 Live Edit のプラグインは最初からインストールされ有効になっているでしょう。