37

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

谢谢！

4

3 回答 3

57

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

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

{
    "foo": 1,
    "bar": 2
}
于 2014-01-07T20:12:51.677 回答
11

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

>  JSON.stringify(anObject, null, 2);
<- "{
     "field": "foo",
     "array": [
       {
         "element": 1
       },
       {
         "element": 2
       }
     ],
     "object": {
       "inner_field": "bar"
     }
   }"
-----------------------------
>
于 2016-10-17T20:23:28.397 回答
0

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

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

例子：

在浏览器中注入示例代码

控制台日志

在控制台中打开对象

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

如果您想漂亮地打印在长行中最小化的 js 代码块，请在代码开头的某处添加调试器语句，而不是粘贴到控制台并运行代码。将到达 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);}}})());

在控制台中运行此代码的结果： 示例代码在断点处停止

漂亮的打印代码

于 2020-12-04T10:47:45.137 回答