您可以使用JSON。使用未格式化JSON的stringify函数。它以格式化的方式输出。

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

这

{ "foo": "sample", "bar": "sample" }

into

 {
     "foo": "sample", 
     "bar": "sample" 
 }

现在数据是可读的格式，您可以使用@A建议的谷歌代码美化脚本。Levy对其进行颜色编码。

值得补充的是，IE7和更老的浏览器不支持JSON。stringify方法。

SyntaxHighlighter是一个用JavaScript开发的功能齐全的自包含代码语法高亮显示工具。要了解SyntaxHighlighter的功能，请查看演示页面。

对于语法高亮显示，使用代码修饰。我相信这就是StackOverflow用来突出显示代码的方法。

将格式化的JSON包装在代码块中，并赋予它们“prettyprint”类。 在你的页面中包含pretty .js。 确保文档的主体标记在加载时调用prettyPrint()

您将看到以页面中布局的格式突出显示的JSON语法。请看这里的例子。如果你有一个这样的代码块:

<code class="prettyprint">
    var jsonObj = {
        "height" : 6.2,
        "width" : 7.3,
        "length" : 9.1,
        "color" : {
            "r" : 255,
            "g" : 200,
            "b" : 10
        }
    }
</code>

它看起来是这样的:

var jsonObj = {
    "height" : 6.2,
    "width" : 7.3,
    "length" : 9.1,
    "color" : {
        "r" : 255,
        "g" : 200,
        "b" : 10
    }
}

这对缩进没有帮助，但其他答案似乎解决了这个问题。

这里有一个轻量级的解决方案，只做OP要求的，包括高亮显示，但没有其他:我如何使用JavaScript漂亮地打印JSON ?

如果您只是从调试的角度来做这件事，那么您可以使用一个Firefox插件(如JSONovich)来查看JSON内容。

新版本的Firefox目前正在测试中，它将在本地支持这一点(很像XML)。

像这样的事情??

pretty-json

https://github.com/warfares/pretty-json

生动的示例:

http://warfares.github.io/pretty-json/