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

问题描述

我正在尝试找到一种方法，以人性化的形式查找JavaScript数据结构，以进行调试 pretty print 。

I'm trying to find a way to pretty print a JavaScript data structure in a human-readable form for debugging.

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

I have a rather big and complicated data structure being stored in JS and I need to write some code to manipulate it. In order to work out what I'm doing and where I'm going wrong, what I really need is to be able to see the data structure in its entirety, and update it whenever I make changes through the UI.

除了找到一种将JavaScript数据结构转储为人类可读字符串的好方法，我可以处理所有这些东西。 JSON会做，但它真的需要很好的格式和缩进。我通常会使用Firebug的优秀的DOM转储功能，但我真的需要能够一次看到整个结构，这在Firebug中似乎是不可能的。

All of this stuff I can handle myself, apart from finding a nice way to dump a JavaScript data structure to a human-readable string. JSON would do, but it really needs to be nicely formatted and indented. I'd usually use Firebug's excellent DOM dumping stuff for this, but I really need to be able to see the entire structure at once, which doesn't seem to be possible in Firebug.

欢迎任何建议。

提前感谢。

推荐答案

我写了一个函数来以可读的形式转储一个JS对象，尽管输出不是缩进的，但不应该太难以添加：我从Lua制作了一个这个函数（它是更复杂）处理这个缩进问题。

I wrote a function to dump a JS object in a readable form, although the output isn't indented, but it shouldn't be too hard to add that: I made this function from one I made for Lua (which is much more complex) which handled this indentation issue.

这是简单版本：

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：它不处理引用中的循环。

I will look at improving it a bit.
Note 1: To use it, do od = DumpObject(something) and use od.dump. Convoluted because I wanted the len value too (number of items) for another purpose. It is trivial to make the function return only the string.
Note 2: it doesn't handle loops in references.

编辑

我做了缩进的版本。

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

使用递归调用选择您的缩进行，在此之后切换注释行。

Choose your indentation on the line with the recursive call, and you brace style by switching the commented line after this one.

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

... I see you whipped up your own version, which is good. Visitors will have a choice.

这篇关于JavaScript数据格式/漂亮的打印机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！