JSのデバグについて

Question

JSのデバグについて

複雑な場合はconsoleで上と下で割ってあげて、そのあとの値を表示することで、複雑な物でも範囲を狭める事が出来る。
と聞いたのですが、今はインスペクタでブレークポイントを作れば同じことができるので、今はやらなくなっていますか？

またこれによるメリットもはっきりしないのですが、
このようにconsoleで挟むと、この時点で条件式がどうなっているかというメリットがあるのだと思いますが、ほかになんのメリットがあるのでしょうか？

なぜか広告だとよくわからないクレームが入ったので、
画像を削除しました。

＞＞＞
ブレークポイントで止まった状態でないと変数の値は見れません。

クリックで左青い矢印をつけてブレークポイントは作っているのですが、
画像の通りやはり出てきません。

＞＞＞
var result = amount / num;

という行にバグがありそうで、その原因をさぐりたいとき（なんて無いと思いますが）、
その入力値と出力値を印刷して（じゃなかったトレース出力して）、自分が思っているかどうかを確認するという技だと思います。

挟むことで出力前と後の値を確認して、うまく処理できているか確認する作業をしているのですね。

＞＞＞
変数の値を埋め込んでログ出力すること

難しいですね、埋め込むとはconsoleオブジェクトに変数の中身を入れるということですかね？
入れてlogにそれを表記することなんですかね？

Answer 1

昔から Javascript にかぎらず、プログラムのデバッグにおいては

• インスペクタなどのデバッガでブレークポイントを設定し、その時の値を確認する
• console.log などでトレースを出力する

というような二種類の方法がありました。それぞれメリット・デメリットがあるので、その場の状況でどちらの手段を取るかを選択してきたと思います。

ただし、おっしゃるとおり、デバッガが使える環境が整っている場合は、トレース出力によるデバッグはあまり使わないでしょう。

またこれによるメリットもはっきりしないのですが、

ちょっと、こじつけ気味ですが、ブレークポイントを仕掛けると何１０回もとまってしまい、そのときに値がどのように変化していっているかを見たい場合などはデバッガよりもトレースのほうがやりやすいかもしれません。

Comments

[退会済みユーザー]

ありがとうございます。
ブレークポイントをインスペクタ上でつけるのが基本にすでになっているが、
ほぼこれで良いものの、あまりにブレークポイントが多いケースだと、止まりまくるので、
逆に面倒という場合のみcomsoli.logを使うことが今でもある。

また、止めたところでthisや変数の中身がどうなっているかなどはインスペクタではわからないのですかね？
よって
そのときに値がどのように変化していっているかを見たい場合などはデバッガよりもトレースのほうがやりやすいかもしれない。

値がどのように変化していっているかを見たいという部分が初心者にはどうもはっきりしないのですが、もう少し具体的に教えていただければ幸いです。

ということでしょうか？

[mit0223]

> 止めたところでthisや変数の中身がどうなっているかなどはインスペクタではわからないのですかね？

いえ、そんなことはありません。カーソルを変数名に当てただけでも値は見れると思いますし、右の Scope ペインのところで変数の値は確認できます。

> 値がどのように変化していっているかを見たい
すみません。言い方が悪かったかもしれません。大量に繰り返し実行される処理の中にブレークポイントをかけると、毎回止まってしまって効率が悪いので、トレースでログを出力し、後でそのログの中を吟味するほうがデバッグとしてやりやすいかもしれないという話です。
このとき、その値がどのように変わっていくかを見たい場合は、そのログの中には変数の値も印刷してみれますよねということを言おうとしました。

[退会済みユーザー]

var test2 = {
test2Html : $('.js-is-forcus').html(),
test2Text : $('.js-is-forcus').text('daikunn')
}

alert(test2);

の場合test2を選択してもクロームのインスペクタでは何も反応がありません。
一番右側のscpeには　Notpausedとなっています

[退会済みユーザー]

ソースコードが長い場合はconsole.logを使って変数の中身を確認する方が止まらないので便利ということですね。
ただやはり下記は印刷などよくわかりませんでした。
＞＞＞
このとき、その値がどのように変わっていくかを見たい場合は、そのログの中には変数の値も印刷してみれますよねということを言おうとしました。

また画像のようにconsole.logで挟むやり方は、一体どんなメリットがあって挟むのでしょうか？

[mit0223]

> の場合test2を選択してもクロームのインスペクタでは何も反応がありません。
一番右側のscpeには　Notpausedとなっています

ブレークポイントで止まった状態でないと変数の値は見れません。

> 印刷などよくわかりませんでした。
すみません。これも日本語が悪かったです。画像の console.log のように変数の値を埋め込んでログ出力することを「変数の値を印刷」と言ってしまいました。紙に印刷するわけではありません。

> また画像のようにconsole.logで挟むやり方は、一体どんなメリットがあって挟むのでしょうか？

var result = amount / num;

という行にバグがありそうで、その原因をさぐりたいとき（なんて無いと思いますが）、その入力値と出力値を印刷して（じゃなかったトレース出力して）、自分が思っているのとあっているかどうかを確認するという技だと思います。

[退会済みユーザー]

返答を質問欄に追加しましたので、見ていただければ幸いです。

[mit0223]

> クリックで左青い矢印をつけてブレークポイントは作っているのですが、

ブレークポイントを作っても、プログラムがそこで停止した状態にならないと変数の値はみれません。そもそも、変数の値のなので、「いつの値か」という指定なしに確定できるわけないですよね？

> 埋め込むとはconsoleオブジェクトに変数の中身を入れるということですかね？

難しいですね。consoleオブジェクトに変数の中身を入れるとはconsoleオブジェクトのメンバ変数に変数の値を代入するということですかね？

日本語は難しいですが、プログラミングの概念はそれほど難しくありませんよ。

[退会済みユーザー]

２や9行目のように
constのところで止めていれば良いのではないのですか？