CSS 스타일을 사용한 Console.log

내가 젊고 순진했을 때 실수로 Facebook 브라우저를 마우스 오른쪽 버튼으로 클릭하고 이 거대한 엉덩이 경고를 본 것을 기억합니다. 귀엽다고 생각했습니다. 누가 같은 경고를 받았는지 맞춰보세요. (플러스로 끝나는 것)



스포일러 주의, 아직 있습니다.

Safari를 제외한 대부분의 최신 브라우저는 console.log() 스타일을 지원합니다. (Whut) 첫 번째 매개변수의 텍스트 앞에 %c를 추가하고 다음 매개변수의 CSS 스타일을 추가합니다.

      console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );

팁: 이 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭하십시오. 지금 위의 코드를 콘솔에 붙여넣으세요.
또 다른 팁: 이 튜토리얼은 멍청한 놈에게 깊은 인상을 주기 위한 것입니다. 이미 알고 있다면 인생을 계속하십시오.

아래 형식을 사용하여 console.log()에 여러 CSS 스타일을 포함할 수 있습니다.

console.log('%cb %cb ', 'color:blue;border:1px solid black', 'color:black;border:1px solid black');

Console 에서 다른 방법과 함께 CSS 스타일을 사용할 수 있습니다. 나는 여전히 내 코드에서 예전console.log을 오용하는 것을 좋아하지만 올바른 접근 방식은 로그를 쉽게 표시하고 숨길 수 있는 디버그 모듈https://www.npmjs.com/package/debug을 사용하는 것입니다.

데모,

console.log()를 보려면 이 페이지를 마우스 오른쪽 버튼으로 클릭합니다.

의문,

c의 %c는 무엇을 의미합니까?
ㅏ. CSS
비. 관습
씨. 성격
디. 해당 사항 없음

참조:
https://developer.mozilla.org/en-US/docs/Web/API/console

새로운 날 새로운 cringey 비디오,