JSカスタマイズ デバッグ入門（の入門） kintone

前回に引き続き kintoneのJSカスタマイズについてのnoteです。

アプリがうごかない！

サンプル通りにやってみたけどアプリがうごかない事、よくありますよね。
どこがエラーかわからない、いわゆる「デバッグ」のやり方がわからない。どうしよう。。。

ということでデバッグの入門（の入門）をやってみます。まずはこれだけというものです。^^;

詳しい開発手法はネットや書籍でたくさんありますのでそちらに任せて、まずは「私が最初に習得した最低限のデバッグ方法」という内容です。
ブラウザはChrome、PCはWindowsです。

アプリは前回利用したこれ

文字列（1行）に入力すると編集不可にするというもの。
JSは以下

(function() {
  'use strict';
  // ココにJSのコードを書く
 
  function handler(event) {
   
    var record = ebent['record'];
    record['文字列__1行_']['disabled'] = true;

    return event;
  }
 
  kintone.events.on(['app.record.create.change.文字列__1行_', 
                     'app.record.edit.change.文字列__1行_'
                    ], handler);
})();

JSのコードが一発で動けばいいのですが、そんなことは稀で

ん？思ったように動かず、うんともすんとも言わない。。。
JSカスタマイズ初心者にとっては、エラーが出て動かないのも困るのですが、

「エラーが出ないのに動かない」

圧倒的にこっちの方が困ります。多分JSカスタマイズ習得の、ひとつの壁になってるのではないかと思います。

そんな時はコレ！便利なツールがあるんです。

[Ctrl]+[Shift]+[i]

すると、なにやらエラーっぽい感じのメッセージがでます！

そして、黄色枠のリンクをクリックすると。。。

なんと、ココがエラーですよ！と教えてくれます。便利！

var record = ebent['record'];

よくみると、event を ebent とスペルミスしてたんですね。なるほど。

目印をつける

スペルミスくらいだと、こんな感じでエラーをみつけてから、もぐらたたき的に直してもなんとかいけますが、文法的にエラーがない場合などはわかりませんね。

そんなときは、まずはどこまで動いているのか適当に目印を付けます。

window.alert('Hello Debug!');

(function() {
  'use strict';
  // ココにJSのコードを書く
 
  function handler(event) {
    
    window.alert('Hello Debug!');
   
    var record = event['record'];
    record['文字列__1行_']['disabled'] = true;

    return event;
  }
 
  kintone.events.on(['app.record.create.change.文字列__1行_', 
                     'app.record.edit.change.文字列__1行_'
                    ], handler);
})();

こうすると目印のところでアラートが出ますので、これで少なくともここまでは動いたことがわかります。つまり「カン」で、あやしい所にひたすらアラートを入れてバグを詰めていくやり方。^^;

昔、デバッガなんて便利なものがなかった時代は、だいたいこんな感じでひたすらアラート（メッセージ）を表示させながらデバッグしてました。

十分な開発環境がない場合や開発環境に慣れてないときに、今でも私はよく使うデバッグ手法です。

デバロッパーツールを使う

うれしいことに、ブラウザ(Chrome)にはデベロッパーツールという、デバッグ等が便利にできるツールがついています。冒頭、[Ctrl]+[SHift]+[i]で、でてきたのがそれです。

今度はデベロッパーツールの機能を使ってデバッグしてみましょう。

window.alert('Hello Debug!');
を以下に書き換え

console.log('Hello ConsoleLog!');

(function() {
  'use strict';
  // ココにJSのコードを書く
 
  function handler(event) {
    
    console.log('Hello ConsoleLog!');
   
    var record = event['record'];
    record['文字列__1行_']['disabled'] = true;

    return event;
  }
 
  kintone.events.on(['app.record.create.change.文字列__1行_', 
                     'app.record.edit.change.文字列__1行_'
                    ], handler);
})();

以下何れかの方法でデバロッパーツールを起動

[Ctrl]+[SHift]+[i]
「Chromeの設定」→「その他のツール」→「デベロッパーツール」
マウス右クリック「検証」

デベロッパーツールが起動するので[console]タブをクリック
で、同じようにフィールド値を変更すると。。。

目印のところでメッセージ表示（ログ）がでます。
window.alertでもよいのですが、console.logだと、

・マウスクリックの手間がいらない
・複数のログがのこる

というメリットがあります。ので、複数の情報を一度に取りたい時には便利ですね。

尚、実行結果をクリアする（振り出しにもどる）場合は、

[Shift]+[F5]

じゃ、次複数のログを表示。
ついでに変数や計算のテストもしてみましょう。
console.log('Hello ConsoleLog!')
を以下に書き換え

var test = 'Hello Test!';

console.log(test);

test = 1;
console.log(test);

test = 2;
console.log(test);

test = 2 + 1;
console.log(test);

(function() {
  'use strict';
  // ココにJSのコードを書く
 
  function handler(event) {
    
    var test = 'Hello Test!';

    console.log(test);
   
    test = 1;
    console.log(test);

    test = 2;
    console.log(test);

    test = 2 + 1;
    console.log(test);

    var record = event['record'];
    record['文字列__1行_']['disabled'] = true;

    return event;
  }
 
  kintone.events.on(['app.record.create.change.文字列__1行_', 
                     'app.record.edit.change.文字列__1行_'
                    ], handler);
})();

フィールドの値を変更すると。。。

やった！
複数ログかつ変数の中身、計算結果が表示されました。

コレ、もっと詳しく、データーの中身をみたいときにもつかえます。
以下の行を追加。

console.log(event);

(function() {
  'use strict';
  // ココにJSのコードを書く
 
  function handler(event) {
    
    var test = 'Hello Test!';

    console.log(test);
   
    test = 1;
    console.log(test);

    test = 2;
    console.log(test);

    test = 2 + 1;
    console.log(test);
    
    console.log(event);

    var record = event['record'];
    record['文字列__1行_']['disabled'] = true;

    return event;
  }
 
  kintone.events.on(['app.record.create.change.文字列__1行_', 
                     'app.record.edit.change.文字列__1行_'
                    ], handler);
})();

おおっ！！
こんな感じで、kintone の record は Object というデータ型になっているのですね。

ステップ実行

また、console.logを各行に入れなくても、ステップ実行でデバッグする方法もあります。

デベロッパーツールの[Surces]タブをひらきます。
詳細は（私もまだよくわからないので^^;）省略しますが、ブレイクポイントを設定しておいてから、JSカスタマイズした部分をうごかすと、そこで止まります。

画面キャプチャを参考に、それっぽいところそれっぽく触ってみるとなんとなくわかると思います。^-^;

で、[F11]（又は黄色四角の「↓」）を押すことによって１行ずつ進めることができます。

横に変数の中身もでてきますね！便利！！

ここまでできたら、基本的なデバッグは十分できると思います！
あとはどんどんトライするだけ。

ブラウザに無料でこんなリッチな開発環境があるのですから、すごい世の中になったものです。

わたしも勉強中なので違ってるところもあるかもしれませんが、何かのヒントになれば嬉しいです。

以上です。