예쁜 JavaScript 콘솔 메시지

Facebook에 로그인한 상태에서 브라우저 도구를 연 적이 있다면 위의 내용을 알아차렸을 것입니다(적어도 이 글을 쓰는 시점에는 이렇게 생겼습니다).

DOM 경고는 차치하고, 생성하고 있는 대부분의 메시지console.log와 약간 다르게 보입니까? 약간의 빨간색 텍스트와 약간 더 큰 텍스트가 있습니다. 좀 이상하지 않나요?
console 함수에는 다양한 서식 옵션이 있으므로 특정 소수 자릿수에 숫자를 표시하려면 다음과 같이 %.#f를 사용할 수 있습니다.

console.log('Pi to 5 decimal places: %.5f', Math.PI);

그러나 그것은 Firefox에서만 작동합니다.

로그 메시지에서 개체가 나타나는 위치를 지정하려는 경우 다음을 사용할 수 있습니다%O.

console.log('We found an object, %O, in the system', { foo: 'bar' });

하지만 그게 전부입니다. 큰 빨간색 텍스트를 만드는 방법은 무엇입니까?

이를 위해 %c 포맷터를 사용하여 문자열의 한 지점에 CSS를 적용합니다.

console.log('%cR%ca%ci%cn%cb%co%cw', 'font-size: 20px; color: blue;', 'font-size: 25px; color: lightblue;', 'font-size: 30px; color: lightgreen;', 'font-size: 35px; color: green', 'font-size: 30px; color: yellow;', 'font-size: 25px; color: orange', 'font-size: 20px; color: red')

%c를 사용하면 기록되는 메시지가 끝날 때까지 또는 다른 메시지%c가 발견될 때까지 적용될 일련의 CSS 규칙을 제공합니다. 즉, 위와 같이 각 요소를 조작하면서 멋진 무지개 효과를 만들 수 있습니다. 또는 정말로 모험을 하고 싶다면 다음과 같이 할 수 있습니다.

console.log('%c' + 'This console is on fire', 'font-family:Comic Sans MS; font-size:50px; font-weight:bold; background: linear-gradient(#f00, yellow); border-radius: 5px; padding: 20px')

예, 텍스트의 그라데이션 배경을 설정하고 약간의 패딩과 둥근 모서리를 추가하고 있습니다!

이제 CSS의 모든 측면을 사용할 수 없으며(예를 들어 애니메이션을 할 수 있는지 알아낼 수 없었습니다) 그다지 유용하지 않습니다. 하지만 이봐, 약간 재미있지 않니! 😉