

Chrome’s Console API: Greatest Hits - tomjakubowski
http://www.mitchrobb.com/chromes-console-api-greatest-hits/

======
coolmitch
Author here-- really happy that people are finding this useful. I wrote it a
few months ago when frustration with the way Chrome logged objects led me into
their docs and I found a bunch of cool stuff I hadn't seen before.

~~~
johnmaguire2013
Excellent post, thank you!

------
nailer
Re: caveats, if you want to snapshot something at a point in time but still
have it look nice:

    
    
        console.log(JSON.stringify(someObject, null, 2))
    

Will nicely indent it for you.

~~~
cleverjake
two things about the `null` - the "replacer" function

1\. in IE 8, it will choke. it needs to be a function (hopefully you don't
have to care about IE 8, though)

2\. in all other JSON.strigifable browsers, you can skip it with a falsey
value, which is what the `null` is doing here. As a result, you can also use
`0` (e.g. stringinfy(foo, 0, 2)), which I like because I can type it faster

------
soyuka
The console api isn't really linked to chrome. I prefer the chrome debugging
tool but those things should work on firefox too. I think you could be clearer
on this point.

~~~
tajen
Don't use that in prod, because it doesn't work in IE and it will cause your
js to stop working.

In IE the 'console' object doesn't even exist if the developer tools aren't
displayed, so if you use "console.log" in your program, your js will just
throw an NPE.

Note that if you try closing the Developer Tools, 'console' is still declared
for this page and all descendant pages. To test 'console.log' you need to
avoid opening the devtools and open a new tabs.

~~~
deanclatworthy
The simple solution is to polyfill: [https://github.com/paulmillr/console-
polyfill](https://github.com/paulmillr/console-polyfill)

~~~
ux-app
Another solution is to remove all debug commands as part of your build/deploy
process.

------
gprasanth
console.copy is pretty useful to copy stuff to clipboard.

~~~
ndesaulniers
Looks like there's also:

* console.watch & console.unwatch

* console.timeline & console.timelineEnd

* console.timeStamp, console.time, console.timeEnd

* console.markTimeline

* console.groupCollapsed

* console.exception

In Firefox Nightly. A few of the timeline ones don't seem to work just yet, as
the timeline is currently being prototyped in Nightly.

~~~
jsantell
in Aurora (Fx39), profile/time tools create profiles and marks on the
timeline, but nightly (Fx40) has a combined tool and the profile/profileEnd
commands landing soon

watch/unwatch are from Object.prototype, confusingly enough!

------
_ZeD_
the "caveat" about "live" data is only in chrome console. For example firebug
does not have this problem.

Another pet peeve of mine: at the moment, only in firebug I can call
console.log() passing a function, get a nice, clickable function definition,
that can get me directly to the "debugger" section, at the right place where
the function is.

------
Ginden
Simple, useful code (uses ES6 syntax) - `console.log({a, b, c, d})`- it's
shortcut for `{a: a, b: b, c: c, d: d}` and is less invasive than breakpoint.

------
nirkalimi
These look incredibly useful. Regardless if they work on IE or not.

