ループ内など、alert()では確認しづらい場合

デフォルトのmain.jsをいじる１,キー入力可能に - tmlibの練習ブログでは確認の方法として、alert("aaa")と書いた。

これでももちろん、用を足しているのだが、例えばループや毎フレーム実行される所に置くと
(初期のmain.jsならupdate: function(app) {…}内)
だと、消しても消してもダイアログが表示されて、確認どころでは無くなってしまう。

そんな時はconsole.log("aaa")を使う。

これはデバックツールを入れていれば、そこに表示されて確認できる、というもの。(デバッグツール＝エラーが出た時に、原因を表示したい(デバッグツール) - tmlibの練習ブログ)

またこれらの方法は、単に"ここまでは無事に動いている"と確認するだけが能ではない。
console.log(変数)　という形なら、変数の内容が詳細に見られる、というメリットもある。

たとえばデフォルトのmain.jsをいじる２,拡大縮小のプロパティ(要素)を探す - tmlibの練習ブログで拡大率の値をいじる時、
this.star.scaleX += 0.1;
と書いたが、実は
this.star.scale.x += 0.1;
(Xではなく.x)でも期待通りの動きをする。

これも

console.log(this.star.scale)

で確認してみると、

{x:1, y:1} { x=1, y=1, selfClass=function(), もっと見る...}

と、変数の中身が返って来て分かる。
(詳しい意味は分からないが)どうやら１つめの{}の中にある変数は使えそうである。

そうなると気になるのは
this.star.scaleX
は何なのか…?　という事だが、
[Documents]に記載されている事からも分かる通り、わざわざ分かりやすいように専用に用意したのかな、と。
(これまた中身を確認すると"1"なので、this.star.scaleXとthis.star.scale.xの両方を毎回読み取って、変化があった方を優先…みたいな事を中でしているのだろうか)

またもっと踏み込んで、

console.log(this.star.scale.toSource());

という形だと、更に分かりやすく変数の中身を表示してくれるようだ。

こちらの場合は

({x:1, y:1})

だけである。

＊追記　console.dir(変数)だと、更に中身を分かりやすく表示してくれる様子。

[Documents]を見るより、こういった生のデータを表示して目で確認した方が、何がいじれる値か、ピンと来そうではある。
(複雑な事をやるなら、キチンとDocumentsに目を通した方が良いだろうが)