11 ms·
Advanced console.log Tips and Tricks (2020)
- onion2k 5y agoPractically every time I do a 'console.log' to see the value of something in the current page state I actually wanted a 'debugger' statement instead. Pausing execution so I can look at other things around what I wanted to log often proves very useful and let's me get to the root cause of a problem faster.
- Griffinsauce 5y agoThis is really missing at the moment. I wish there was a "debugger snapshot" functionality that does not pause execution and creates a snapshot of the current DOM and state. Probably a performance nightmare but being able to continue and inspect what happened in retrospect is what makes console.log a powerful debugging tool IMO. You could extrapolate this to the time-traveling debuggers we've seen for Redux and other tools. That stuff is super powerful.
- MindTwister 5y agoAre you lamenting that you reach for `console.log` first, instead of using the `debugger` statement, or are you wishing there was a `debugger` statement, because there absolutely is a `debugger` statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- jansan 5y agoconsole.log(JSON.stringify(myValue, null, 2)) could be what you are looking for.
- onion2k 5y agoThat's just a prettier console log. I almost always want to use the debugger.
- mrblampo 5y agoMaybe my debugger skills aren't strong enough, but I find that when I'm trying to reason about how some complicated code is executing, a debugger statement forces me to wade through tons of internals in libraries I don't care about. Some well-placed console logs give me much less information overload.
- bryanrasmussen 5y agoThe same here, also in my case at least 90% of the time when there is a problem I know where the problem is I just need to look at a couple things and confirm which of a couple scenarios could be causing the problem.
- hibbelig 5y agoInteresting. I feel the opposite. Reading through multiple log lines somehow tells me something about the problem (program) that I don’t get when I use the debugger.
- e67f70028a46fba 5y agoNot directly console.log related, but you can use the console-only monitorEvents() method to log all the events triggered on an element: https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel https://developers.google.com/web/updates/2015/05/quickly-mo... Very useful when you are wiring events together on the front end. Surprised there isn’t a standard way to do this in the DOM.
- gonzo41 5y agoI did not know this. Thanks!
- sombremesa 5y ago> Not directly console.log related Don't worry, neither is the article. Words don't mean much I guess.
- Liquidor 5y agoYou can also use monitor(func), debug(func) and inspect(func) and more :) https://developer.chrome.com/docs/devtools/console/utilities/#monitor https://developer.chrome.com/docs/devtools/console/utilities...
- jakub_g 5y agoMy favorites: - `$0` to refer to last selected DOM node - `copy(obj)` to copy something to clipboard (that might be hard to copy manually; for example long strings are often cut when selecting manually for copying)
- beebeepka 5y agoWhat pains me that browsers no longer put blue icon with console.info. Like, what's the point of having it if it's going be virtually indistinguishable from .log? It annoying.
- djbeadle 5y agoFirefox shows a little “i” in a circle to signify “info” but it’s subtle and I didn’t realize what it was for a long time.
- theshrike79 5y agoLinters actually consider .log to be an error nowadays by default. They only accept debug/info/warn/error. I take advantage of this so that my .log lines are stuff I need while developing but they shouldn't get committed, that's what the actual named log lines are for.
- Blahah 5y agoYou can filter the console by info/debug/warn/error which makes info pretty useful imo.
- TAForObvReasons 5y agoconsole.time{,Log,End} take an optional argument to label the timers, changing the "default" text to the label but also allowing multiple timers running simultaneously
- wernercd 5y ago"upgrade to see more" paywalled story...
- spinny 5y agoThe google cache doesn't have a paywall
- repsilat 5y agoMy dumb dead-simple trick that you've probably independently invented yourself: when I want to log variables x,y,z I write console.log({x,y,z}) not console.log(x,y,z) Who needs pretty-printing, formatting libraries, string interpolation etc?
- msikora 5y agoYep, I have "invented" this myself as well :)
- andra_nl 5y agoSame here.
- NegativeLatency 5y agoAnd the old version with json.stringify
- missblit 5y agoIt mentions the CSS-styling formatting specifier, but skips over the more mundane "printf-style" ones. const obj = {objection: 'overruled'}; console.log( 'console.log is the #%d %s API ever written %f\% no arguing! %o %O !!!', 1, 'greatest', 100, obj, obj); I've tried to keep my example compliant but it's still a very tiny loosy-goosy standard, for example at least in Firefox you can write %.0f to skip printing the fractional part of the float, but the standard doesn't mention this.
- hardwaresofton 5y agoIf it's not on all the browsers, please don't use any of this shit. Every time you use a chrome-specific browser you encourage the eventual death of all the non-chromium browsers which might be great for you right now, but is bad for the ecosystem in the long term. Also, please stop writing tech blogs on medium. That well paid tech people of all people would be constrained to a paywall-middleman is an indictment of our entire field.
- tdy_err 5y agoAll the shit is cross-browser supported
- hardwaresofton 5y agoAwesome, glad that's the case. Guess I have to hold my breath for a future where technologists stop putting their knowledge behind paywalls then.
- andra_nl 5y agoAlso, none of this stuff should ever be used in production code, only during development (at least IMHO). So even if some things were browser specific, it shouldn't hurt anyone but yourself if you run into incompatibilities while using any of it.
- vbezhenar 5y agoIs there any web standard mandating support of console API?
- dotlog 5y agoconsole.table doesn't work in IE6 DON'T YOU FEEL STUPID NOW?!
- burk96 5y agoconsole.table() is a favorite of mine for a variety of reasons, but one of the most important to me is that it's really easy to quickly find a giant table in a wall of text if I'm logging a bunch of other stuff.
- davidkunz 5y agoFor this I use console.error (red) or console.warn (yellow).
- Griffinsauce 5y agoA small extra trick: If you use arrow functions without a body you can log and fallback to the original statement. Example starting point, you're wondering what message is. ``` const upperCase = (message) => message.upperCase() ``` Don't add a body, just log and continue: ``` const upperCase = (message) => console.log(message) || message.upperCase() ```
- Stratoscope 5y agoThat will work, because console.log() returns undefined. It is a bit subtle for my taste, though. My suggestion for clarity is to go ahead and make the function have a body with {}: const upperCase = (message) => { console.log(message); return message.upperCase(); }; Of course you may disagree, but no argument there, as I said it's a matter of taste. (BTW backticks, either triple or single, do not work on HN. Indent by two spaces if you want code formatting.)
- Griffinsauce 5y agoYeah, I'm working on the assumption that this code is not committed but for a quick debug. Any code that is shared shouldn't rely on that, I agree. Thanks for the tip!
- genezeta 5y agoSince most of the times I want "a quick debug" I'm already on my browser and quite probably with the dev tools already open, I prefer right-clicking on a line and using "Add Log" (in Firefox) or "Add logpoint" (in Chrome-based browsers). It avoids having to modify the source and then clean it up when I'm done.
- wonnage 5y agoYou can also use the comma operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... `const upperCase = (message) => (console.log(message), message.upperCase())` The function body needs to be in parens. Maybe not the most useful for this case, but I've used this when setting logpoints in Chrome to log a variable and save it to a global for further inspection.
- metafunctor 5y agoOne thing to watch out is that console.log is asynchronous. If the objects to be printed change between console.log() and the actual printing, the output you see may not represent the state when console.log() was called.
- alessioalex 5y agoVery useful advice. In those situations if you're trying to log an object just do `JSON.stringify(obj, null, 2)` to be sure of the state at that time.
- Stratoscope 5y agoconsole.log is not asynchronous. For example, this code: let a = "hello"; console.log( a ); let a = "goodbye"; will always reliably print "hello", not "goodbye". What you're referring to is the fact that when you expand an object or array in the console, then you see the contents of that object or array at the time you expand it, not as it originally existed when console.log() was called. This is why alessioalex's sibling comment is so useful. By logging the output from JSON.stringify(), you are logging a string whose value will not change.
- metafunctor 5y agoThat's... what asynchronous means. The call to console.log() will return before the console output is actually produced.
- MatthewMob 5y agoNo. It means that when you invoke `console.log` in a browser it "logs" a reference to an object instead of serialising it. This log is still synchronous, but when you expand it in the console its properties are dereferenced and may be different from when the original log was made. The log, however, is still instantaneous and synchronous.
- metafunctor 5y ago
- faichai 5y agoAn historic problem with logging is that if you wanted to create a logging library, every time you logged you would lose the line number of the log statement as it would just show that of the library rather than the call point. This is solved by separating out your log library into a separate file, and then blackboxing it. Voila, original call points are preserved making debugging easier and your logs more useful.
- skywal_l 5y agoWow, group/groupEnd is a life changer!
- kilodeca 5y agoThis boys never read MDN
- pawelduda 5y agoHaven't seen this mentioned, but here's one: const dog = { name: "Dog" } console.log(dog) VM287:1 {name: "Dog"} console.log({dog}) VM305:1 {dog: {…}}dog: {name: "Dog"}__proto__: Object
- ngcazz 5y agoWhat did you mean to emphasize here? Cos what I'm seeing is the language feature (ES6's "shorthand properties"), not something inherent to `console`.
- pawelduda 5y agoThe second example effectively prints an object with it's name. I often have multiple console.log statements and by utilizing that I know what each one is referring to just by typing 2 more characters. EDIT: perhaps a better description by someone else https://news.ycombinator.com/item?id=27524164 https://news.ycombinator.com/item?id=27524164
- umaar 5y agoI've created a collection of 200+ tips like this on my website: https://umaar.com/dev-tips/ https://umaar.com/dev-tips/
- jakub_g 5y agoSomething useful about logging that maybe not everyone knows about: If you can't or don't want to pollute your code with `console.log` for debugging (can't edit original code; too long to rebuild; etc.): You can add "log points" (Chrome and Firefox at least) directly in source view of devtools at specific lines of code https://www.thedevelobear.com/post/logpoints/ https://www.thedevelobear.com/post/logpoints/ You can also use "conditional breakpoint" to do conditional logging with `console.log`, again, without leaving devtools.
- Kwantuum 5y agoconsole.dir does the same thing as console.log in every modern browser. I'm tired of seeing this "tip", and it's a pretty clear indication the article is poorly researched, the only difference is that it pre-expands the object.