JavaScript版でWebAPI(JSON形式)のレスポンスをvar_dumpっぽく表示

WebAPIでJSON形式で返すものを作っていて、レスポンスの中身を簡単に知りたいと思って作ってみました。
ほんとはブラウザの開発機能使えばいいんだろうけど、画面が狭いと使いにくいし、パラメータ入力画面作るんなら、ついでに。。。ってね。

ソース

全部書くと長いので、必要なところのみを抜粋します。
汚いソースですが、テスト用なのでご愛嬌ってことで。
jQuery1.11.2とbootstrap3.3.4を使ってます。

HTML

まずはHTMLからURI、リクエストメソッド種類選択、パラメータを入力する部分。
プリフライトの確認もしたかったためOPTIONSも選択肢に入れてます。

入力部

      <table class="table table-bordered">
        <tr>
          <th class="col-xs-3 active">URI</th>
          <td>
            <div class="col-xs-6">
              <input type="text" name="uri" id="uri" class="form-control input input-xlarge" placeholder="Enter URI"/>
            </div>
          </td>
        </tr>
        <tr>
          <th class="active">Request Type</th>
          <td>
            <div class="col-xs-3">
              <select name="type" id="type" class="form-control">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
                <option value="OPTIONS">OPTIONS</option>
              </select>
            </div>
          </td>
        </tr>
        <tr>
          <th class="active">リクエスト</th>
          <td>
            <div class="col-xs-10">
              <textarea class="form-control" id="data" rows="5"></textarea>
            </div>
          </td>
        </tr>
      </table>
      <button class="btn btn-primary btn-lg btn-block" type="button" onclick="s\
end()" />送信</button>
    </div>

次にレスポンスを表示する部分。
ステータスコードと中身を表示。ヘッダーが必要な方は各自実装の事。

表示部

    <h3>ResponseCODE</h3>
    <pre id="code" class="bg-info"></pre>

    <h3>ResponseJSON</h3>
    <pre id="response" class="bg-info"></pre>

JavaScript

以下、JQueryを使ってパラメータを飛ばして、受け取るJavascript。
GET以外はJSON形式で記述して、GETの場合は通常のQueryStringで記述のこと。

リクエストとレスポンス

function send() {
   var contentType = "application/x-www-form-urlencoded";
   if ($("#type").val() != "GET") {
       contentType = "application/json";
   }
   var ajax = $.ajax({
       url: $("#uri").val(),
       type: $("#type").val(),
       dataType: "json",
       async: false,
       data: $("#data").val(),
       beforeSend: function() {
           $("#response").empty();
           $("#code").empty();
       },
       complete: function(msg) {
           $("#response").text(dump(msg.responseJSON));
           $("#code").text(msg.status + " " + msg.statusText);
       }
   });
}

そして最後にレスポンスを成形するメソッド
こちらはJavaScript 版 var_dumpを参考にさせていただきました。

var_dumpっぽく表示

function dump(value) {
    'use strict';

    if (typeof value !== 'object') {
        return value;
    }

    var indent = '  ';

    // オブジェクトを再帰的に展開して、内容を表す文字列を返す
    function dumpRec(object, depth) {
        var isArray = Array.isArray(object),
            result = (isArray ? '[' : '{') + '\n',
            lines = [],
            v,
            s,
            key,
            i;

        for (key in object) {
            if (object.hasOwnProperty(key)) {
                s = '';
                v = object[key];

                for (i = -1; i < depth; i += 1) {
                    s += indent;
                }

                // キー
                if (!isFinite(key)) { // キーが数値以外の場合
                    key = '"' + key + '"';
                }
                s += key + ': ';

                // 値
                if (v == null) { // nullはobjectなので先に判定
                    s += 'null';
                } else if (typeof v === 'object') {
                    s += dumpRec(v, depth + 1);
                } else if (isFinite(v)) { // 数値
                    s += v;
                } else { // その他=文字列
                    s += '"' + v + '"';
                }
                lines.push(s);
            }
        }

        result += lines.join(',\n') + '\n';

        for (i = 0; i < depth; i += 1) {
            result += indent;
        }

        result += isArray ? ']' : '}';

        return result;
    }
    return dumpRec(value, 0);
}