質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JSのデバグについて

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 738
退会済みユーザー

退会済みユーザー

JSのデバグについて

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

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

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

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

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

>>>
var result = amount / num;

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/12/31 12:34

    こちらの質問が他のユーザから広告だという指摘を受けました
    個人のサービスやプロダクトなどの広告を目的とした投稿は、質問ではないため禁止しています。
    投稿した意図に反し広告と受け取られている場合は、「質問を編集する」ボタンから編集を行い、質問内容と解決したいことを明確に記述しなおしてください。

回答 1

+4

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/03 13:22

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

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

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

    ということでしょうか?

    キャンセル

  • 2017/01/03 13:34

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

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

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

    キャンセル

  • 2017/01/03 14:01

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

    alert(test2);

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

    キャンセル

  • 2017/01/03 14:03

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


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

    キャンセル

  • 2017/01/03 14:36 編集

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

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

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

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

    var result = amount / num;

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

    キャンセル

  • 2017/01/04 09:40

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

    キャンセル

  • 2017/01/04 21:20

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

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

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

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

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

    キャンセル

  • 2017/01/04 21:47

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。