概要

javaScriptのデバッグには、Chromeのデベロッパーツールがとても便利ですが、
IntelliJを使ってデバッグする方法もあります。

IntelliJは数多くの言語に対応したIDEです。

サムライズムさんから購入すると、通常よりも安く購入することが出来ます。
サムライズム

デベロッパーツール同様、ブレイクポイントの設定や、変数の値の確認などが可能です。
個人的にはデベロッパーツールよりもIDEの方がコードを追いやすいため、デバッグ効率は高いと思います。

また、サーバーサイドの開発も行う人は、サーバーサイドもクライアントサイドも
同じ操作でデバッグできるというメリットがあります。

やること

fizzBuzzを実行するHTMLとjsファイルを用意し、fizzBuzzの処理をデバッグしていきます。

開発環境

今回はMacを使いますが、Windowsでも可能です。
IntelliJのインストールについては割愛します。

Mac OS X High Sierra
IntelliJ IDEA ULTIMATE 2018.1
Google Chrome 67.0.3396.87

JetBrains IDE Supportのインストール

IntelliJでデバッグするには、Chromeのアドオンである、 JetBrains IDE Support が必要になります。
以下からダウンロードすることが出来ます。
デバッグの様子を記録した動画がありますので、イメージがつかみやすいと思います。
JetBrains IDE Support

ファイル作成

HTMLファイルの作成

デバッグ用のJSを動かすHTMLファイルを作成します。
以下の3つの要素で構成されます。
- fizzBuzzの実行値の入力フォーム
- 実行ボタン
- 結果表示部分(id=resultのdiv)


<!DOCTYPE html>
<html lang="ja-jp">
<head>
    <meta charset="UTF-8">
    <title>fizzBuzz</title>
    <script src="fizz.js"></script>
</head>
<body>
<div>
    <form action="">
        <label for="num">数字: </label>
        <input type="text" id="num">
        <button type="button" id="testButton">テスト</button>
    </form>
</div>
<div id="result"></div>
</body>
</html>

JSファイルの作成

fizzBuzzの判定を行う fizzBuzz 関数を作成します。
また、stackTraceを表示するために wrapper 関数も作成します。


"use strict";
window.addEventListener("DOMContentLoaded", function () {


    /**
     * fizzBuzz
     * @param {Number} num fizzBuzz判定値
     * @return {String|Number} fizzBuzz結果
     */
    function fizzBuzz(num) {
        let str = "";
        if (num % 3 === 0) {
            str += "fizz";
        }
        if (num % 5 === 0) {
            str += "buzz";
        }

        if (str !== "") {
            return str;
        } else {
            return num;
        }
    }

    /**
     * stackTrace表示用
     * @param {Number} num fizzBuzz判定値
     * @return {String} fizzBuzz結果
     */
    function wrapper(num) {
        return fizzBuzz(num);
    }

    document.getElementById("testButton").addEventListener("click", function () {

        const num = parseInt(document.getElementById("num").value, 10);

        if (!Number.isInteger(num) || num <= 0) {
            throw new TypeError("input value must be greater than or to 1");
        }

        document.getElementById("result").textContent = wrapper(num);

    }, false);
}, false);

デバッグの実行

デバッグ用にHTMLを起動する

index.html を右クリックすると、 Debug 'index.html' という表示が出ますので、
これをクリックします。

クリックするとChromeが立ち上がり、上部に このブラウザは「JetBrains IDE Support」によりデバッグされています という表示が出ます。
右側にはデバッグのキャンセルボタンが表示されています。

ブレイクポイントの設定

ブレイクポイントを設定するには、ソースの任意の行の右側をクリックするだけです。
今回は、3で割り切れるか判定するif文に設定をしてみます。

ピンクの丸が付けば、ブレイクポイントの設定が完了です。

6を入力してみる

ブラウザのフォームに 6 を入力し、テストボタンをクリックします。
IntelliJにフォーカスが移り、ブレイクポイントで停止したことが確認できると思います。
変数の値がソース上に表示されています。

下のウインドウには、ステップイン、ステップオーバーなどのボタンや、コンソール、
stackTraceを表示するFramesや、変数一覧を表示するVariables、特定の変数を監視するWatches など、デベロッパーツールでおなじみの機能があります。

主なショートカットキーは以下です。

リロード Cmd + R
ステップオーバー(1行進める) F8
ステップイントゥ(関数の中に入る) F7
ステップアウト(関数から出る)　Shift + F8
リジューム(次のブレイクポイントまで進める) F9

Variables や Watches のタブでは、そのまま変数名のキーを入力することで、インクリメンタルサーチが可能です。

一歩進んだ使い方

特定の条件でのみ、ブレイクポイントを有効にする

ブレイクポイントで右クリックをすると、 Conditions という入力欄が出てきます。
ここにはJSでブレイクするための条件を書くことが出来ます。
num === 3 と書けば、2や4を入力された場合はブレイクしませんが、3を入力されるとブレイクします。

ブレイクポイントに到達したことをconsoleに出力する

ブレイクポイントを右クリックし、 More という箇所をクリックします。

BreakPoints というウインドウが立ち上がります。

Log to console: という表示の右に2つのチェックボックスがあります。
以下の挙動をします。

"Breakpoint hit" message
- Breakpoint reached: ファイル名:行数 を出力します。
StackTrace
- stackTrace を出力します。

ブレイクポイントに到達しても処理を停止させない

上記イメージの Suspend のチェックを外すことで、ブレイクポイントに到達しても、処理を続行させることも出来ます。
先に紹介したconsole出力と併用すると、処理を停止させずに、どのコードを通ったかを確認することが出来ます。

変数の値を書き換える

上記イメージの Evaluate and log の入力欄に任意のJSを書くことが出来ます。
例えば、変数の値を書き換えることで、強制的にif文を成立させることも出来ます。

num = 3 と書けば、num変数の中身を3に書き換えます。

デバッグの停止の仕方

ブラウザの右上部のキャンセルボタンを押せば、デバッグを終了することが出来ます。
また、IntelliJの上部にある、 赤い四角のアイコン を押すことでも、終了が可能です。

デバッグを再開するには、ファイルを右クリックする方法以外にも、停止ボタンの少し左にある、虫の形のアイコンをクリックする方法もあります。

その際は、虫アイコンの左にあるファイル名の欄に、デバッグ対象のファイルが表示されていることを確認してください。

IntelliJ(WebStrom)を使ったJavaScriptのデバッグ方法

概要