Edited at

IntelliJのLiveEditで404になるときの対処法

More than 1 year has passed since last update.

IntelliJはJetBrain社のIDEです。

LiveEditというプラグインを使うことで、HTMLの変更をリアルタイムでブラウザに反映することが出来ます。

ファイルを更新した後、ブラウザに切り替えてF5を押す手間が不要なため、とても便利です。

普段開発に使っているPCとは別のPCでLiveEditを使ったところ、

404という表示が出てしまい、その対策を書きました。

intellij_404.png


環境


  • Mac El Capitan

  • IntelliJ 2017.2.5

  • Chrome 62.0.3202.89


ブラウザ拡張とプラグインの準備

ChromeにJetBrains IDE Supportという拡張が必要になります。

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=ja

次にIntelliJのPreferencesを開き、PluginsからLiveEditをインストールします。


LiveEditの実行方法

HTMLファイルをIntelliJのエディタで開いている状態で、Ctrl+Shift+Dのショートカットで実行することが出来ます。

ショートカットキーはキーマップによって異なるので、ファイルを右クリックして表示される、Debug 'ファイル名'という項目を参考にしてください。

この時、以下のようなダイアログが出る場合があります。

Copy authorization URL to clipboardをクリックして進めます。

intellij_authrization.png

ここで自動でChromeに切り替わりますが、404が出てしまいました。

intellij_404.png


対策

IntelliJのPreferencesを開き、Build, Execution, DeproymentDebuggerを展開します。

その中のAllow unsigned requestsという項目にチェックが入っていなければ、チェックをします。

intellij_debugger_setting.png

再度同じようにLiveEditを実行すれば、今度は404にならないと思います。

ページがブラウザで開いた状態において、IntelliJでHTMLを編集すれば、即座に変更が反映されるはずです。