Help us understand the problem. What is going on with this article?

WebStorm Live Editの使い方

本稿では、WebStormをはじめとしたJetBrains製IDEの機能であるLive Editについて紹介する。

本稿で知れること

  1. Live Editとはどんな機能か?
  2. Live Editの使い方
  3. Live Editが動かないときの対処法

Live Editとは

Live Editとは、HTMLやCSS、JavaScriptファイルの更新を検知して、ブラウザに即座に反映する機能で、WebStormやPhpStormをはじめとしたJetBrains製IDEに搭載されている。

2019-06-25 15.27.48.gif

どういうときに便利か?

HTMLやCSSをいじっていて頻繁にブラウザをリロードしなければならないときに、Live Editを使うと、IDEとブラウザを行ったり来たりしなくて済む。

Live Editの使い方

Live EditしたいHTMLファイルを右クリックし、「Debug」をクリックする。

webstorm.png

するとブラウザが立ち上がる。

これで、ファイルを書き換えて保存したタイミングで、変更がブラウザに反映されるようになる。

トラブルシューティング

Live Editが動作しないとき

LiveEditプラグインが有効になっているか?

Preferences→Pluginsで「LiveEdit」プラグインがインストールされていて、かつ、有効になっているか確認する。

Live Editの設定が正しいか?

「Preferences」→「Build, Execution, Deployment」→「Debugger」→「Live Edit」の「Update application in Chrome on changes in...」にチェックが入っているか確認する。

Preferences.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした