JavaScript数据格式化/漂亮的打印机

javascript json debugging

2022-08-30 04:38:33

我试图找到一种方法，以人类可读的形式“漂亮地打印”JavaScript数据结构以进行调试。

我有一个相当大而复杂的数据结构存储在JS中，我需要编写一些代码来操作它。为了弄清楚我在做什么以及我哪里出错了，我真正需要的是能够看到整个数据结构，并在我通过UI进行更改时更新它。

所有这些事情我都可以自己处理，除了找到一种将JavaScript数据结构转储到人类可读字符串的好方法。JSON可以，但它确实需要很好地格式化和缩进。我通常会使用Firebug出色的DOM转储功能，但我真的需要能够一次看到整个结构，这在Firebug中似乎是不可能的。

答案 1

使用Crockford的JSON.stringify，如下所示：

var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...

变量将如下所示：text

[
  "e",
   {
      "pluribus": "unum"
   }
]

顺便说一句，这只需要那个JS文件 - 它将与任何库一起使用，等等。

答案 2

我写了一个函数来以可读的形式转储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.dump。很复杂，因为我也想要len值（项目数量）用于其他目的。使函数仅返回字符串是微不足道的。
注2：它不处理引用中的循环。od = DumpObject(something)

编辑

我做了缩进的版本。

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$/, "");
}

选择带有递归调用的行上的缩进，然后通过切换此行后面的注释行来大括号样式。

...我看到你鞭打了自己的版本，这很好。游客将有一个选择。