JavaScript(jQuery)でデバックするおすすめの方法　

2020年5月16日

JavaScript(jQuery)でデバックするおすすめの方法を紹介します。僕がいつも使っている方法です。多分他にも使っている人も多いかもしれません。また他にも便利な方法が御満とあると思います。

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第１３回目！　

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

alert()を使おう

はい、今回の結論はこれです。jsのalert()機能を使って「どこまでコードが正常に動いているかな？」「変数の中身は何かな」と調べます。非常に便利なのでおすすめです。他にもコンソール画面に出力する方法も見受けられますが、個人的にはこちらの方が、見やすいので好きです

なんでもいいんですが、例としてはこちら。

        $.ajax({
          //省略
        }).done(function(json) {
            alert(json);//①
        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert("失敗");//②
        });

jQueryを使ってAjax通信をした時に、正常に通信しているのかを知りたい時、また正常に通信した後にどんなデータがエンド側から送られてきているのかを知りたい時……の例。

正常に通信をしたら①に処理が移るわけですが、送られてくる"json"が表示されます。

②は失敗した時の処理ですが、通信に失敗した時にはalert()で「失敗」と画面に出力されるのですぐにわかります。

alert(1);

とかでも、全然、目印になりますよね。

最後に

今回は以上です。 　

自作Webサービスのアクアリウム専門の質問サイト　　→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

次回もお楽しみに〜。

Harumaki

alert()めっちゃおすすめなんで使いまくろう！他にもおすすめな方法があればコメントで是非教えてください(｀・ω・´)