CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
Villi Magg
Villi Magg

Reputation: 1193

How to pretty print log output in Chrome DevTools Console?

I'm hoping to be able to pretty print array objects and such in the Console of Chrome DevTools. Is there any means to achieve this?

Thank you!

Upvotes: 41

Views: 25254

Answers (3)

Leonardo Danza
Leonardo Danza

Reputation: 77

I write some years later and i am older too ... but i found this response trying to pretty print a block of code so i leave tracks of my workarounds.

Now, on december 2020, You can always open js objects in console log clicking on related arrows on the left.

Example:

inject example code in browser

console log

opened object in console

or you can use as stated before the JSON.stringify() method.

If you whant to pretty print a block of js code minimized in a long line add somewhere at the beginnig of code a debugger statement, than paste to the console and run thwe code. The Debugger statement will be reached and the code will be opened into "sources" panel. Here you can use the pretty print button. Pay attention, for your security, to put your debugger statement prior of each other executed statement.

Example:

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

Result of running this code in console: example code stopped at breack point

pretty printed code

Upvotes: 0

EricRobertBrewer
EricRobertBrewer

Reputation: 1760

If you are at a breakpoint, you can call JSON.stringify() directly from the Chrome DevTools console:

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

Upvotes: 11

Petah
Petah

Reputation: 46040

You could format the data as JSON:

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

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

Upvotes: 60

Related Questions