5 ms·

Chrome’s Console API: Greatest Hits

127 points by tomjakubowski 12y ago

soyuka 12y ago
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 12y ago
  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.
  - cleverjake 12y ago
    that hasn't been the case since IE 9
    - tajen 12y ago
      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-console-f12-changes-behavior http://stackoverflow.com/questions/18480948/ie-10-debug-cons...
      - cleverjake 12y ago
        yep. compat mode.
  - deanclatworthy 12y ago
    The simple solution is to polyfill: https://github.com/paulmillr/console-polyfill https://github.com/paulmillr/console-polyfill
    - ux-app 12y ago
      Another solution is to remove all debug commands as part of your build/deploy process.
  - rmchugh 12y ago
    too right, extremely annoying bug, because when you open the dev tools to debug it, it starts working again!
  - ahoge 12y ago
    > Don't use that in prod A linter will catch this.
  - Encosia 12y ago
    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 http://jsbin.com/hodavocuwu/1/edit
- ndesaulniers 12y ago
  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.
  - jsantell 12y ago
    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 https://bugzil.la/1077464
nirkalimi 12y ago
These look incredibly useful. Regardless if they work on IE or not.
nailer 12y ago
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 12y ago
  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
gprasanth 12y ago
console.copy is pretty useful to copy stuff to clipboard.
- jakub_g 12y ago
  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#copyobject https://developer.chrome.com/devtools/docs/commandline-api#c... [2] https://developer.chrome.com/devtools/docs/console-api https://developer.chrome.com/devtools/docs/console-api
- ndesaulniers 12y ago
  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 12y ago
    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!
Ginden 12y ago
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.
_ZeD_ 12y ago
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.
coolmitch 12y ago
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 12y ago
  Excellent post, thank you!

127 points by tomjakubowski 12y ago

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 12y ago
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.
- cleverjake 12y ago
  that hasn't been the case since IE 9
  - tajen 12y ago
    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-console-f12-changes-behavior http://stackoverflow.com/questions/18480948/ie-10-debug-cons...
    - cleverjake 12y ago
      yep. compat mode.
- deanclatworthy 12y ago
  The simple solution is to polyfill: https://github.com/paulmillr/console-polyfill https://github.com/paulmillr/console-polyfill
  - ux-app 12y ago
    Another solution is to remove all debug commands as part of your build/deploy process.
- rmchugh 12y ago
  too right, extremely annoying bug, because when you open the dev tools to debug it, it starts working again!
- ahoge 12y ago
  > Don't use that in prod A linter will catch this.
- Encosia 12y ago
  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 http://jsbin.com/hodavocuwu/1/edit
ndesaulniers 12y ago
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.
- jsantell 12y ago
  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 https://bugzil.la/1077464

nirkalimi 12y ago

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

nailer 12y ago

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 12y ago
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

gprasanth 12y ago

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

jakub_g 12y ago
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#copyobject https://developer.chrome.com/devtools/docs/commandline-api#c... [2] https://developer.chrome.com/devtools/docs/console-api https://developer.chrome.com/devtools/docs/console-api
ndesaulniers 12y ago
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 12y ago
  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!

Ginden 12y ago

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.

_ZeD_ 12y ago

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.

coolmitch 12y ago

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 12y ago
Excellent post, thank you!