如何在Chrome DevTools控制台中打印日志输出？

Question

我希望能够在Chrome DevTools的控制台中打印数组对象。有没有办法实现这个目标？

谢谢！

Answer 1

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

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

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

Answer 2

如果你在breakpoint，可以直接从Chrome DevTools控制台拨打JSON.stringify()：

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

Answer 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);}}})());

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