자바스크립트에서 디버그를 한다고 하면, 대부분은 `console.log`를 많이 생각할 것입니다. 하지만, `console.log`만 로그를 호출하고 보여줄 수 있는 것이 아니기 때문에, 아래와 같이 다른 디버깅 형태로도 호출하여 활용하면 좋을 것 같습니다.
console.table
표 형식의 데이터를 읽기 쉽고 한눈에 파악하기 좋습니다.
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' }
];
console.table(users);
console.group
`console.group`, `console.groupEnd` 방법을 사용하면 중첩된 축소 가능한 그룹을 만들 수 있습니다.
console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();
console.time
`console.time`, `console.timeEnd` 방법을 사용하면 코드 블록이 실행되는 데 걸리는 시간을 측정할 수 있습니다.
console.time('Fetching data');
fetch('https://reqres.in/api/users')
.then(response => response.json())
.then(data => {
console.timeEnd('Fetching data');
// Process the data
});
console.assert
코드에 항상 `true`인 어설션을 확인할 수 있습니다.
function add(a, b) {
return a + b;
}
// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');
console.trace
행 흐름을 이해하고 특정 로그 메시지의 출처를 식별할 수 있는 스택을 출력합니다.
function foo() {
console.trace();
}
function bar() {
foo();
}
bar();
console.dir
개체의 구조를 탐색하고 개체의 모든 속성과 메서드를 보는 데 유용합니다.
const obj = {
id: 1,
name: 'John Doe',
address: {
street: '123 Main St',
city: 'New York',
zip: 10001
}
};
console.dir(obj);
console.count
특정 로그 메세지가 출력되는 횟수를 추적하여 보여줍니다.
function foo(x) {
console.count(x);
}
foo('hello');
foo('world');
foo('hello');
console.clear
콘솔 출력을 지웁니다.
console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');
console.profile
`console.profile`, `console.profileEnd`를 사용하여 성능 병목 현상을 식별하고 속도와 효율성을 위해 코드를 최적화하는 데 유용합니다.
console.profile('MyProfile');
// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
// Do something
}
console.profileEnd('MyProfile');
console에 스타일 및 색상 사용
console.log('%cHello world!', 'color: red; font-weight: bold;');
참고 링크
Why using just console.log in 2023 is a big no-no 🚀
Here are 5 must-know console object methods and tricks! Are you still using console.log for all your...
dev.to