[JS] Day9 - Dev Tools Domination

Day9 - Dev Tools Domination

🎯 기능 요구사항

• Dev Tools를 이용한다.

🚀 배운 점

console.log()

자바에서 사용하던 방식이랑 비슷하게 %s로 출력서식이 가능하다.

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

%c를 이용하면 스타일을 지정해줄 수 있다.

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

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

웹 콘솔에 경고 메시지를 출력 할 수 있다.

// warning
console.warn('warning');

웹 콘솔에 에러 메시지를 출력 할 수 있다.

// Error
console.error('Error');

웹 콘솔에 정보 메시지를 출력 할 수 있다.

// Info
console.info('Info');

console.assert()

boolean을 반환하는 조건식과 문자열을 인자로 받아 조건식이 false일 경우에만 문자열을 출력한다.

console.assert(1 === '1', 'That is wrong!');

console.group()

데이터를 그룹화하여 출력해준다.

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.groupEnd(`${dog.name}`);
});

console.time() 👍

작업에 걸리는 시간을 추적하는 데 사용할 수 있는 타이머를 시작하고 timeEnd()를 통해 타이머가 시작된 이후 경과된 시간을 밀리초 단위로 출력한다.

console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
});