[解決済み] JavaScriptデータフォーマット/プリティプリンタ

質問

私はデバッグのために、人間が読める形で JavaScript のデータ構造を印刷する方法を見つけようとしています。

私は、かなり大きく複雑なデータ構造をJSに保存しており、それを操作するためにいくつかのコードを書く必要があります。私が何をしているか、どこで間違っているかを調べるために、私が本当に必要とするのは、データ構造を全体的に見ることができ、私がUIを通して変更を加えるたびにそれを更新することです。

JavaScript のデータ構造を人間が読める文字列にダンプする良い方法を見つけることを除けば、このようなことはすべて自分で処理できます。JSON は可能ですが、きれいにフォーマットされ、インデントされる必要があります。私は通常、このためにFirebugの優れたDOMダンプ機能を使用しますが、私は本当に構造全体を一度に見ることができる必要があり、それはFirebugでは不可能なようです。

どのように解決するのですか?

私は、出力がインデントされていないものの、読みやすいフォームでJSオブジェクトをダンプする関数を書きましたが、それを追加することはそれほど難しくないはずです。私はこの関数を、このインデント問題を処理する Lua (これははるかに複雑です) 用に作成したものから作りました。

以下はそのシンプルなバージョンです。

function DumpObject(obj)
{
  var od = new Object;
  var result = "";
  var len = 0;

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        value = "[ " + value + " ]";
      }
      else
      {
        var ood = DumpObject(value);
        value = "{ " + ood.dump + " }";
      }
    }
    result += "'" + property + "' : " + value + ", ";
    len++;
  }
  od.dump = result.replace(/, $/, "");
  od.len = len;

  return od;
}

少し改良して見ます。

注1：使用するには、次のようにします。 od = DumpObject(something) と入力し、od.dumpを使用します。別の目的でlenの値（アイテムの数）も欲しかったので、複雑になりました。関数が文字列だけを返すようにするのは些細なことです。

注2：リファレンスのループは扱えません。

EDIT

無印版を作りました。

function DumpObjectIndented(obj, indent)
{
  var result = "";
  if (indent == null) indent = "";

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        // Just let JS convert the Array to a string!
        value = "[ " + value + " ]";
      }
      else
      {
        // Recursive dump
        // (replace "  " by "\t" or something else if you prefer)
        var od = DumpObjectIndented(value, indent + "  ");
        // If you like { on the same line as the key
        //value = "{\n" + od + "\n" + indent + "}";
        // If you prefer { and } to be aligned
        value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
      }
    }
    result += indent + "'" + property + "' : " + value + ",\n";
  }
  return result.replace(/,\n$/, "");
}

再帰呼び出しのある行でインデントを選択し、この後のコメント行を切り替えてスタイルを整えます。

... あなた独自のバージョンを作成したようですが、これは良いことです。訪問者が選択できるようになります。