Beyond Console.log() – Level up Your Debugging Skills — SitePoint

console.log() is a great tool, but your browser's developer tools can do so much more. Learn how to take your coding and debugging to the next level.

www.sitepoint.com

말 그대로 console.log()를 200% 활용하는 방법들!!

중괄호 쓰기

중괄호를 쓰면 변수 이름을 같이 출력할 수 있음

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

로그 포맷 사용 가능

%s: logs as strings
%i or %d: logs as integers
%f: logs as floating-point value
%o: logs as an expandable DOM element
%O: logs as an expandable JavaScript object

console.log('%ix %s developer', 10, 'console');
// 10x console developer

console.log('%i', 12.34455241234324234); // 12

console.log('%cPay attention to me','color:firebrick;font-size:40px')

그룹으로 출력할 수도 있어요

console.group()을 사용하면 그룹 출력도 가능~!!

const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);

에러 종류별로 필터 가능

console.log(), console.info(), console.error(), console.warn() 으로 나눠서 출력하면

디버거에서 종류별로 나눠서 볼 수 있음

출력된 횟수도 같이 출력하고 싶다!

횟수도 같이 출력하고 싶을 땐 console.count()를 씀.

console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1

어떤 스크립트가 실행된 시간을 측정하고 싶다!

실행된 시간을 측정할 때는 console.time()과 console.timeEnd()를 쓰면 됨.

console.time('go');
for(let i = 0; i < 200000; i+=1) {
  let x = Math.random()*2000;
}
console.timeEnd('go'); // go: 11.7861328125 ms

#chrome

Chrome에서 ERR_BLOCKED_BY_ORB 이미지 차단 문제와 해결 과정

[해결] 크롬 114 버전에서 popover API 때문에 editor.js, ionic 등등의 라이브러리들에서 UI 깨지는 문제

console.log() 제대로 활용하는 방법