Console/Canary Tips

console_tips.md

chrome console

colorize your logs

normal log message

console.log('normal log message')

log message with color

console.log('%clog message with color', 'color: blue')

log message with multiple colors

console.log('%clog message with not one color, %cbut two!', 'color:blue', 'color:red')

fully-formatted log message!

console.log('%clog message with background color and padding', 'color:white, background-color:blue, padding: 6px')

---

log objects, not variables

Instead of this:

console.log("This is myValue:", myValue);
=> This is myValue: 3

Do this:

console.log({myValue});
=> {myValue: 3}

Logging multiple values?

console.log({myValue, anotherValueThatIsAlsoMine});
=> {myValue: 3, anotherValueThatIsAlsoMine: "also 3"}

new chrome canary feature -- log points

No need to add console.log statements to your code to log values. Instead:

1. find your code in the dev console (Sources tab)
2. right-click the line number
3. select Add logpoint...
4. enter the label or value you want to log.
   • if logging a value, enclose it in curly brackets {myValue}
5. refresh!

ymmv: it's a little tedious to find the right spot in code, right-click, etc., but it saves some cleanup