しおしお

IntelliJ IDEAのことなんかを書いてます

IntelliJ IDEA13で内蔵サーバを使ったJavaScriptのデバッグ

IntelliJ IDEA JavaScript

IntelliJ IDEA13(build130.962で確認)で、内蔵サーバを使ったJavaScriptのデバッグか可能となったので、その手順を簡単にメモってみます。

デバッグ対象のJavaScriptを読み込むHTMLを作成する

JavaScriptをデバッグするためには、htmlが必要となるのでJavaScriptをデバッグするために必要な構造をもったhtmlファイルを作成します。

htmlファイルをブラウザで開く

対象のファイルのコンテキストメニュー（右クリック）からDebugを選択します。Debugの後には、ファイル名が書かれていると思います。

f:id:sioiri:20130619222519p:plain

ChromeにJavaScriptをデバッグするための拡張機能をインストールする

以下のようなエラーが出た場合には、Chromeに拡張機能がインストールされていないので、エラーポップアップのリンクをクリックして、拡張機能を追加します。
f:id:sioiri:20130619222727p:plain

拡張機能を追加すると、Chromeで以下のようにhtmlが開かれます。
f:id:sioiri:20130619224130p:plain

デバッグの実行

ブレークポイントを任意の箇所において、そのロジックが実行される処理をブラウザ側で実行しましょう。今回は、特定のIDの要素がクリックされた場合を例にしているので、ブラウザでその箇所をクリックしデバッグ処理を行なっています。

ブレークポイントで処理が止まると、以下のように変数情報等が確認できます。
Watchesもちゃんと動いていますね。
f:id:sioiri:20130619225835p:plain

console.logで出力した内容は、consoleタブで確認することもできます。

ブレークポイントの設定

Run->View Breakpointsからブレークポイントの設定を行えます。

設定できる内容は、主に以下の内容となっています。

f:id:sioiri:20130619230403p:plain

おわり。