PyCharmでJavaScriptのデバッグをする
概要
PyCharm(Professional Edition)では、WebStormの機能の多くをカバーしています。プラグインをインストールすることで、WebStorm無しでJavaScriptプログラムのデバッグが可能になります。
なお、以下の説明では、OSとしてMac OS X, デバッグ用のwebブラウザとしてChromeを使用することを想定しています。
注意
無料で使用できるCommunity EditionではWeb development機能が含まれていないため、おそらくこの機能は使用することはできません。 PyCharm Community版とProfessional版の機能比較
事前準備
PyCharmの設定を行なう前に、あらかじめ以下のソフトをインストールしておきます。
PyCharmの設定
PyCharmのメニューから、[Preferences]-[Plugins] を選択します。新しいウィンドウが開くので、[Install JetBrains Plugin...]ボタンを押します。
プラグインの中から「NodeJS」を選択しインストールした後、PyCharmを再起動します。
動作確認
PyCharmプロジェクト内のHTMLファイルを右クリックし、[Debug 〜.html]を選択すると、自動的にwebブラウザ(Chrome)が起動します。
PyCharm上のエディタで、JavaScriptソース上にブレイクポイントを設定しておくと、その場所で実行が一時停止状態になり、デバッグできるようになります。
