CSS를 사용하여 무서운 콘솔 메시지 만들기

같은 Courier 새 10px 글꼴을 가진 디버그 메시지를 반복해서 읽는 것에 싫증이 났습니까?오류 메시지나 콘솔 로그를 코드 블록별로 색상 인코딩하시겠습니까?인터넷 애플리케이션을 검사하는 사람들에게 마이스페이스의 무법천지를 일깨워 주고 싶으세요?
이제 됐어.
대부분의 현대 브라우저에서는 CSS를 사용하여 콘솔 메시지를 설정하는 스타일을 지원합니다.당신이 해야 할 일은 메시지 앞에%c를 붙이고 원하는 스타일을 두 번째 매개 변수로 전달하는 것입니다.

console.log("This is a normal message.");
console.log(
  "%cThis message is big and scary!",
  "color: red; background-color: black; font-size: 16px"
);
console.log("This message is not.");

예를 들어 위의 코드는 다음과 같은 출력을 만들어 낸다.

변수에서 스타일을 정의하고 템플릿 문자를 사용할 수도 있습니다.

const style = `
    color:white;
    background: linear-gradient(312deg, rgba(255,0,0,1) 0%, rgba(241,255,0,1) 15%, rgba(0,255,12,1) 30%, rgba(0,254,255,1) 43%, rgba(0,1,255,1) 59%, rgba(250,0,253,1) 88%, rgba(255,0,0,1) 100%);
    border: 1px solid white;
    padding: 5px;
    font-family: "Comic Sans MS";
    font-size: 16px;
`;

console.error(
  `%c🌈💖 An error has occurred. Everything is ruined forever. 💖🌈`,
  `${style}`
);

이것은 정말 타격을 줄이는 데 도움이 된다고 생각하지 않니?