【解決済み】デバッグの仕方について

アバター
にゃたま
記事: 782
登録日時: 2016年1月13日(水) 23:53
お住まい: 床下の猫王国
連絡を取る:

【解決済み】デバッグの仕方について

投稿記事by にゃたま » 2020年3月25日(水) 17:26

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

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

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

コード: 全て選択

 
                        this._foods['test'] = {
                            foods_set_A: {
                                vegetable: ['carrot', 'onion'],
                                fruit: ['apple', 'pineapple']
                            },
                            foods_set_B: {
                                vegetable: ['radish', 'broccoli'],
                                fruit: ['melon', 'watermelon']
                            }
                        };
                        console.log('<!!DEBUG!!>this._foods[str].foods_set_A:'+this._foods['test'].foods_set_A);


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

今更になりますがよければ無知な私に教えてくださいませ(^^;

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

コード: 全て選択

console.log('<!!DEBUG!!>this._foods[str].foods_set_B.vegetable:'+this._foods['test'].foods_set_A.vegetable);
最後に編集したユーザー にゃたま on 2020年3月26日(木) 09:14 [ 編集 1 回目 ]

アバター
Plasma Dark
記事: 235
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: デバッグの仕方について

投稿記事by Plasma Dark » 2020年3月25日(水) 21:49

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


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

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

https://qiita.com/Sanshiro/items/084fb0971942e03db9a4
奏ねこま
記事: 625
登録日時: 2016年1月20日(水) 20:04

Re: デバッグの仕方について

投稿記事by 奏ねこま » 2020年3月25日(水) 21:51

console.log(this._foos['test'].foods_set_A);
みたいに変数だけ渡せばいいんじゃないですか?
アバター
にゃたま
記事: 782
登録日時: 2016年1月13日(水) 23:53
お住まい: 床下の猫王国
連絡を取る:

Re: デバッグの仕方について

投稿記事by にゃたま » 2020年3月26日(木) 09:13

PlasmaDark様

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

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

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

奏ねこま様

知りたいことはまさにこの方法でした。解決したので一応解決済みにします(^^;
というか必ずシングルかダブルクォーテーションで毎回囲んで変数名を記述した上で
コンソールに表示させていたのでコメントがないとこのように表示できるとは目からウロコでした(*_*)
流石ねこま様ですorzねこま様の制作されたプラグインも少なからず使わせていただいていますorz
ありがとうございました(_ _)
アバター
Plasma Dark
記事: 235
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by Plasma Dark » 2020年3月26日(木) 10:02

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


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

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

こういった意味ではVSCodeのほうが勝っているとは言えると思います。
アバター
にゃたま
記事: 782
登録日時: 2016年1月13日(水) 23:53
お住まい: 床下の猫王国
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by にゃたま » 2020年3月26日(木) 15:29

Plasma Dark様

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

ところでそのBracketsのライブプレビュー機能っての初めて使ってみたんだけど
ChromeのConsole見てみたら普通にMV本体から実行した時には出ない
worning出てきたけどコレって無視すればよいのだろうか…(謎)
添付ファイル
スクリーンショット 2020-03-26 15.20.49.png
スクリーンショット 2020-03-26 15.20.40.png
アバター
Plasma Dark
記事: 235
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by Plasma Dark » 2020年3月26日(木) 23:34

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

オーディオに関する警告はChromeの仕様です。
オープニングBGMが再生されない程度の影響しかなかったはずなので、無視しても大丈夫だと思います。
アバター
にゃたま
記事: 782
登録日時: 2016年1月13日(水) 23:53
お住まい: 床下の猫王国
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by にゃたま » 2020年3月27日(金) 08:56

Plasma Dark 様

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



どのjavascriptかわからないのでどうすればよいのか検討がつきません。
一応launch.jsonには心当たりのあるjsファイルはoutFilesのプロジェクト内の/js/main.jsしかないのですが
そのパスにファイルは存在してますので問題ないはずです。
なのに何故みつからないのでしょうか?
スクリーンショット 2020-03-27 8.50.36.png
launch.json
アバター
Plasma Dark
記事: 235
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by Plasma Dark » 2020年3月27日(金) 10:40

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

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

拡張機能として Debugger for Chrome を導入する必要があります。
アバター
にゃたま
記事: 782
登録日時: 2016年1月13日(水) 23:53
お住まい: 床下の猫王国
連絡を取る:

Re: 【解決済み】デバッグの仕方について

投稿記事by にゃたま » 2020年3月27日(金) 14:46

Plasma Dark様

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

“MV:質問” へ戻る