Hacker News new | past | comments | ask | show | jobs | submit login
Chrome’s Console API: Greatest Hits (mitchrobb.com)
127 points by tomjakubowski on April 3, 2015 | hide | past | favorite | 23 comments



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.


Excellent post, thank you!


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.


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


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.


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.


I don't remember when exactly, but they fixed that at some point. I just ran this simple test in IE (without ever opening the dev tools) and got the alert: http://jsbin.com/hodavocuwu/1/edit


The simple solution is to polyfill: https://github.com/paulmillr/console-polyfill


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


too right, extremely annoying bug, because when you open the dev tools to debug it, it starts working again!


that hasn't been the case since IE 9


This person is reporting it for IE10, do you have more insights? Do you think his IE was in compatibility mode? http://stackoverflow.com/questions/18480948/ie-10-debug-cons...


yep. compat mode.


> Don't use that in prod

A linter will catch this.


Indeed, all of these are in Firefox, in Nightly at least. Though console.profile and console.profileEnd didn't seem to work? I'm sure someone from FF dev tools will turn up in this thread to clarify.


time/timeEnd, profile/profileEnd all work in Firefox up to Aurora -- current nightly has a new performance tool that will support profile/profileEnd in a few days, and will most definitely have it before uplift to Aurora https://bugzil.la/1077464


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


Didn't know about that, thanks!

Note though it's not `console.copy` but `copy`; it's a part of Command Line API [1] which is not the same as Console API [2] - command line API is not accessible from JS of the page.

[1] https://developer.chrome.com/devtools/docs/commandline-api#c...

[2] https://developer.chrome.com/devtools/docs/console-api


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.


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!


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.


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: