[JavaScript30] 9,10,11 강 정리

9강 . 14 Must know Dev tools Tricks ( 꼭 알아야하는 14가지 개발 도구 요령 (?))

 

콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다.
< 콘솔 객체에서 사용할 수 있는 메소드 >

 

 

console.log() 의 reqular, Interpolated, style 출력 방법

console.log('hello');
 
console.log('Hello I am a %s string!', 'yeaseul');
const v = 'yeaseul';
console.log(`Hello I am a ${v} string!`);
 
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow:10px 10px 0 blue');

 

console.warn() : 경고 메시지를 출력. 

console.warn('OH NOO');

 

console.error() : 에러메시지를 출력.

console.error('Shit');

console.info() : 정보성 로그 출력.

console.info('Crocodiles eat 3-4 peaple per year');

console.assert() : 첫번째 인자가 false인 경우 로그 메시지와 스택 트레이스를 콘솔에 출력.

console.dir() :

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'),' That is wrong!');
console.dir(p);

 

console.group() : 그룹을 생성하여 레벨별로 출력을 들여쓰기 한다.

console.groupCollapsed() : 그룹을 닫힌채로 생성 깔끔하게(?) 보고싶을때 사용

console.groupEnd() : 현재 생성된 그룹을 닫는다.

dogs.forEach(dog=>{
  // console.group(`${dog.name}`);
  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} years old`);
  console.groupEnd(`${dog.name}`);
})

 

console.count() : 라벨이 호출된 횟수를 기록

console.count('kim');
console.count('kim');

 

console.time() : 지정된 이름으로 timer를 시작.

console.timeEnd() : 지정된 timer를 중지하고 타이머 시작으로 부터 경과된 시간을 출력.

console.time('fetching data');
alert('what!');
console.timeEnd('fetching data');