console.log() 그렇게 할 수 있습니까? 🤯️

console.log 함수는 JavaScript에서 가장 많이 사용되는 메소드 중 하나입니다! 일반적으로 디버깅에 사용되지만 모든 비밀을 알고 있습니까? 보자!

1. CSS를 추가할 수 있습니다!

콘솔 로그가 CSS를 지원한다는 사실을 알고 계셨나요? 나는 확실히 그렇지 않았기 때문에 그것이 사실이라는 것을 알고 매우 충격을 받았습니다!

이렇게 하려면 %c 로 로그 메시지를 시작하고 스타일을 두 번째 인수로 전달해야 합니다.

console.log("%cAn Error Happened!", "font-size: 10px; margin: 30px 0; padding: 5px 20px; color: #fff; background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);")

2. 경고, 오류 및 정보 ⚠️

다양한 목적에 적합한 다양한 로그 수준이 있습니다. DevTools 콘솔에서 필터링할 수도 있습니다.

console.error("console.error()");
console.info("console.info()");
console.warn("console.warn()");

3. 콘솔 정리 🧹

콘솔이 지저분해지면 console.clear()를 실행하거나 Ctrl+L 바로 가기를 사용하여 정리할 수 있습니다!

console.clear();

4. 함께 그룹화 🕸️

console.group() 및 console.groupEnd() 를 사용하여 콘솔 메시지를 함께 그룹화하여 항목을 정리하십시오.

console.group("Numbers");
console.group("Even");
console.log(2);
console.log(4);
console.groupEnd();
console.group("Odd");
console.log(1);
console.log(3);
console.groupEnd();
console.groupEnd();

5. 유사한 메시지 수 유지 5️⃣

console.count() 메서드를 사용하여 특정 메시지를 기록한 횟수를 세어볼 수 있습니다.

console.count("one");
console.count("one");
console.count("one");
console.count("two");
console.count("three");
console.count("two");

6. 배열 또는 객체를 테이블로 출력하기 📑

개체 또는 배열과 같은 테이블 형식 데이터가 있습니까? console.table()를 사용하여 테이블로 표시합니다.

var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);

7. 성능 측정

함수가 얼마나 빠른지 알고 싶습니까? console.time()를 사용하면 정말 쉽습니다!

console.time("Performance:")
for(let i = 0; i < 100000; i++){ Math.sqrt(i) }
console.timeEnd("Performance:")

8. HTML 요소 표시

console.dirxml를 사용하여 HTML 요소의 직관적인 표현을 만듭니다.

console.dirxml(document.body)

9. JavaScript 개체 검사 🔍

console.dir를 사용하여 JavaScript 객체의 직관적인 표현을 만들 수 있습니다.

console.dir({firstName: 'Jane', lastName: 'Smith'})

오늘 새로운 것을 배웠다면 Twitter에서 나를 팔로우하면 정말 도움이 될 것입니다! 🤗




.ltag__user__id__833086 .follow-action-button {
배경색: #FF0000 !중요;
색상: #ffffff !중요;
테두리 색상: #FF0000 !중요;
}

엘루다 팔로우

Follow me on Twitter to stay informed! ⟶ @eludadev