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

我正在尝试以pretty print人类可读的形式找到一种JavaScript数据结构,以便进行调试.

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

除了找到将JavaScript数据结构转储到人类可读字符串的好方法之外,我可以处理所有这些事情.JSON会这样做,但它确实需要很好地格式化和缩进.我通常会使用Firebug优秀的DOM转储功能,但我真的需要能够立刻看到整个结构,这在Firebug中似乎是不可能的.

欢迎任何建议.

提前致谢.

1> Jason Buntin..：

---

像这样使用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文件 - 它可以用于任何库等.

---

对Firefox 3.5及更高版本的更新,JSON.stringify是内置的.(https://developer.mozilla.org/En/Using_JSON_in_Firefox),因此,如果您只是为了调试目的而试图查看JSON对象,则可以在没有额外JS依赖项的情况下执行此操作.

---

这几乎肯定是你将获得的最佳答案.我教过4或5个非程序员来读取和编辑JSON.stringified数据结构,并广泛用于配置文件.

---

也在Chrome中.但是,JSON.stringify在循环数据`JSON.stringify((function(){var x = []; x.push(x); return x})())`以及许多其他类型的对象`JSON上失败.字符串化(/富/)`.

2> PhiLho..：

---

我编写了一个以可读形式转储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:它不处理引用中的循环.

编辑

我制作了缩进版.

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

使用递归调用在行上选择缩进,并通过在此之后切换注释行来支撑样式.

......我看到你掀起了你自己的版本,这很好.游客可以选择.

---

这种方法的一个简短之处(与Jason建议的JSON.stringify方法相比)是它没有正确显示对象数组.当您有一个对象数组时,它显示为[对象对象].

3> Dharmanshu K..：

---

您可以使用以下内容

4> John Milliki..：

---

在Firebug,如果您只是console.debug ("%o", my_object)在控制台中单击它并输入交互式对象资源管理器.它显示整个对象,并允许您展开嵌套对象.

5> Davem M..：

---

对于Node.js,请使用:

util.inspect(object, [options]);

API文档

6> RaphaelDDL..：

---

对于那些寻找查看对象的绝佳方式的人,请查看prettyPrint.js

创建一个具有可配置视图选项的表,以便在doc上的某个位置打印.比看起来更好看console.

var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);

7> knowtheory..：

---

我正在编程,Rhino我对这里发布的任何答案都不满意.所以我写了自己漂亮的打印机:

function pp(object, depth, embedded) { 
  typeof(depth) == "number" || (depth = 0)
  typeof(embedded) == "boolean" || (embedded = false)
  var newline = false
  var spacer = function(depth) { var spaces = ""; for (var i=0;i 0 ) {
      if (embedded) { newline = true }
      var content = ""
      for each (var item in object) { content += pp(item, depth+1) + ",\n" + spacer(depth+1) }
      content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
      pretty += "[ " + content + "\n" + spacer(depth) + "]"
    } else { pretty += "[]" }
  } 
  else if (typeof(object) == "object") {
    if ( Object.keys(object).length > 0 ){
      if (embedded) { newline = true }
      var content = ""
      for (var key in object) { 
        content += spacer(depth + 1) + key.toString() + ": " + pp(object[key], depth+2, true) + ",\n" 
      }
      content = content.replace(/,\n\s*$/, "").replace(/^\s*/,"")
      pretty += "{ " + content + "\n" + spacer(depth) + "}"
    } else { pretty += "{}"}
  }
  else { pretty += object.toString() }
  return ((newline ? "\n" + spacer(depth) : "") + pretty)
}

输出如下所示:

js> pp({foo:"bar", baz: 1})
{ foo: "bar",
  baz: 1
}
js> var taco
js> pp({foo:"bar", baz: [1,"taco",{"blarg": "moo", "mine": "craft"}, null, taco, {}], bleep: {a:null, b:taco, c: []}})
{ foo: "bar",
  baz: 
    [ 1,
      "taco",
      { blarg: "moo",
        mine: "craft"
      },
      null,
      undefined,
      {}
    ],
  bleep: 
    { a: null,
      b: undefined,
      c: []
    }
}

我还将其作为一个要点发布在此处,以便将来可能需要进行任何更改.

---

它可能是一个漂亮的打印机,但代码实际上看起来不是很漂亮:)