読者です 読者をやめる 読者になる 読者になる

しおしお

IntelliJのあれやこれや

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

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

以下のようなエラーが出た場合には、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

おわり。