[wesbos30] 09. 개발자 도구 활용

💡 크롬 개발자 도구의 기능 중에서 개발자에게 유용한 여러 console 메서드에 대해 알아보자!

---

Regular

console.log('hello')
// hello

Interpolated(문자열 보간)

두 번째 인수가 %s 자리에 들어간다.

console.log('Hello I am a %s string', '💩')
console.log(`Hello I am a ${'💩'} string`)

// 둘 다 Hello I am a 💩 string!

Styled

콘솔에 CSS 스타일을 적용시킬 수 있다.

console.log(
  '%c I am some great text',
  'font-size:50px; background:red; text-shadow: 10px 10px 0 blue',
)

warning

console.warn('OH NOOO')

error

console.error('Shit!')

Testing

주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력한다. (참일 경우 아무것도 하지 않는다.)

console.assert(1 === 2, "That's Wrong!")

Cleaning

콘솔창 클리어

console.clear()

Grouping Together

const dogs = [
  { name: 'Snickers', age: 2 },
  { name: 'hugo', age: 8 },
]

dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`)
  console.log(`This is ${dog.name}`)
  console.log(`${dog.name} is ${dog.age} years old`)
  console.log(`${dog.name} is ${dog.age * 7} dog years old`)
  console.groupEnd(`${dog.name}`)
})

count

console.count('Park')
console.count('Park')
console.count('Jungsub')
console.count('Jungsub')
console.count('Park')
console.count('Jungsub')
console.count('Jungsub')
console.count('Park')
console.count('Jungsub')
console.count('Jungsub')

time

특정 작업의 소요시간을 측정할 때 사용한다. console.time(’타이머 이름’) 메서드를 호출하면 타이머가 시작되고, console.timeEnd(’타이머 이름’) 메서드를 호출하면 타이머를 멈추고 지난 시간을 출력한다.

console.time('answer time')
alert('first')
console.timeLog('answer time')
alert('second')
console.timeEnd('answer time')

console.time(’answer time’) 메서드를 호출하면 answer time 타이머를 시작시킨 후, 첫 번쨰 경고 상자 띄움

• ⇒ 첫 번째 경고 상자를 닫으면

console.timeLog("answer time")가 사용자가 첫 번째 경고 상자를 닫는데 걸린 시간을 기록한 후 출력

• ⇒ 두 번째 경고 상자를 닫으면

console.timeEnd("answer time")가 answer time 타이머를 종료시킨 후, 총 걸린 시간을 출력