[JavaScript] Ajaxのテスト時にFormからのSubmit送信に切り替えてデバッグする方法 #JavaScript

こんにちわ。

最近、Ajaxで処理することが多いです。
やはり、UXを考えると、Ajax使いまくらないと。。。ですよね。

しかし、Ajaxの開発をしていると、サーバーサイドの連携部分でエラーが発生することがありますよね。
この場合、皆さんはどのようにデバッグをされているのでしょうか？

色々検索してみたのですが、これといった方法が見つからず、、、でした。
そこで、私はいつもは以下の方法でデバッグをしています。

問題がないとは言い切れませんが、デバッグするには十分かな、と考えています。

①まずは、エラーをResponseから取得し、Consoleに吐き出す

JQueryで、以下のように書きます。

$.ajax({
   type : 'POST',data: data,url : url,dataType : "json",
   success : function(json) { fn_callback(json);},
   error : function(XMLHttpRequest, textStatus, errorThrown) {
    console.log("XMLHttpRequest : " + XMLHttpRequest.status);
    console.log("textStatus : " + textStatus);
    console.log("errorThrown : " + errorThrown.message);
    //↓ここがキモ。本番では出力しない。
    console.log("responseText : " + XMLHttpRequest.responseText);
    return false;
}
});

最後のresponseTextというところを出すと、エラーログが見れるので、ここで解決することが多いです。
この辺は、検索すると出てくる方法ですね。

②GETに切り替えて、URLを取得し、直接ブラウザから叩く

でも、上記でも、原因がよくわからない場合ってありますよね。

この場合に、本当にもっといいやり方ないのかな、とは思いつつ、以下のようなやり方をしてます。

まず、送信typeをPOST => GETに変更します。
そして、サーバーサイドで、わざとエラーを起こします。（存在しない関数を呼んだりして）

そうすると、GETでアクセスしたパラメータ付きURLが取得できるので、
そのURLをコピーして、ブラウザで叩く、という方法。

そして、サーバーサイドのエラー箇所を特定していきます。
ここまでで大体潰せます。

③POSTデータをFormに埋め込みサブミットする

しかし、GETは送信できるデータに上限がありますよね。
そういう時は稀ですが、これが必要な場合は、formを作ってサブミットします。

でも、Ajaxで大量データを送る時って大抵、配列やオブジェクトで送ることが多いです。
そうすると結構面倒ですよね。

例えば、こんなデータを送る時、

{'a':123,'b':{'b1':'bbb1','b2':'bbb2'},'c':['x','y','z']};

いちいち手作業でformを作るのは不便ですよね？
（その結果、全然大したことないバグだったりすると・・・。）

たまたま、今回送信していたデータがこれ以上に複雑なデータだったので、
汎用的に送信する関数を作りました。

やってることはシンプルで、配列かオブジェクトなら、再帰的に階層を辿り、
hiddenタイプのinputに納めて送信する、という方法（ただの力技）です。

function makeForm(object,GetPost,url,id){
    var keylist = {};
    function extendObject(txt, key){
        if(typeof txt == 'object' && txt !== null){
            for(var i in txt){
                var tmpkey =  (!key)?i:key + '['+i+']';
                extendObject(txt[i], tmpkey);
            }
        }else{
            keylist[key] = txt;
        }
    }
    extendObject(object, '');

    var form = document.createElement("form");
    form.id = id;
    form.action = url;
    form.method = GetPost;

    for(var name in keylist){
        var ip = document.createElement("input");
        ip.type = 'hidden';
        ip.name = name;
        ip.value = keylist[name];
        form.appendChild(ip);
    }

    document.body.appendChild(form);
};

この関数を↓の感じで呼んでください。

var object = {'a':123,'b':{'b1':'bbb1','b2':'bbb2'},'c':['x','y','z']};
object['_token'] = $('meta[name="csrf-token"]').attr('content'); //CSRFトークンをセット
makeForm(object,'POST','dummyurl/test','submit_form');

$('#submit_form').submit()

これで、デバッグに困ることはあまりないかな、と。

ただ、こんな力技しかないのでしょうか？

もっと良いデバッグ方法があれば知りたいのですが。。。
これで十分間に合っている感はあります。