如何在 Chrome DevTools 控制台中漂亮地打印日志输出？答案

【问题标题】：How to pretty print log output in Chrome DevTools Console?如何在 Chrome DevTools 控制台中漂亮地打印日志输出？
【发布时间】：2013-08-13 14:54:19
【问题描述】：

我希望能够在 Chrome DevTools 的控制台中漂亮地打印数组对象等。有什么方法可以实现吗？

谢谢！

【问题讨论】：

“漂亮的印刷品”是什么意思？默认情况下，控制台中出现的内容被格式化（不同类型的不同字体颜色，扩展对象和数组的能力等）
嗨@KonradDzwinel，我的意思是美化输出，以便更容易阅读。但我不是在谈论源文件的美化按钮 ({})。但我的意思是当你有一个数组 f.ex 时。并且不希望它作为内联数组打印到控制台但堆叠。谢谢！
DevTools 没有更改默认控制台输出的设置。但是，您可以使用自己的函数覆盖 console.log。在这里查看我的答案：stackoverflow.com/questions/18178896/…

标签： google-chrome google-chrome-devtools

【解决方案1】：

您可以将数据格式化为 JSON：

console.log(JSON.stringify({foo:1, bar:2}, null, 4));

{
    "foo": 1,
    "bar": 2
}

【讨论】：

从来不知道JSON.stringify(value[, replacer[, space]]) 有多个参数...谢谢。

【解决方案2】：

如果您在 breakpoint，您可以直接从 Chrome DevTools 控制台调用 JSON.stringify()：

>  JSON.stringify(anObject, null, 2);
<- "{
     "field": "foo",
     "array": [
       {
         "element": 1
       },
       {
         "element": 2
       }
     ],
     "object": {
       "inner_field": "bar"
     }
   }"
-----------------------------
>

【讨论】：

【解决方案3】：

几年后我写了，而且我也老了……但我发现这个回复试图漂亮地打印一段代码，所以我留下了我的解决方法。

现在，在 2020 年 12 月，您可以随时在控制台日志中单击左侧的相关箭头打开 js 对象。

例子：

或者您可以按照 JSON.stringify() 方法之前的说明使用。

如果你想漂亮地打印一个长行中最小化的 js 代码块，请在代码开头的某处添加 debugger 语句，而不是粘贴到控制台并运行代码。将到达 Debugger 语句，代码将在“源”面板中打开。在这里您可以使用漂亮的打印按钮。请注意，为了您的安全，将您的调试器语句放在其他执行语句之前。

例子：

((function(){/*AutoFill_LastPass*/_LPG=function(i){debugger; return document.getElementById(i);};_LPT=function(i){return document.getElementsByTagName(i);};if(_LPG('_lpiframe')){_LPG('_lpiframe').parentNode.removeChild(_LPG('_lpiframe'));}if(_LPG('_LP_RANDIFRAME')){_LPG('_LP_RANDIFRAME').parentNode.removeChild(_LPG('_LP_RANDIFRAME'));}_LASTPASS_INC=function(u,s){if(u.match(/_LASTPASS_RAND/)){alert('Cancelling_request_may_contain_randkey');return;}s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src',u);if(typeof(window.attachEvent)!='undefined'){if(_LPT('body').length){_LPT('body').item(0).appendChild(s);}else{_LPT('head').item(0).appendChild(s);}}else{if(_LPT('head').length){_LPT('head').item(0).appendChild(s);}else{_LPT('body').item(0).appendChild(s);}}};_LASTPASS_INC('https://lastpass.com/bml.php'+String.fromCharCode(63)+'v=0&a=0&r='+Math.random()+'&h=456d3ca99bf926f1727a6944fa06db246df102044140c09f0c9922b6ab1fa88a&u='+escape(document.location.href));_LPM=function(m){var targetFrame=_LPG(m.data.frame);if(null!=targetFrame&&typeof(targetFrame)!='undefined'&&typeof(targetFrame.contentWindow)!='undefined')targetFrame.contentWindow.postMessage(m.data,'*');};if(window.addEventListener){window.addEventListener('message',_LPM,false);}else{window.attachEvent('onmessage',_LPM);}var t=document.createElement('iframe');t.setAttribute('id','_LP_RANDIFRAME');t.setAttribute('sandbox','allow-scripts');t.frameBorder='0';t.setAttribute('src','https://lastpass.com/bml.php?u=1&hash=1&gettoken=0&donotcache=1407688374608280546');t.setAttribute('onload',"document.getElementById('_LP_RANDIFRAME').contentWindow.postMessage('ae24188b13eef4ddac2c37d1c449c47156d0a136c7db1d2ca0bd68060bffcc79','*');");if(typeof(window.attachEvent)!='undefined'){if(_LPT('body').length){_LPT('body').item(0).appendChild(t);}else{document.getElementByTagName('head').item(0).appendChild(t);}}else{if(_LPT('head').length){_LPT('head').item(0).appendChild(t);}else{_LPT('body').item(0).appendChild(t);}}})());

在控制台运行此代码的结果：

【讨论】：