Day 9 - Dev Tools Domination

이번 과제는 개발자의 관점에서 사용하는 유용한 console의 메소드에 대한 과제이다. 사실 console.log, console.dir, console.table 외에는 모두 처음 들어본 내용이었고, 디버깅을 바보같이 하고 있었다는 생각에 반성하기도 했다.

console.log()

1
2
3
4
5
6
7
8
// Regular
console.log('hello');

// Interpolated
console.log('Hello I am a %s string!', '💩');

// Styled
console.log('%c I am some great text', 'font-size:30px; background:red;');

모두가 잘 아는 console.log()이다. 개인적으로 두번째의 Interpolated 방식보다는 ${var}~ 방식을 선호한다. 콘솔에 style을 줄 수 있다는 것은 몰랐다.(필요한 일은 잘 없을 것 같다)

console.warn(), console.error(), console.info()

1
2
3
4
5
6
7
8
// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');

각각 경고, 에러, 정보(ⓘ표시)에 대한 메소드이다.

console.assert()

1
2
3
// Testing
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'You did not select the right element!');

자바스크립트에서 assert를 사용할 수 있는지 처음 알았다. console.assert()는 특정 조건을 첫번째 인자로, 그 특정 조건이 false라면 두번째 인자를 출력한다. 이런 조건들을 지금까지 if (~): console.log(~) 방식으로 사용해왔는데, 유용하게 쓸 것 같다.

Grouping - console.group()

1
2
3
4
5
6
dogs.forEach((dog) => {
    console.groupCollapsed(`${dog.name}`);
    console.log(`This is ${dog.name}`);
    console.log(`${dog.name} is ${dog.age * 7} years old`);
    console.groupEnd(`${dog.name}`);
});

console.group() 부터 console.groupEnd()까지 한 그룹으로 묶어 안의 내용들을 콘솔에 나타내준다. 그룹의 기준은 각 group 메소드의 인자이다. Collapsed를 추가하면 닫혀있는 상태로 그룹 기준 이름만 콘솔에 나타내고, 개발자 도구에서 펼쳐서 각 내용을 볼 수 있다.

console.count()

1
2
3
4
5
console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');

각 동일한 인자의 내용이 얼마나 콘솔에 찍혔는지를 카운트해준다.

console.time()

1
2
3
4
5
6
7
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then((data) => data.json())
  .then((data) => {
    console.timeEnd('fetching data');
    console.log(data);
  });

성능(시간) 측정 시 유용하게 사용할 console.time() 메소드이다. console.time()을 시작으로 console.timeEnd() 까지의 시간을 측정한다. console.group()과 사용법은 비슷하다.

console.dir(), console.table()

1
2
console.dir(dogs);
console.table(dogs);

각 객체를 각각 디렉토리 형태, 테이블 형태로 표시한다.