ツクマテ

いつもお世話になっています。

初歩的なデバッグ方法についてですが私はいつもconsole.log()で変数値を
出力していますがこれですと配列等で[object Object]と表示されます。
この表示だとなにが入っているのかわからないのですが
特定のタイミングで配列の中身をリストで表示することはできるのでしょうか？
これがわからないばかりにデバッグ効率が非常に悪いように思います。

連想配列での実装例では下のようになります。



これだと[object Object]と表示されるだけです。
まえになんとなくF8のコンソールの他のタブでわかるようなことを聞いたような聞いてないような
（忘れてます…）ですがこのデベロッパーツールの使い方をマスターできていません。

今更になりますがよければ無知な私に教えてくださいませ（＾＾；

追記
投稿したあとでわかったんですが以下のようにfoods_set_Bの中のvegetableを指定したらcarrot,onionが表示されました。上の例のように親要素から配列の全一覧を表示するようなことは無理なのでしょうか？

特定のタイミングで配列の中身をリストで表示することはできるのでしょうか？

console.log の中で JSON.stringify してあげれば見えるとは思います。

テストしたい内容にも寄りますが、VSCodeとChromeを使ったデバッグで、ブレークポイントを指定するやり方を覚えるととても効率が良いです。
こちらならわざわざ console.log で吐いたりしなくてもブレークポイントで止まってる時にウォッチしたい式を書くだけで結果を手軽に見られます。

https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

console.log(this._foos['test'].foods_set_A);
みたいに変数だけ渡せばいいんじゃないですか？

PlasmaDark様

VSCodeというのはしぐれん様からも勧められましたが使いやすいのでしょうか？
ちなみに以下のリンクのものですよね？
https://azure.microsoft.com/ja-jp/produ ... udio-code/

私は現在Mac用のBraketsというアプリを使用しています。
コード補完機能とファイル管理が便利で使っています。
但しデバッグ機能のようなものはないように思います。（自分が知らないだけ？）
これに勝るものなのでしょうか？

追記
すみません。今見たらデバッグ機能あるみたいです…
全く使ったことなかったというオチ…
使い方は勉強しなくてはいけませんねorz
あとこれは以前にトリアコンタン様からの紹介の記事を見て知って以降使ってます（＾＾；

奏ねこま様

知りたいことはまさにこの方法でした。解決したので一応解決済みにします（＾＾；
というか必ずシングルかダブルクォーテーションで毎回囲んで変数名を記述した上で
コンソールに表示させていたのでコメントがないとこのように表示できるとは目からウロコでした(*_*)
流石ねこま様ですorzねこま様の制作されたプラグインも少なからず使わせていただいていますorz
ありがとうございました(_ _)

私は現在Mac用のBraketsというアプリを使用しています。
コード補完機能とファイル管理が便利で使っています。
但しデバッグ機能のようなものはないように思います。（自分が知らないだけ？）
これに勝るものなのでしょうか？

すでにBracketsをご利用でしたか。大変失礼しました。

ライブレビューを使えばツクールMVのプロジェクトをChromeで動かすことはできるのですが、ブレークポイントを貼る機能はどうやらなさそうですね。
強力なJSデバッガとして紹介されている拡張機能Theseusも更新が5年前に止まっており、私の環境ではインストールすらできませんでした。

こういった意味ではVSCodeのほうが勝っているとは言えると思います。

Plasma Dark様

VScodeってのは時間がとれたときにでも検証してみます。
軽くて使いやすくて機能的にもよければ移行も検討してもいいと思いますが
なにぶん慣れたエディタのほうがストレスなくていいのでなかなか踏み切れないというのもあります。

ところでそのBracketsのライブプレビュー機能っての初めて使ってみたんだけど
ChromeのConsole見てみたら普通にMV本体から実行した時には出ない
worning出てきたけどコレって無視すればよいのだろうか…（謎）

どこかでSourceMapを指定してるんでしょうか。
気になるようならpixi.jsのリポジトリからダウンロードして入れてみても良いかと思いますが、多分無くても何も起こらないんじゃないかと思います。

オーディオに関する警告はChromeの仕様です。
オープニングBGMが再生されない程度の影響しかなかったはずなので、無視しても大丈夫だと思います。

Plasma Dark 様

解決した後で付き合わせてしまってすみません。
VScodeをインストールしてみたのですが
結論からすると「実行」ー「デバッグの開始」ができません。
エラーの内容は以下のもので
対応するjavascriptが見つからないとのことです。



どのjavascriptかわからないのでどうすればよいのか検討がつきません。
一応launch.jsonには心当たりのあるjsファイルはoutFilesのプロジェクト内の/js/main.jsしかないのですが
そのパスにファイルは存在してますので問題ないはずです。
なのに何故みつからないのでしょうか？

typeがnodeになっていますね。
サンシロさんのQiita記事を参考にlaunch.jsonを変更してみてください。

https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

拡張機能として Debugger for Chrome を導入する必要があります。

Plasma Dark様

サンシロ様の記事役に立ちました！
ブレークポイントも設定できかなり便利ですね（＾＾
console.table()のような特殊なものは使えないみたいでしたが
ブレークポイントで停止できて変数内容確認できるので問題ないです。
とても便利なので移行を検討しようかなと思います。
もっと早くに使えばよかったかも(^_^;)
これでデバッグが快適になりそう(*^^*)
ありがとうございました！！