JavaScript 30 — Day 9–Dev Tools Domination

More a quick lecture than an exercise.

Wes went over some little tricks when using the using the browser dev tools, focusing mostly on the different console methods:

• console.log() — Y’all should know this one by now
• Interpolating in the console
  - Using a ‘%s’, you can grab the values from the following items within the log method. Template literals have become a go-to for me for stuff like this.

console.log("Hello I am a %s %s string!", "😎", "😖");

• Styling in the console
  - Using a ‘%c’ you can add different styles to a console message. While kind of interesting not entirely useful.

console.log(‘%c I am some great text’, ‘font-size: 50px; background: red; text-shadow: 3px 3px 2px #00CE03;’);

• console.warn() — ⚠️
• console.error() — ❌
• console.info() — ℹ
  - While this method does work in Chrome dev tools, the ℹ️ symbol has been removed from the console message. Not entirely certain why but it’s simply not there.
• console.assert()
  - This one is fun for getting quick testing.
• console.clear()
  - Straight forward enough. Just clears the console.
• console.dir()
  - Useful for when you select a particular element(s) from the DOM. Usually logging out the selected element, it would just tell you which element it is but nothing else about it. With .dir() it lists the properties available on the element as well.
• console.group(), .groupCollapsed, .groupEnd
  - If you want your console messages to be bundled rather than just in an arbitrary list.
• console.count()
  - Nice to tally repeated console logs
• console.time() and .timeEnd()
  - This is a great one for quick checks on how long certain things like API calls are taking.
  - Alternatively you could also use performance.now()